创建一个 AJAX 手风琴菜单

• 下载源代码 - 935 KB

引言

AJAX 是 ASP.NET 的强大补充，它以简单灵活的方式提供新功能。 这篇文章专门介绍如何使用 AJAX Accordion 控件创建菜单。

关于该控件

此控件的基本思想是提供一系列面板，并在这些面板中显示和隐藏信息。 使用方法非常简单：我们必须将每个面板设置在 Accordion 控件内，并为每个面板提供一个标题，当然，我们必须设置每个面板的内容。

要使用手风琴控件，您需要 AJAX 控件工具包。

手风琴控件的基本属性

在使用 Accordion 控件开始开发之前，我们必须了解此控件的基本属性

其他手风琴属性

• FramesPerSecond - 过渡动画中使用的每秒帧数。
• RequireOpenedPane - 阻止在单击其标题时关闭当前打开的窗格（这可确保始终打开一个窗格）。 默认值为 true。
• SuppressHeaderPostbacks - 阻止标头中元素的客户端单击处理程序触发（当您想在标头中包含超链接以实现辅助功能时，这尤其有用）。
• DataSource - 要使用的数据源。 必须调用 DataBind()。
• DataSourceID - 要使用的数据源的 ID。
• DataMember - 使用 DataSourceID 时要绑定的成员。

AJAX 手风琴控件扩展器数据源

AJAX Control Toolkit 的 Accordion Control Extender 也可以用作 DataBound 控件。 您可以将从数据库检索到的数据绑定到 Accordion 控件。 Accordion 控件由诸如 DataSource 和 DataSourceID（参见上文）等属性组成，这些属性可用于绑定数据。 HeaderTemplate 可用于显示 Accordion 控件生成的窗格的标题或标题，单击该标题将打开或关闭通过将数据与 Accordion Extender 绑定而生成的 ContentTemplate。

当 DataSource 传递给 Accordion 控件时，我们使用 DataBind 方法来绑定数据。 绑定数据的 Accordion 控件会自动生成展开/折叠窗格以及它们的标题。

此代码表示将 Accordion 绑定到数据源的基本步骤

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

在上面的代码中，我们做了两件事：首先，我们对数据库进行了 SQL 选择，以检索 Categories 表中的所有数据。 此数据将用于设置手风琴的标题和列。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<ajaxToolkit:Accordion
   ID="Accordion1" runat="server" TransitionDuration="100" 
   FramesPerSecond="200" FadeTransitions="true" RequireOpenedPane="false" 
   OnItemDataBound="Accordion1_ItemDataBound"
   ContentCssClass="acc-content" HeaderCssClass="acc-header" 
   HeaderSelectedCssClass="acc-selected">
    <HeaderTemplate>
      <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
    </HeaderTemplate>
    <ContentTemplate>
      <asp:HiddenField ID="txt_categoryID" runat="server" 
          Value='<%#DataBinder.Eval(Container.DataItem,"categoryID") %>' 
     />
   <asp:GridView ID="GridView1" runat="server" 
         RowStyle-BackColor="#ededed" RowStyle-HorizontalAlign="Left"
         AutoGenerateColumns="false" GridLines="None" CellPadding="2" 
         CellSpacing="2" Width="300px">
<Columns>
   <asp:TemplateField 
       HeaderStyle-HorizontalAlign="Left" HeaderText="Product Name" 
       HeaderStyle-BackColor="#d1d1d1"
       HeaderStyle-ForeColor="#777777">

<ItemTemplate>
  <%#DataBinder.Eval(Container.DataItem,"productName") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</ajaxToolkit:Accordion>

在这里，我们使用 <%#DataBinder.Eval(Container.DataItem,"categoryName") %> 将手风琴标题与类别名称绑定，因此我们为数据库中找到的每个元素制作了一个标题。

创建基本手风琴控件

众所周知，要使用任何 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 手风琴，这些面包将负责包含我们想要显示的链接或信息。

<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>Matenimiento</Header>
            <Content>
                <li><a href="mypagina.aspx">My página de prueba</a></li>
            </Content>
        </cc1:AccordionPane>
    </Panes>
</cc1:Accordion>