Asp.net Ajax Accordion控制項的用法
- 2019 年 10 月 7 日
- 筆記
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();
