AJAX Control Toolkit 中的 Accordion 控件可提供多个窗格，允许用户每次显示其中的一个。窗格通常只在页面中声明，但绑定到一个数据源会带来更多的灵活性。

步骤：首先，我们需要一个数据源。本例使用AdventureWorks 数据库和Microsoft sql server 2005 Express Edition。数据库是Visual Studio 安装（包括Express 版）的一个可选组件，也可以在这里单独下载得到：http://go.microsoft.com/fwlink/?LinkId=64064 。AdventureWorks 数据库是SQL Server 2005 Samples 和 Sample Databases（在此处下载：http://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&DisplayLang=en ）的一部分。配置该数据库的最简单的方法是，使用Microsoft SQL Server Management Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en) ，附加 AdventureWorks.mdf数据库文件。

对于本例，我们假定SQL Server 2005 Express Edition的实例称作SQLEXPRESS，该实例与Web 服务器驻留在同一机器上，这也是缺省设置。如果您的设置与此不同，您就得相应地更改数据库的连接信息了。

为了激活ASP.NET AJAX 和 Control Toolkit 的功能，必须将ScriptManager控件放置于页面中某处（可放于任何地方，但必须在

然后，将一个数据源添加到该页面。为了使用一个有限的数据量，我们只选择AdventureWorks 数据库的Vendor 表中的前五条记录。如果使用Visual Studio Assistant 来创建该数据源，请注意其当前版本中存在一个缺陷，那就是，表名(Vendor)前没有加上Purchasing前缀。下面的标记语句才是正确的：

记住该数据源的名称(ID)。在 Accordion 控件的DataSourceID属性中要使用的正是这个标识：

在Accordion 控件中，您可以提供控件的各个部分的模板，包括标题部分的模板() 和内容部分的模板()。在这些元素中只输出数据源的数据。为此使用DataBinder.Eval()方法：

Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%><%#DataBinder.Eval(Container.DataItem, "Name")%> 在加载页面时，必须将数据源绑定到Accordion 控件，通过以下服务器端代码实现之：

在本例最后，需要定义两个CSS 类，Accordion 控件将引用这两个类（在该控件的HeaderCssClass和ContentCssClass 属性中引用）。将如下标记放入页面的区域：

Accordion 控件中的数据直接来自数据源