10.3 ASP.NET AJAX服务器端控件扩展
ASP.NET AJAX扩展程序控件增强了标准ASP.NET Web服务器控件的客户端功能。通过使用扩展程序控件，可以扩展标准的Web服务器控件（比如TextBox控件、Button控件），从而给用户提供更丰富的体验。
ASP.NET AJAX扩展程序控件也可以添加到Visual Studio 2010中，使用方法同标准服务器控件。
通过将扩展程序控件的TargetControlID属性设置为要扩展的Web服务器控件的ID，可将扩展程序控件附加到该服务器控件。
可以使用下面的方法将扩展程序控件添加到“设计”视图中的Web服务器控件：
（1）将扩展程序控件拖到Web服务器控件上。只能将扩展程序控件放到支持扩展程序控件的Web服务器控件上。当用户将扩展程序控件拖到设计图面时，指针会提示是否可以将该扩展程序控件放到Web服务器控件上。
（2）右击该Web服务器控件，在弹出菜单中单击“添加扩展程序”或选择“按钮任务”智能标记，单击“添加扩展程序”命令。
10.3.1 安装ASP.NET AJAX Control Toolkit
AJAX Control Toolkit是针对ASP.NET的一个AJAX控件集，它是由CodePlex开源社区和Microsoft共同开发的一个ASP.NET AJAX扩展控件包，包含几十种基于ASP.NET AJAX的、提供某一专一功能的服务端控件。它构建在ASP.NET 2.0 AJAX Extensions之上，是Web应用程序中最强大的扩展控件集之一。
AJAX Control Toolkit的安装非常简单，可以在线下载其安装包直接安装，也可以通过插件NuGet（New Get）进行管理安装。NuGet是一个专门管理插件的程序，通过NuGet可以下载安装很多功能强大的插件。
NuGet的安装可以通过VS 2010工具里面的扩展管理器，如图10-19所示，联机搜索并直接安装，如图10-20所示。
图10-19 扩展管理器
图10-20 搜索NuGet并安装
安装完NuGet后，就可以使用NuGet管理NuGet程序包来进行AJAX Control Toolkit的安装，步骤如下。
（1）创建或打开ASP.NET项目。
（2）在菜单中选择“工具”→“库程序包管理器”→“管理解决方案的NuGet程序包”命令，如图10-21所示，或者在“解决方案资源管理器”处右击，在弹出菜单中选择“管理NuGet程序包（N）…”命令，如图10-22所示。
图10-21 工具菜单中打开管理解决方案的NuGet程序包
图10-22 解决方案中打开管理解决方案的NuGet程序包
（3）打开“管理NuGet程序包”对话框，在右上角上输入“AJAX”后，就可搜索到“AJAXControlToolkit”，如图10-23所示。
图10-23 选择AJAXControlToolkit版本
（4）选择“AJAXControlToolkit”并单击旁边出现的“安装”按钮，开始安装，并同意将其安装在当前项目中，即可安装完毕，如图10-24所示。
图10-24 安装AJAXControlToolkit
（5）安装完毕后在网站的Bin目录下会看到跟AJAXControlToolkit相关的程序集和资源文件，如图10-25所示。
图10-25 AJAXControlToolkit相关的程序集
（6）右击工具箱，在弹出的菜单中选择“添加选项卡”命令，设置名称，如“AJAX Control Toolkit”，然后在“AJAX Control Toolkit”选项上右击，在弹出菜单中选择“选择项”命令，弹出“选择工具箱”对话框，如图10-26所示。
图10-26 选择工具箱
（7）单击“浏览”按钮，浏览找到本项目Bin文件夹下的AJAXControlToolkit.dll，单击“打开”按钮，如图10-27所示。
图10-27 添加AJAXControlToolkit.dll文件
（8）添加完成后，在“AJAX Control Toolkit”选项卡上出现很多控件，如图10-28所示。
图10-28 AJAX Control Toolkit控件箱
从图10-28可以看出，AJAX Control Toolkit的控件集越来越多，在最新的版本中，已经有50多个。
10.3.2 使用ASP.NET AJAX扩展控件
AJAX Control Toolkit中有很多实用的扩展控件，如传文件的AJAXFileUpload、日历控件扩展控件CalendarExtender、命令控件扩展控件ConfirmButtonExtender、自动完成功能的AutoCompleteExtender等。在使用这些扩展控制之前，必须先了解ToolkitScriptManager控件，如图10-29所示。
图10-29 ToolkitScriptManager控件
ToolkitScriptManager控件和ScriptManager控件的功能类似，在ASP.NET 4.0中，因为涉及AJAX Control Toolkit的控件，所以最好使用ToolkitScriptManager代替ScriptManager，以提升脚本下载效率，减少出错几率。
注意
用户在使用所有的AJAX Control Toolkit控件集的控件时都需要在页面中添加ToolKitScriptManager控件，否则，浏览器会报错。
1．CalendarExtender控件的使用
CalendarExtender控件主要用来扩展TextBox（文本框）的功能，实现在文本框中单击时，弹出日期面板，选择日期后将日期返回到文本框中。
它的声明语法如下。
从声明中可以看出，它的主要属性如下。
TargetControlID：该属性设置当哪个控件获取焦点时，弹出日期面板并将日期值返回到该控件中。
Format：通过该属性，设置返回日期的格式。
PopupButtonID：设置当单击哪个控件时，弹出日期面板，此控件不接受返回值。
CssClass：设置日期的CSS样式。
下面通过示例来演示CalendarExtender的使用。
（1）新建一个网站，并添加一个窗体Default.aspx，在窗体上放置两个TextBox和一个ToolkitScriptManager控件，另外，放置一个ImageButton控件，如图10-30所示。
图10-30 前台控件
（2）在TextBox1控件的任务面板上，选择“添加扩展程序”命令，如图10-31所示，在打开的“扩展程序向导”对话框中，选择“CalendarExtender”，如图10-32所示，单击“确定”按钮。
图10-31 添加扩展程序
图10-32 选择“CalendarExtender”
（3）在TextBox2的控件上也选择添加扩展程序CalendarExtender，并设置TextBox2CalendarExtender控件的属性PopupButtonID为ImageButton的ID：Image1，如图10-33所示。
图10-33 设置TextBox2CalendarExtender的属性
设置好后，前台代码如下所示。
（4）运行页面，单击第一个文本框时，如图10-34所示，当单击Image1时，激活了TextBox2_CalendarExtender控件，显示如图10-35所示。
图10-34 显示效果1
图10-35 显示效果2
2．AutoCompleteExtender控件的使用
该控件主要辅助TextBox控件的输入，实现自动完成功能，比如，我们经常上网搜索的时候，出现的一些主要关键词提示，在Google搜索引擎搜索网页时，输入一个字符，如“a”，然后搜索框会自动弹出可能的提示结果，如图10-36所示。
图10-36 自动完成示例
它的声明语法如下。
AutoCompleteExtender控件常用属性如下。
TargetControlID：指定将被辅助完成自动输入的控件ID，这里的控件只能是TextBox。
ServiceMethod：指出提供服务的方法名。
ServicePath：指出提供服务的Web服务路径，若不指出，则ServiceMethod表示本页面对应的方法名。
MinimumPrefixLength：指出开始提供提示服务时，TextBox控件应有的最小字符数，默认为3。
CompletionSetCount：显示的条数，默认为10。
EnableCaching：是否在客户端缓存数据，默认为true。
CompletionInterval：从服务器读取数据的时间间隔，默认为1000，单位为毫秒。
注意
要实现文本框自动完成，必须打开浏览器的自动完成功能。
下面通过示例演示AutoCompleteExtender控件的使用。
（1）新建一个网站，并添加一个窗体Default.aspx，在窗体上放置一个TextBox和一个ToolkitScriptManager控件。
（2）在TextBox控件上，单击“显示智能标记”，在“TextBox任务”面板上，选择“添加扩展程序”，如图10-37所示。
图10-37 显示智能标记
（3）在打开的“扩展程序向导”对话框中，选择“AutoCompleteExtender”，然后单击“确定”按钮，如图10-38所示。
图10-38 选择“AutoCompleteExtender”
（4）添加Web服务。在“解决方案资源管理器”中，右击“网站名称”，在弹出的菜单中选择“添加新项”命令，在“添加新项”对话框中选择：Web服务，文件名默认WebService.asmx，如图10-39所示。
图10-39 添加Web服务
（5）添加以后，在项目中生成一个App_Code目录和WebService.asmx文件，打开webservice.cs文件，代码如下。
默认情况下，语句[System.Web.Script.Services.ScriptService]是被注释掉的，这里把注释符号去掉，因为需要在客户端调用，然后写入方法GetCompletionList，方法如下。
GetCompletionList是为AutoCompleteExtender控件提供服务的方法，它必须完全满足以下3个条件。
方法的传入参数类型必须为string和int；
两个传入参数名必须为prefixText和count；
方法的返回类型为string[]。
（6）设置AutoCompleteExtender控件的属性，主要设置ServiceMethod和ServicePath属性为用户所添加的服务文件和方法，设置后，AutoCompleteExtender控件的属性如下所示。
（7）保存页面，运行效果如图10-40所示，当在文本框中输入3个字符后，就会出现提示信息，如图10-40所示。
图10-40 运行效果
在这个示例中，我们添加了Web服务的文件：WebService.asmx，并编写了Web服务的函数：GetCompleteList。
3．ConfirmButtonExtender控件的使用
ConfirmButtonExtender是一个捕获按钮单击事件的扩展控件或按钮类型的事件，如LinkButton，ImageButton等。在按钮的事件被执行前先确认是否要继续，会弹出一个确认对话框。
它的声明语法如下。
该控件常用的属性如下。
TargetControlID：需要显示确认信息的按钮ID值。
ConfirmText：确认对话框中提示信息。
OnClientCancel：单击“取消”时执行的事件，为空时不执行。
下面通过示例演示ConfirmButtonExtender的使用。
（1）新建一个网站，并添加一个窗体Default.aspx，在窗体上放置一个Button和一个ToolkitScriptManager控件。
（2）在Button控件的任务面板上，选择“添加扩展程序”，在打开的“扩展程序向导”对话框中，选择“ConfirmButtonExtender”，如图10-41所示，单击“确定”按钮。
图10-41 选择“ConfirmButtonExtender”
（3）设置ConfirmButtonExtender控件的属性，设置完后，代码如下。
（4）保存，运行该页面，当单击“Button”按钮时，弹出所设置的信息，如图10-42所示。
图10-42 运行效果
4．ListSearchExtender控件的使用
ListSearchExtender控件主要用于对列表中的内容进行快速搜索定位，它扩展ListBox或DropDownList控件，使其拥有快捷键查找功能，它的声明语法如下。
主要属性如下。
TargetControlID：拥有快捷键查找功能的下拉控件ID。
PromptText：下拉控件得到焦点时显示的提示文字。
PromptCssClass：提示文字的CSS。
PromptPosition：提示文字的位置，Top（默认），Bottom。
下面通过示例演示ListSearchExtender控件的使用。
（1）新建一个网站，并添加一个窗体Default.aspx，在窗体上放置一个ListBox和一个ToolkitScriptManager控件。
（2）在ListBox控件的任务面板上，选择“添加扩展程序”，在打开的“扩展程序向导”对话框中，选择“ListSearchExtender”，如图10-43所示，单击“确定”按钮。
图10-43 选择ListSearchExtender
（3）给ListBox控件添加选项，添加后，前台代码如下。
（4）保存，运行该页，单击ListBox后输入a，列表自动定位在以“a”开头的选项上，如图10-44所示。
图10-44 运行效果