17.4 AJAX Control toolkit
AJAX Control toolkit是一套基于ASP.NET AJAX框架的开源控件库，里面包含了30多个非常好用的AJAX控件。这套控件最可爱的地方就是它们不是单独使用的新控件，而是作为现有服务器控件的AJAX功能扩展。也即是说，一个普普通通的使用了服务器控件的页面，只要向页面中拖放几个AJAX控件，简单设置几个属性，不需要多写一行代码，页面立即就拥有了AJAX功能。
17.4.1 AJAX Control toolkit简介
AJAX Control Toolkit是由CodePlex开源社区和Microsoft共同开发的一个ASP.NET AJAX扩展控件包，其中包含了30多种基于ASP.NET AJAX的、提供某专一功能的服务端控件。它可以在不重新载入整个页面的情况下实现最终更新页面或只刷新Web页中被更新的部分。并且它是一个免费的资源，任何程序开发人员都可以使用该资源。
AJAX Control Toolkit构建在ASP.NET AJAX Extensions之上，满足了三个需要。首先，它提供了一个组件集，使网站开发者可以直接使用，从而快速完成Web应用程序的开发而不用写过多的代码，其次，它给那些希望写客户端代码的人提供了很好的范例，第三，它还能使最好的脚本开发者的工作脱颖而出。总而言之，AJAX Control Toolkit是一组功能强大的Web客户端工具集，能大大地提高Web应用程序的开发效率及其质量。
Visual Studio 2012本身并没有自带AjaxControlToolkit控件，必须下载安装后才能使用。下载地址为http://asp.net/ajax/downloads/default.asxp，选择AjaxControlToolkit-Framework3[1].5-NoSource.zip文件下载。下载后解压缩文件，生成AjaxControlExtender文件夹和SampleWebSite文件夹。AjaxControlExtender文件夹内是安装程序模板，安装程序文件名为AjaxControlExtender.vsi。SampleWebSite文件夹内是一个网站示例，包括所有的控件，可以在Visual Studio 2012中打开该网站了解这些控件的功能和使用方法，安装AJAX Control Toolkit的步骤如下：
01 单击AjaxControlExtender.vsi文件，出现如图17-10所示的“安装程序”对话框。
图17-10 “Visual Stdio内容安装程序”对话框
02 选择所需的模板，单击“下一步”按钮执行安装。安装完毕后，在如图17-11所示的Vistual Studio 2012 Web项目的工具箱中单击右键，选择“添加选项卡”选项，在出现的选项卡文本框中填写AjaxControlToolkit，按Enter键。
图17-11 工具箱
03 在创建好的AjaxControlToolkit的选项卡上单击右键，选择“选择项”，弹出如图17-12所示“选择工具箱项”对话框。
图17-12 “选择工具箱项”对话框
04 在对话框中选中Accordion和AccordionPane选项，单击“确定”按钮（如果在对话框中没有Accordion和AccordionPane这两个选项，则可以单击“浏览”按钮，在弹出的“打开”对话框中选择SampleWebSite文件夹下bin目录中的AjaxControlToolkit.dll文件，单击“打开”按钮，就引入了Accordion和AccordionPane这两个选项）。
05 这样就将SampleWebSite文件夹下bin目录中的AjaxControlToolkit.dll的组件引入了工具箱。
06 在如图17-13所示的AjaxControlToolkit选项卡下会出现30多个AJAX控件。
图17-13 展开的AjaxControlToolkit选项卡
然后，就可以像使用工具箱中其他控件一样使用这些AjaxControlToolkit控件了。由于该控件集中控件较多，无法为大家一一介绍，所以下面仅介绍两个最为常用的控件。
17.4.2 CalendaeExtend控件
在Visual Studio 2012的工具箱中，有一个常用的Calendae日历控件，但这个控件一直让用户感觉不好，因为在选择日期时会刷新页面。现在AjaxControlToolkit中针对TextBox控件设计了一个Calendae的扩展控件CalendaeExtend，使日历与TextBox控件完全地结合，在CalendaeExtend中选择日期，会直接反应在TextBox控件上，不需要写任何程序代码。CalendaeExtend控件改进了ASP.NET日历控件的多项缺陷：如原来日历在切换时，只能用月份转换，如果要输入距离现在很久的日期时，切换日历需要花费极多的时间，而在CalendaeExtend中可使用年份和月份切换，且采取了列表式的显示，保证用户可以在任何日期中转换。同时能够实现选择日期时页面的无刷新，功能很强大。
CalendaeExtend控件有三个常用而重要的属性：
● TargetControlID属性用于设置关联的文本框控件编号，当用户单击关联的文本框时，日历会自动弹出，当选择好日期后，日历会自动消失，所选的日期会显示在文本框中。
● Format属性用于设置显示在关联文本框TextBox中日期的格式。
● CssClass属性用于设置此日历控件的CSS外观格式。
【实例17-6】CalendaeExtend的使用
本实例演示使用CalendarExtend日历扩展控件配合TextBox控件实现AJAX弹出式日历供用户无刷新的选择日期并显示选择结果。具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例17-6”。
02 在网站的根目录下创建一个名为Default.aspx的窗体文件。
03 单击Default.aspx文件，打开“视图编辑”界面，进入到“源视图”，在<form>和</form>标记之间编辑关键代码如下：
在上面的代码中，第1、2行定义一个服务器脚本管理控件ScriptManager1，管理页面中的AJAX控件。第3行定义一个服务器日历扩展控件CalendarExtender1，设置其与文本框控件TextBox1关联、日期的显示格式为yyyy-MM-dd。第4行定义一个服务器文本框控件TextBox1，用于用户选择查询日期。第5行定义一个服务器按钮控件Button1并设置其显示的文字。
04 按快捷键Ctrl＋F5运行程序，效果如图17-14所示。当用户将鼠标放置在文本框区域内单击，填出日历控件，选择查询日期后单击“提交”按钮。文本框中将显示如图17-15所示的日期。
图17-14 运行结果1
图17-15 运行结果2
17.4.3 Accordion控件
Accordion是一个可以让页面显示多个Panel面板，用户可方便地展开或者关闭一系列页面Panel，有点类似多个CollapsiblePanels控件的组合。但是在同一时间内，只能展开其中的一个Panel，每一个Accordion控件包括若干个AccordionPane控件，AccordionPane控件可以象Panel控件一样，用来作为其显示内容的载体。
另外，每一个AccordionPane又具有Header和Content部分，分别用于表示它的标题和其中的内容。
Accordion控件具有保持其选中状态的功能，当页面发生提交的过程后，Accordion保留其提交前选中的页面。
Accordion控件的常用属性如表17-7所示。
表17-7 Accordion控件的常用属性
表17-7中AutoSize属性支持以下三种显示和排版方式：
● None，Accordion在其展开或者折叠过程中，将根据它内部显示的内容自动进行尺寸的变化，不受到任何的条件限制。如果将AutoSize属性设置为None它将可能造成页面上的其他元素跟随Accordion的尺寸变化产生向上或者向下的移动。
● Limit，它将使得Accordion控件永远不能将它的尺寸扩展到规定的高度（Height）属性之外，如果将AutoSize属性设置为Limit，可能会造成在某种情况下，它里面的内容需要通过滚动条来滚动。
● Fill，它将使得Accordion控件永远都保持在其高度（Height）属性规定的高度。
Accordion同样可以象DataGrid一样进行数据绑定，它同样可以通过设置DataSource属性和DataSourceID属性，并在HeaderTemplate和ContentTemplate属性中设置其绑定的模板即可将其进行数据绑定。
【实例17-7】Accordion控件的使用
利用Accordion控件实现多个导航菜单的展开与折叠，具体实现步骤如下：
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例17-7”。
02 在网站根目录下创建一个名为Default.aspx窗体文件。
03 单击网站目录中的Default.aspx文件，打开“视图设计器”，进入“源视图”中，在<form>和</form>标记之间编辑关键代码如下：
上面的代码中第1行添加一个脚本管理控件ScriptManager1，对页面中的AJAX控件进行管理。第2行～第28行添加一个Accordion控件，其中，第3行到第27行使用Panes标签来包含Accordion控件中的面板。第4行～第9行、第10行～第17行、第18行～第25行分别添加了三个AccordionPane控件，第5、11、19行定义面板的标题，第6行～第9行、第13行～第17行、第21～25行定义面板的内容。
04 按快捷键Ctrl＋F5运行程序，效果如图17-16所示。单击“相册管理”菜单，展开下面子菜单内容，而上题中已经展开的内容将折叠起来，如图17-17所示。
图17-16 运行效果
图17-17 运行效果