在现代网页设计中，为了提供更好的用户体验，经常需要创建动态的内容展示方式。手风琴控件（Accordion）就是这样一种流行的UI组件，它允许用户通过点击不同的标题来展开或收起内容区域。本文将介绍如何使用AJAX技术来创建一个简单的手风琴控件菜单。
手风琴控件的核心思想是提供一系列的面板，并在这些面板中显示或隐藏信息。使用起来非常简单：需要将每个面板设置在手风琴控件内部，并为每个面板指定一个标题，当然，还需要设置每个面板的内容。
要使用手风琴控件，需要AJAXControl Toolkit。在开始使用手风琴控件开发之前，需要了解这个控件的基本属性。
以下是一些基本属性，这些属性将帮助定义手风琴控件的行为：
AJAXControl Toolkit中的手风琴控件扩展器也可以作为一个数据绑定控件使用。可以将从数据库检索到的数据绑定到手风琴控件。手风琴控件包括DataSource和DataSourceID等属性（见上文），这些属性可以用来绑定数据。HeaderTemplate可以用来显示由手风琴控件生成的面板的标题或标题，点击它可以打开或关闭ContentTemplate，后者通过绑定数据与手风琴扩展器生成。
当DataSource传递给手风琴控件时，使用DataBind方法来绑定数据。与数据绑定的手风琴控件会自动生成展开/折叠面板及其标题。
以下是绑定手风琴到数据源的基本步骤代码示例：
Public Sub getCategories()
Dim sqlConn As New SqlConnection(conString)
sqlConn.Open()
Dim sqlSelect As New SqlCommand("SELECT * FROM Categories", sqlConn)
sqlSelect.CommandType = System.Data.CommandType.Text
Dim sqlAdapter As New SqlDataAdapter(sqlSelect)
Dim myDataset As New DataSet()
sqlAdapter.Fill(myDataset)
sqlConn.Close()
Accordion1.DataSource = myDataset.Tables(0).DefaultView
Accordion1.DataBind()
End Sub
Protected Sub Accordion1_ItemDataBound(sender As Object, _
e As AjaxControlToolkit.AccordionItemEventArgs)
If e.ItemType = AjaxControlToolkit.AccordionItemType.Content Then
Dim sqlConn As New SqlConnection(conString)
sqlConn.Open()
Dim sqlSelect As New SqlCommand("SELECT productName " & _
"FROM Products where categoryID = '" + _
DirectCast(e.AccordionItem.FindControl("txt_categoryID"),_
HiddenField).Value + "'", sqlConn)
sqlSelect.CommandType = System.Data.CommandType.Text
Dim sqlAdapter As New SqlDataAdapter(sqlSelect)
Dim myDataset As New DataSet()
sqlAdapter.Fill(myDataset)
sqlConn.Close()
Dim grd As New GridView()
grd = DirectCast(e.AccordionItem.FindControl("GridView1"), GridView)
grd.DataSource = myDataset
grd.DataBind()
End If
End Sub
在上面的代码中，首先从数据库中检索所有Categories表的数据。这些数据将用于设置手风琴的标题和列。
知道，要使用任何AJAX组件，必须在站点中注册ScriptManager，它将负责管理控件。因此，将首先创建脚本管理器。
接下来，定义手风琴元素并设置一些基本属性：
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40">
<Panes>
<cc1:AccordionPane ID="AccordionPane0" runat="server">
<Header>
Matenimiento
</Header>
<Content>
<li>
<a href="mypagina.aspx">
My página de prueba
</a>
</li>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
最后，需要关闭所有的面板和手风琴。
以下是完整的示例代码：
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40">
<Panes>
<cc1:AccordionPane ID="AccordionPane0" runat="server">
<Header>
Mantenimiento
</Header>
<Content>
<li>
<a href="mypagina.aspx">
My página de prueba
</a>
</li>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>