AJAXControlToolkit的使用方法

1　AJAX Control Toolkit简介

　　ASP.NET是一种用于创建动态Web应用程序的技术，它是.NET Framework的一部分。ASP.NET AJAX是一个免费框架，用于快速建立有效率及交互式的、能在所有流行的浏览器工作的Web应用程序。AJAX Control Toolkit是CodePlex开源社区与微软之间的一个联合项目。该Toolkit建立在ASP.NET AJAX扩展之上，并以成为所有可用的web客户端组件中最大、最好的一个工具集作为目标。

　　该Toolkit满足了三个需要。首先，它提供了一个组件集，使网站开发者可以直接使用，从而快速完成web应用程序的开发而不用写过多的代码，其次，它给那些希望写客户端代码的人提供了很好的范例，第三，它还能使最好的脚本开发者的工作脱颖而出。总而言之，AJAX Control Toolkit是一组功能强大的web客户端工具集，能大大提高web应用程序的开发效率及其质量。

　　2　　　　　　　　 AJAX Control Toolkit的使用

　　下面结合实际案例介绍AJAX Control Toolkit的使用。实际案例为笔者根据单位的需求开发的维修管理系统，笔者所在单位为三级甲等医院，因单位的电脑硬件维修任务较为频繁需外包，要对维修信息进行记录及统计，特开发该系统，以方便信息的录入、查找及统计，提高工作效率及管理水平。

　　2.1　准备工作

　　如何将这套功能强大的工具集加入到Visual Studio.NET 2008中，并在我们应用程序开发的过程中使用呢？首先要安装.NET Framework 3.5、Visual Studio 2008（下简称VS2008）、SQL Server 2005，做好系统和数据库的设计工作并准备好数据库。

　　从ASP.NET AJAX Control Toolkit网站（http://www.codeplex.com/AjaxControlToolkit）下载AJAX Control Toolkit的最新版本（Version 3.0.20820），该版本是针对微软官方的NET Framework 3.5 SP1和 VS2008 SP1发布的。下载后将其解压，把 ..AjaxControlToolkit-Framework3.5SampleWebSiteBin 下的所有文件都复制到 ..AjaxControlToolkit-Framework3.5Binaries下，为在VS2008中添加工具栏做准备。打开VS2008，新建网站，选择ASP.net(网页[C#]) .net framework 3.5(因VS2008包括了，.net framework 3.0, .net framework 2.0)，给项目添加Bin目录，将Binaries下AjaxControlToolkit.dll 添加到项目中的Bin下。然后在VS2008中工具栏里新建一个选项卡，命名为 Ajax Control Toolkits（可随意）然后将Binaries 下的 AjaxControlToolkit.dll 拖动到此选项卡中，选项卡中便会出现很多控件，这些都是有助于我们开发工作的利器。我们再来看看添加工具集后的变化，在项目中添加Web窗体，从工具箱拖入一个textbox，可以看到右边多出了一个“textbox任务”的菜单，点击“添加扩展程序”，弹出“扩展程序向导”对话框，可见提供了很多VS中原本没有的工具给我们使用，如图2.1所示

　图2.1 “扩展程序向导”对话框

　　2.2 实际运用

　　以下结合案例中使用到的控件，介绍AJAX Control Toolkit的使用方法及其功能。案例的录入界面如图2.2所示

　　图2.2　系统信息录入界面

　　2.2.1　CalendarExtender控件

案例在信息录入界面的报修时间、完成时间栏中需要录入相关的时间信息，选取CalendarExtender控件可实现鼠标点选完成时间的录入，方便快捷，效果如图2.3所示：

　　图2.3　鼠标点选录入时间

　　VS中自带的Calendar控件是无法做到这一点的。

　　CalendarExtender控件的使用非常简单：

　　在Web窗体中添加ScriptManager控件，添加textbox，取名txtreptime，点击“添加扩展程序”，在弹出的“扩展程序向导”对话框中选择CalendarExtender控件，即可。Web窗体源页面相应代码为：

　Format="yyyy-MM-dd"

　TargetCOntrolID="txtreptime">

其中，EnableScriptGlobalization="true"自加，使控件显示中文；Format="yyyy-MM-dd"自加，控制时间的格式。

　　2.2.2　　　　　　　　　 AutoCompleteExtender控件的使用

使用AutoCompleteExtender控件为了实现自动完成功能及动态绑定数据，其中科室、故障描述、维修人员等栏都使用了该控件。在后台绑定数据库中相应的数据，如科室名称的录入中，输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入，如需更新数据，则在数据库中进行更新即可实现动态绑定。如图2.4所示：

　　2.4　自动完成功能

　　使用步骤如下：

