AJAX Control Toolkit 使用

http://hi.baidu.com/l61325711/blog/item/09e29e6060e8744eeaf8f8ca.html

AJAX Control Toolkit 使用

2009-12-09 12:37

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窗体源页面相应代码为： <div><asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" ></asp:ScriptManager></div> <asp:TextBox ID="txtreptime" runat="server"></asp:TextBox>　　　　　　　　　　　　　　　 <cc1:CalendarExtender ID="txtreptime_CalendarExtender" runat="server"　　　　　　　　　　　　　　　　　　　　 Enabled="True" 　Format="yyyy-MM-dd" 　TargetControlID="txtreptime"> </cc1:CalendarExtender> 其中，EnableScriptGlobalization="true"自加，使控件显示中文；Format="yyyy-MM-dd"自加， 控制 时间的格式。 　　2.2.2　　　　　　　　　 AutoCompleteExtender控件的使用 　　 使用AutoCompleteExtender控件为了实现自动完成功能及动态绑定数据，其中科室、故障描述、维修人员等栏都使用了该控件。在后台绑定数据库中相应的数据，如科室名称的录入中，输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入，如需更新数据，则在数据库中进行更新即可实现动态绑定。如图2.4所示： 　　2.4　自动完成功能 　　使用步骤如下： 　　第一步：在input.aspx窗体中添加一个TextBox控件，取名txtdep，添加扩展 程序 并选取AutoCompleteExtender控件。 　　拖进 设计 界面后代码如下所示： <asp:TextBox ID="txtdep" runat="server" ></asp:TextBox> <cc1:AutoCompleteExtender ID="txtdep_AutoCompleteExtender" runat="server" EnableCaching="true" DelimiterCharacters="" Enabled="True" ServicePath=" " TargetControlID="txtdep" ></cc1:AutoCompleteExtender> 　　 第二步：在Web.config文件中appSettings节添加数据库连接字符串，为连接数据库做准备： <appSettings> 　<add key="ConnString" value="server=(local);uid=sa;pwd=;persist security info=False;initial catalog= demo;Max Pool Size=1000"/> </appSettings> 其中，EnableScriptGlobalization="true"自加，使控件显示中文；Format="yyyy-MM-dd"自加， 控制 时间的格式。 　　2.2.2　　　　　　　　　 AutoCompleteExtender控件的使用 　　 使用AutoCompleteExtender控件为了实现自动完成功能及动态绑定数据，其中科室、故障描述、维修人员等栏都使用了该控件。在后台绑定数据库中相应的数据，如科室名称的录入中，输入拼音或输简称后即可自动查找全称，鼠标点选实现快速录入，如需更新数据，则在数据库中进行更新即可实现动态绑定。如图2.4所示： 　　2.4　自动完成功能 　　使用步骤如下： 　　第一步：在input.aspx窗体中添加一个TextBox控件，取名txtdep，添加扩展 程序 并选取AutoCompleteExtender控件。 　　拖进 设计 界面后代码如下所示： <asp:TextBox ID="txtdep" runat="server" ></asp:TextBox> <cc1:AutoCompleteExtender ID="txtdep_AutoCompleteExtender" runat="server" EnableCaching="true" DelimiterCharacters="" Enabled="True" ServicePath=" " TargetControlID="txtdep" ></cc1:AutoCompleteExtender> 　　 第二步：在Web.config文件中appSettings节添加数据库连接字符串，为连接数据库做准备： <appSettings> 　<add key="ConnString" value="server=(local);uid=sa;pwd=;persist security info=False;initial catalog= demo;Max Pool Size=1000"/> </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<string> items = new List<string>(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控件， 具体 设置代码如下： <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 　　　　　　　　TargetControlID="TextBox1" 　　　　　　　　ServicePath="WebService.asmx" 　　　　　　　　ServiceMethod="getdepalist " MinimumPrefixLength="0"> </ajaxToolkit:AutoCompleteExtender> 　　其中，ServicePath是指Web服务的文件名。ServiceMethod是指调用Web服务的函数名。MinimumPrefixLength是指输入多少个字符后开始列出输入提示列表，本案例为0，实现鼠标点击即返回所有科室名称，如图2.5所示（注：下图中AutoCompleteExtender控件的外观可在CSS文件中 控制 ，代码略）： 　　 　　图2.5　鼠标点击即返回所有科室名称 　　 3　体会 　　实际开发过程中，多次利用了上述两个控件，实现了信息的高效录入，甚至完全使用鼠标就可以完成信息录入，系统使用非常方便，并给用户带来很好的体验。 　　AJAX Control Toolki的功能十分强大，笔者只是结合实际案例，介绍了其中很小的一部分，意在抛砖引玉，期望能激发读者的兴趣，结合系统开发的实际需要，灵活使用该工具集，提高编程效率，开发出用户体验丰富、功能强大的应用程序。