AjaxControltoolkit学习笔记—Accordion使用详解

 一．Accordion 是一个可以让你在你的 Web 页面方便地开发类似 Outlook 工具栏的 ASP.Net AJAX 控件。 它可以使得你的页面用户方便地展开或者关闭一系列页面元素的显示。

它有点类似多个 CollapsiblePanels 控件的组合。 但是在一个时间内，它只能限制你的页面用户只能展开其中的一个部分， 每一个 Accordion 控件包括若干个 AccordionPane 控件，AccordionPane 控件可以象 Panel 控件一样，用来作为其显示内容的载体。

另外，每一个 AccordionPane 又具有 Header 和 Content 部分，分别用于表示它的标题和其中的内容。

Accordion 控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion 保留其提交前选中的页面。
它支持以下三种显示和排版方式：

• None - Accordion 在其展开或者折叠过程中，将根据它内部显示的内容自动尺寸的变化，不受到任何的条件限制。 如果将 AutoSize 属性设置为 None 它将可能造成页面上的其它元素跟随 Accordion 的尺寸变化产生向上或者向下的移动。
• Limit - 它将使得 Accordion 控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外， 如果将 AutoSize 属性设置为 Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
• Fill - 它将使得 Accordion 控件永远都保持在其高度（Height）属性规定的高度。

Accordion控件也能够进行数据绑定，通过DataSource或 DataSourceID属性指定一个数据源，然后设置标题数据字段（HeaderTemplate）和内容数据字段（ContentTemplate）。

Accordion 同样可以象 DataGrid 一样进行数据绑定，它同样可以通过设置 DataSource 属性和 DataSourceID 属性， 并在 HeaderTemplate 和 ContentTemplate 属性中设置其绑定的模板即可将其进行数据绑定。

上面示例的 Accordion 将会被初始化成如下代码。斜体 属性为可选属性：

 <ajaxToolkit:Accordion ID="MyAccordion" runat="Server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"> <Header> . . . </Header> <Content> . . . </Content> </ajaxToolkit:AccordionPane> . . . </Panes> <HeaderTemplate>...</HeaderTemplate> <ContentTemplate>...</ContentTemplate> </ajaxToolkit:Accordion>

声明Accordion控件时的常用属性标签 
属性标签名
描　　述
SelectedIndex
该控件初次加载时展开的AccordionPane面板的索引值
HeaderCssClass
该Accordion中包含的所有AccordionPane面板的标题区域所应用的CSS Class
ContentCssClass
该Accordion中包含的所有AccordionPane面板的内容区域所应用的CSS Class
AutoSize
在展开具有不同高度的AccordionPane面板时，该Accordion的总高度的变化方式。可选如下3个值：
r None：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短
r Limit：该Accordion将随着当前展开的AccordionPane面板的高度自由伸长/缩短，不过最高不会超过Accordion的Height属性设定值。若是其内容高度超过了Height属性设定值，则将自动显示滚动条
r Fill：该Accordion的高度将固定为Height属性的设定值，不随当前展开的不同高度的AccordionPane面板而变化。若是某个AccordionPane的内容高度超过了Height属性设定值，则将自动显示滚动条
FadeTransitions
若该属性值设置为true，则在切换当前展开的AccordionPane面板时，将带有淡入淡出效果
TransitionDuration
展开/折叠一个AccordionPane面板的过程所花费的时间，单位为毫秒
FramesPerSecond
播放展开/折叠AccordionPane面板动画的每秒钟帧数
DataSourceID
页面中某个DataSource控件的ID，用于通过数据绑定自动生成AccordionPane面板
<Panes>
该标签内将包含一系列的<ajaxToolkit:AccordionPane>标签，即Accordion- Pane的声明，用来表示Accordion中包含的面板
<HeaderTemplate>
在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的标题区域中的内容模板
<ContentTemplate>
在使用数据绑定功能自动生成AccordionPane面板时，该标签内将定义每个面板的正文区域中的内容模板
<Panes>标签中包含的若干个<ajaxToolkit:AccordionPane>标签，声明AccordionPane控件时所常用的属性标签如表10-3所示。

                                                         声明AccordionPane控件时的常用属性标签
属性标签名
描　　述
HeaderCssClass
该AccordionPane面板的标题区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性
ContentCssClass
该AccordionPane面板的内容区域所应用的CSS Class，将覆盖声明在Accordion中的同名属性
<Header>
该标签内将定义此AccordionPane标题区域中的内容
<Content>
该标签内将定义此AccordionPane正文区域中的内容

Bound To XML: <asp:XmlDataSource ID="xml1" runat="server" DataFile="~/App_Data/CarsService.xml" XPath="/CarsService/make" /> <ajaxToolkit:Accordion id="xmlBound" runat="server" DataSourceID="xml1" FadeTransitions="true" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"> <HeaderTemplate> Header: <%# Eval("name") %> </HeaderTemplate> <ContentTemplate> Pane: <%# Eval("name") %> </ContentTemplate> </ajaxToolkit:Accordion> Bound to dictionary: <ajaxToolkit:Accordion id="dictionaryBound" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"> <HeaderTemplate> Header: <%# Eval("Key") %> </HeaderTemplate> <ContentTemplate> Data: <%# Eval("Value") %> </ContentTemplate> </ajaxToolkit:Accordion> 最经用的格式 <ajaxToolkit:Accordion runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"> <Panes> <ajaxToolkit:AccordionPane runat="server"> <Header> <a href="＃" mce_href="＃" >1. Accordion</a></Header> <Content> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion>

若是采用了数据绑定方式动态生成AccordionPane面板，则<HeaderTemplate>和<ContentTemplate>中应该指定相应的绑定模板，举例如下：
<html xmlns="http://www.w3.org/1999/xhtml" > 2<head runat="server"> 3 <title>无标题页</title> 4 <link href="StyleSheet.css" mce_href="StyleSheet.css" rel="stylesheet" type="text/css" /> 5</head> 6<body> 7 <form id="form1" runat="server"> 8 <div> 9  <asp:ScriptManager ID="ScriptManager1" runat="server"> 10 </asp:ScriptManager> 11 <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" DataSourceID="SqlDataSource1"> 12 <HeaderTemplate> 13 <asp:Label ID="lbAuthor" Text='<%# Eval("t_Id") %>' runat="server"></asp:Label> 14 </HeaderTemplate> 15 <ContentTemplate> 16 <asp:Label ID="lbAuthor" Text='<%# Eval("t_Content") %>' runat="server"></asp:Label> 17 </ContentTemplate> 18 </ajaxToolkit:Accordion> 19 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString %>" 20 SelectCommand="SELECT * FROM [test]"></asp:SqlDataSource> 21 <br /> 22 <br /> 23 24 25 </div> 26 </form> 27</body> 28</html>

这样便可以实现与数据库的绑定。