动态添加Accordion窗格

2021-10-20

Christian Wenz

本文档是Visual Basic 教程（转至 Visual C# 教程）

AJAX Control Toolkit 中的Accordion 控件可提供多个窗格，允许用户每次显示其中的一个。窗格通常只在页面中声明，但也可使用服务器端代码来得到同样的结果。

概述

AJAX Control Toolkit 中的Accordion控件可提供多个窗格，允许用户每次显示其中的一个。窗格通常只在页面中声明，但也可使用服务器端代码来得到同样的结果。

步骤

对服务器端代码来说， Accordion 控件的所有重要属性都是公开的。其中包括 Panes 属性，利用该属性，可以访问组成该Accordion控件的窗格集合。每个窗格都为 AccordionPane 类型。因此可以很容易地创建这样一个窗格：

Dim ap1 As New AccordionPane()

利用AccordionPane 的HeaderContainer 属性，可以访问窗格的标题区域中的ASP.NET 控件。同样，利用 AccordionPane 的ContentContainer 属性，可以访问窗格的内容区域中的控件。这样，我们可以使用ASP.NET代码向窗格中添加内容：

ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is
    really flexible."))

最后，要将窗格添加到Accordion 控件的Panes集合中：

acc1.Panes.Add(ap1)

下面是完整的服务器端代码，该代码将两个窗格添加到Accordion 控件中：

<script runat="server">
Sub Page_Load()
     If Not Page.IsPostBack Then
          Dim ap1 As New AccordionPane()
          ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
          ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes 
              using markup is really simple."))
          Dim ap2 As New AccordionPane()
          ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
          ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes 
              using code is really flexible."))
          acc1.Panes.Add(ap1)
          acc1.Panes.Add(ap2)
     End If
End Sub
</script>

现在，唯一缺少的元素就是Accordion 自己了，该元素有赖于ASP.NET ScriptManager 控件的存在：

<form id="form1" runat="server">
     <asp:ScriptManager ID="asm" runat="server" />
     <div>
          <ajaxToolkit:Accordion ID="acc1" runat="server" 
               HeaderCssClass="header" ContentCssClass="content" Width="300px"
               FadeTransitions="true">
          </ajaxToolkit:Accordion>
     </div>
</form>

本例最后是两个CSS 类，在Accordion 控件中引用了这两个类来为浏览器提供样式信息：

<style type="text/css">
     .header {background-color: blue;}
     .content {border: solid;}
</style>

该 Accordion 控件中的数据是由服务器端代码动态添加的

下一篇教程

通过

动态添加Accordion窗格

概述

步骤

其他资源