Asp.net Ajax Accordion控件的用法

Accordion，翻译过来是“手风琴、可折叠”的意思，微软Asp.net ajax提供了Accordion可折叠面板控件，方便用户在系统菜单、信息展示中使用，用户体验是相当的好啊。

这个控件允许定义多个面板，当用户选中一个面板时，其余面板都会折叠起来，只显示选中面板的内容。如果我说的不够清楚，请在这里查看示例：http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Accordion/Accordion.aspx。此外，这个控件还支持数据绑定。

 

看完了示例，该知道这个控件功能好用了吧，下面就是用法了，先说说简单的用法，定义面板、设计面板，就是这么简单，下面给出一段代码，一看就能明白：

 

        <ajaxToolkit:Accordion ID="MyAccordion" runat="Server" SelectedIndex="0" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
            AutoSize="Limit" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
            Width="700" Height="200" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
            <Panes>
                <ajaxToolkit:AccordionPane HeaderCssClass="accordionHeader" runat="server" ContentCssClass="accordionContent">
                    <Header>
                        <span>1. 菜单一</span>
                    </Header>
                    <Content>
                        <span>菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</span>
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    runat="server" ContentCssClass="accordionContent">
                    <Header>
                        <span>2. 菜单二</span>
                    </Header>
                    <Content>
                        <span>菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜菜单二的内容菜</span>
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    runat="server" ContentCssClass="accordionContent">
                    <Header>
                        <span>3. 菜单三</span>
                    </Header>
                    <Content>
                        <span>菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</span>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

 

 

这个是不需要写后台代码的，拿去用就好了，既方便，又实用。

 

接下来说一下数据绑定的，在使用数据绑定时，首先需要设计好HeaderTemplate和ContentTemplate两个模板，然后在后台添加数据绑定代码就可以了。

模板设计和GridView的模板设计基本相同，下面是一段示例代码：

 

       <ajaxToolkit:Accordion ID="BindAccordion" runat="Server" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
            AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
            Width="700" Height="200" RequireOpenedPane="false" SuppressHeaderPostbacks="false">
            <HeaderTemplate>
                <span><%# DataBinder.Eval(Container.DataItem, "HeaderText")%></span>
            </HeaderTemplate>
            <ContentTemplate>
                <span><%# DataBinder.Eval(Container.DataItem, "ContentText")%></span>
            </ContentTemplate>
        </ajaxToolkit:Accordion>

有了这段代码，接下来就是后台的数据绑定了。能够接受的数据源不能使DataTable，不知道为什么，笔者试了DataView和List<>，都是可以的，唯独不能用DataTable，但这个没有关系，如果你的数据格式是DataTable，直接用它的DefaultView就可以了。下面是代码：

 

                //第一种绑定方法
                DataTable dt = new DataTable();
                dt.Columns.Add("HeaderText");
                dt.Columns.Add("ContentText");
                dt.Rows.Add(new object[] { "菜单一", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(new object[] { "菜单二", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(new object[] { "菜单三", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(new object[] { "菜单四", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                dt.Rows.Add(new object[] { "菜单五", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" });
                //数据源需要是一个DataView，不知为何
                this.BindAccordion.DataSource = dt.DefaultView;
                this.BindAccordion.DataBind();

                

上面是实用DataTable的方法，也是我们常常用到的。另外一个是List<>，为了方便起见，我们先定义一个类：

 

    class myItem
    {
        public string HeaderText
        { get; set; }
        public string ContentText
        { get; set; }
    }

然后实用这个类的List来作为数据源：

 

                //第二种绑定方法
                List<myItem> itemList = new List<myItem>() 
                { 
                    new myItem { HeaderText = "菜单一", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" },
                    new myItem { HeaderText = "菜单二", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" },
                    new myItem { HeaderText = "菜单三", ContentText="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容" }
                };
                this.BindAccordion.DataSource = itemList;
                this.BindAccordion.DataBind();