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 控件中,您可以提供控件的各个部分的模板,包括标题部分的模板(
在加载页面时,必须将数据源绑定到Accordion 控件,通过以下服务器端代码实现之:
在本例最后,需要定义两个CSS 类,Accordion 控件将引用这两个类(在该控件的HeaderCssClass和ContentCssClass 属性中引用)。将如下标记放入页面的区域:
Accordion 控件中的数据直接来自数据源