　　第一步：在input.aspx窗体中添加一个TextBox控件，取名txtdep，添加扩展程序并选取AutoCompleteExtender控件。

　　拖进设计界面后代码如下所示：

　　 第二步：在Web.config文件中appSettings节添加数据库连接字符串，为连接数据库做准备：

其中，EnableScriptGlobalization="true"自加，使控件显示中文；Format="yyyy-MM-dd"自加，控制时间的格式。

　　2.2.2　　　　　　　　　 AutoCompleteExtender控件的使用

使用AutoCompleteExtender控件为了实现自动完成功能及动态绑定数据，其中科室、故障描述、维修人员等栏都使用了该控件。在后台绑定数据库中相应的数据，如科室名称的录入中，输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入，如需更新数据，则在数据库中进行更新即可实现动态绑定。如图2.4所示：

　　2.4　自动完成功能

　　使用步骤如下：

　　第一步：在input.aspx窗体中添加一个TextBox控件，取名txtdep，添加扩展程序并选取AutoCompleteExtender控件。

　　拖进设计界面后代码如下所示：

　　 第二步：在Web.config文件中appSettings节添加数据库连接字符串，为连接数据库做准备：

　其中，server为SQL服务器名称，案例为本地，uid、pwd为SQL Server用户名和密码，initial catalog为要连接的数据库，，请根据实际情况填写。

　　第三步：建立Web服务（WebService）。要使用AutoCompleteExtender，我们要通过Web服务传递数据。在解决方案资源管理器单击项目-〉添加新项-〉Web服务。这里使用了默认的名称WebService.asmx。

　　WebService.asmx的代码修改如下：

using System.Collections;

using System.Web;

using System.Web.Services;

using System.Collections.Generic;

using System.Web.Services.Protocols;

using System.Data;

using System.Data.SqlClient;

using AjaxControlToolkit;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(COnformsTo= WsiProfiles.BasicProfile1_1)]

//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。

[System.Web.Script.Services.ScriptService]//必需，告诉.net runtime该WebService被允许从客户端调用

public class WebService : System.Web.Services.WebService

　{

　　　　public WebService () {　　　　 }

　　　 　//构建Web服务的函数

　　[WebMethod]

　　　 public string[] getdepalist(string prefixText,int count)

{

//连接数据库

　　　　　　　 string sqlstr = System.Configuration.ConfigurationSettings.AppSettings["ConnString"];

　　　　　 　　SqlConnection sqlcon=new SqlConnection(sqlstr);

//从数据库中的表里用select语句返回科室的全称

　　　　　　　 string mysql = "select Area_Full from ST_Area where Area_Full like" + "'" + prefixText + "%' or Area_Spell like" + "'" + prefixText + "%'" ;

//使用SqlDataAdapter对控件进行数据的填充

　　　　　　　 SqlDataAdapter da= new SqlDataAdapter(mysql, sqlcon);

　　　　　　　 DataSet ds=new DataSet();

　　　　　　　 if (count == 0)

　　　　　　　 { count = 10;}

　　　　　　　 da.Fill(ds, "Depa_Full");

//List是一个集合，根据特殊条件找到我们所需要的值

　　　　　　　 List items = new List(count);

　　　　　　　 for (int i = 1; i <= ds.Tables["Depa_Full"].Rows.Count; i++)

　　　　　　　 {

　　　　　　　　　　　 items.Add(ds.Tables["Depa_Full"].Rows[i - 1][0].ToString().Trim());　　　　　　　　　　　　　　　　　　

　　　　　　　 }

　　　　　　　 return items.ToArray();

}

}

　　第四步：设置AutoCompleteExtender控件，具体设置

　　　　　　　　TargetCOntrolID="TextBox1"

　　　　　　　　ServicePath="WebService.asmx"

　　　　　　　　ServiceMethod="getdepalist "

MinimumPrefixLength="0">

　　其中，ServicePath是指Web服务的文件名。ServiceMethod是指调用Web服务的函数名。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表，本案例为0，实现鼠标点击即返回所有科室名称，如图2.5所示（注：下图中AutoCompleteExtender控件的外观可在CSS文件中控制，代码略）：

　　图2.5　鼠标点击即返回所有科室名称

　　 3　体会

　　实际开发过程中，多次利用了上述两个控件，实现了信息的高效录入，甚至完全使用鼠标就可以完成信息录入，系统使用非常方便，并给用户带来很好的体验。

　　AJAX Control Toolki的功能十分强大，笔者只是结合实际案例，介绍了其中很小的一部分，意在抛砖引玉，期望能激发读者的兴趣，结合系统开发的实际需要，灵活使用该工具集，提高编程效率，开发出用户体验丰富、功能强大的应用程序。