数据绑定到 Accordion (VB)
AJAX 控件工具包中的可折叠控件提供了多个窗格，并允许用户一次显示其中一个窗格。 面板通常在页面本身内声明，但绑定到数据源可提供更大的灵活性。
概述
AJAX 控件工具包中的可折叠控件提供了多个窗格，并允许用户一次显示其中一个窗格。 面板通常在页面本身内声明，但绑定到数据源可提供更大的灵活性。
步骤
首先，需要数据源。 此示例使用 AdventureWorks 数据库和 Microsoft SQL Server 2005 Express Edition。 数据库是 Visual Studio 安装 (包括 express edition) 的可选部分，也可在 下 https://go.microsoft.com/fwlink/?LinkId=64064单独下载。 AdventureWorks 数据库是 SQL Server 2005 示例和示例数据库的一部分， () 下载https://www.microsoft.com/download/details.aspx?id=10679。 设置数据库的最简单方法是使用 Microsoft SQL Server Management Studio (/sql/ssms/download-sql-server-management-studio-ssms) 并附加AdventureWorks.mdf数据库文件。
对于此示例，我们假设SQL Server 2005 Express Edition的实例被调用SQLEXPRESS，并且驻留在与 Web 服务器相同的计算机上;这也是默认设置。 如果设置不同，则必须调整数据库的连接信息。
若要激活 ASP.NET AJAX 和 Control Toolkit 的功能， ScriptManager 必须将控件放在页面上的任意位置 (但) 元素中 <form> ：
<asp:ScriptManager ID="asm" runat="server"/>
然后，将数据源添加到页面。 为了使用有限量的数据，我们只选择 AdventureWorks 数据库的 Vendor 表中的前五个条目。 如果使用 Visual Studio 助手创建数据源，请注意当前版本中的 bug 不会将表名 (Vendor) 前缀Purchasing。 以下标记显示了正确的语法：
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
请记住数据源的名称 (ID) 。 然后，必须在可折叠控件的 属性中 DataSourceID 使用此标识：
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
在可折叠控件中，可以为控件的各个部分提供模板，包括标头 (<HeaderTemplate>) 和内容 (<ContentTemplate>) 。 在这些元素中，只需使用 方法输出数据源中的数据 DataBinder.Eval() ：
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
加载页面时，数据源必须使用此服务器端代码绑定到可折叠项：
<script runat="server">
Sub Page_Load()
acc1.DataBind()
End Sub
</script>
若要结束此示例，需要定义两个 CSS 类，这些类在 Accordion 控件 (其属性 HeaderCssClass 和 ContentCssClass) 中引用。 将以下标记放在 <head> 页面的 部分中：
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
可折叠项中的数据直接来自数据源 (单击以查看全尺寸图像)
