基于ScriptUserControl开发Ajax Client Control

来源：互联网发布：linux tcpip协议栈编辑：程序博客网时间：2024/06/04 01:21

大家都可能使用过AjaxControlToolkit组件包。AjaxControlToolkit中组件都是基于Microsoft Ajax Library实现，遵循Microsoft Ajax Library的编程模式，可以方便为我们的asp.net服务器端组件添加客户端行为（Extender）。也是学习和使用Microsoft Ajax Library较好的示例程序。其中有个ScriptUserControl类，我们可以从该类继承自己的组件实现Ajax控件。使用ScriptUserControl有以下优点：

ScriptUserControl继承自UserControl，因此我们可以利用UserControl的所有特性，可视化设计Web组件。
充分利用WebForm框架来生成Html页面。
简单的标记方式就可以实现服务端组件和客户端组件关联，不用再实现IScriptControl接口（ScriptUserControl实现了该接口）。
可方便的为组件实现ajax特性。
组件试设计，可维护性好。

下面我用一个简单的例子说明基于ScriptUserControl开发一个Ajax Client Control的基本方法。

系统要求

Visual Studio 2008 SP1
AjaxControlToolkit 3.0.30512 或更高版本. (关于如何配置AjaxControlToolkit可参阅http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-47-cs.aspx)

准备工作

新建基于.Net Framework3.5的ASP.NET WebApplication项目，项目名称输入SUCDemo.
打开Default.aspx页面，从工具栏上拖一个ToolkitScriptManager(AjaxControlToolkit的脚本管理控件)到页面的form标签内.
此时Visual Studio会自动为我们加入AjaxControlToolkit.dll的引用.
打开web.config文件，找到<system.web><pages><controls>节点，增加对AjaxControlToolkit组件包中控件的前缀.添加后代码如下所示：
<pages> <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit, Version=3.0.30512.17815, Culture=neutral, PublicKeyToken=28F01B0E84B6D53E"/> </controls> </pages>
回到Default.aspx页面，修改页面对AjaxControlToolkit的引用部分TagPrefix属性改为ajaxToolkit.
修改ToolkitScriptManager1的前缀.如下所示：
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajaxToolkit:ToolkitScriptManager>

服务器端实现

在项目上点击右键-->Add-->AddNew Item...弹出AddNew Item 对话框.
选择Web User Control，在名称处输入 AjaxUserControl.ascx，点击 Add 按钮.
AjaxUserControl控件上放一个Lable，放一个Button控件.代码如下所示：
<asp:Label ID="lblDateTime" runat="server" Text="2010-03-29" Width="136px"></asp:Label><br/><br/><asp:Button ID="btnGetTime" runat="server" Text="Get Time" />
点击右键选择“View Code”转到AjaxUserControl.ascx.cs文件，修改基类为ScriptUserControl，删除Page_load方法，增加默认构造函数.
public partial class AjaxUserControl : AjaxControlToolkit.ScriptUserControl//System.Web.UI.UserControl { public AjaxUserControl() : base(HtmlTextWriterTag.Div) { } }
增加服务器端属性，用于异步更新时改变Lable的样式，实现动画效果.
namespace SUCDemo{ public partial class AjaxUserControl : AjaxControlToolkit.ScriptUserControl//System.Web.UI.UserControl { public AjaxUserControl() : base(HtmlTextWriterTag.Div) { } //根据此标记和产生$create时传递服务器端属性值 [AjaxControlToolkit.ExtenderControlProperty()] //必须设置此属性 [AjaxControlToolkit.RequiredProperty()] public string DefaultCssClass { get; set; } [AjaxControlToolkit.ExtenderControlProperty()] [AjaxControlToolkit.RequiredProperty()] public string UpdatingCssClass { get; set; } }}

Web Service实现

在项目上点击右键Add-->Add New Item...，选择Web Service,名称输入DateTimeService.asmx，点击"Add"按钮.
修改DateTimeService.asmx.cs文件，启用[System.Web.Script.Services.ScriptService]特性，添加GetDateTime方法。代码如下所示：
namespace SUCDemo{ /// <summary> /// Summary description for DateTimeService /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class DateTimeService : System.Web.Services.WebService { [WebMethod] public string GetDateTime() { return DateTime.Now.ToString(); } }}

客户端实现

在项目上点击右键Add-->Add New Item...，在弹出对话框中选择Ajax Client Control，文件名为AjaxUserControl.js点击Add按钮.Visual Studio为我们生成基本的Client Control的js代码.
我们修改AjaxUserControl.js文件，当点击btnGetTime按钮时调用DateTimeService的GetDateTime方法获取服务器时间，并显示在lblDateTime标签上.代码如下：
/// <reference name="MicrosoftAjax.js"/>/// <reference path="DateTimeService.asmx" />Type.registerNamespace("SUCDemo");SUCDemo.AjaxUserControl = function(element) { SUCDemo.AjaxUserControl.initializeBase(this, [element]); this._label = null; this._onsuccess$delegate = null; this._onerror$delegate = null; this._onclick$delegate = null; this._updatingCssClass = null; this._defaultCssClass = null;}SUCDemo.AjaxUserControl.prototype = { initialize: function() { SUCDemo.AjaxUserControl.callBaseMethod(this, 'initialize'); // Add custom initialization here this._onsuccess$delegate = Function.createDelegate(this, this._onsuccess); this._onerror$delegate = Function.createDelegate(this, this._onerror); this._onclick$delegate = Function.createDelegate(this, this._onclick); //注册事件 var btn = $get(this.get_id() + "_btnGetTime"); if (btn) { $addHandler(btn, 'click', this._onclick$delegate); } this._label = $get(this.get_id() + "_lblDateTime"); }, dispose: function() { //Add custom dispose actions here var btn = $get(this.get_id() + "_btnGetTime"); if (btn) { $removeHandler(btn, 'click', this._onclick$delegate); } SUCDemo.AjaxUserControl.callBaseMethod(this, 'dispose'); }, //与服务器端UpdatingCssClass对应 get_updatingCssClass: function() { return this._updatingCssClass; }, set_updatingCssClass: function(value) { this._updatingCssClass = value; }, //与服务器端DefaultCssClass对应 get_defaultCssClass: function() { return this._defaultCssClass; }, set_defaultCssClass: function(value) { this._defaultCssClass = value; }, _onclick: function(e) { //设置风格 this._label.className = this.get_updatingCssClass(); //开始异步更新 SUCDemo.DateTimeService.GetDateTime(this._onsuccess$delegate, this._onerror$delegate); return false; }, _onsuccess: function(result, userContext, methodName) { this._label.innerText = result; this._label.className = this.get_defaultCssClass(); }, _onerror: function(error, userContext, methodName) { //var error = new Sys.Net.WebServiceError(); this._label.className = this.get_defaultCssClass(); if (error.get_timedOut()) { alert("通信超时"); } else { //显示错误信息 alert(error.get_message()); } }}SUCDemo.AjaxUserControl.registerClass('SUCDemo.AjaxUserControl', Sys.UI.Control);if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

服务器端控件和客户端控件关联

我们可以用AjaxControlToolkit的ClientScriptResourceAttribute类，只需在服务器端控件上标记就可以实现服务器端控件和客户端控件的关联。实现方法如下：

在AjaxUserControl.ascx.cs文件的using语句下面添加WebResource标记.
[assembly:WebResource("SUCDemo.AjaxUserControl.js","text/javascript")]
在AjaxUserControl上添加ClientScriptResource标记.
至此基本完成了AjaxUserControl服务器端代码实现，下面是完整代码：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;[assembly:WebResource("SUCDemo.AjaxUserControl.js","text/javascript")]namespace SUCDemo{ [AjaxControlToolkit.ClientScriptResource("SUCDemo.AjaxUserControl", "SUCDemo.AjaxUserControl.js")] public partial class AjaxUserControl : AjaxControlToolkit.ScriptUserControl//System.Web.UI.UserControl { public AjaxUserControl() : base(HtmlTextWriterTag.Div) { } //根据此标记和产生$create时传递服务器端属性值 [AjaxControlToolkit.ExtenderControlProperty()] //必须设置此属性 [AjaxControlToolkit.RequiredProperty()] public string DefaultCssClass { get; set; } [AjaxControlToolkit.ExtenderControlProperty()] [AjaxControlToolkit.RequiredProperty()] public string UpdatingCssClass { get; set; } }}
最后我们需要修改AjaxUserControl.js的编译选项，将js文件做为资源编译到程序集中(其原因可以参考IScriptControl，ScriptUserControl的相关文档或者代码).在Solution窗体中选择AjaxUserControl.js，在属性框的Buid Action项选择Embedded Resource，如下图所示：

使用

使用方法与UserControl或者标准的ASP.NET组件没什么区别。

在使用页面上添加引用.
<%@ Register Src="~/AjaxUserControl.ascx" TagName="AjaxUserControl" TagPrefix="ctrl" %>
在使用位置上添加标签.
<ctrl:AjaxUserControl ID="AjaxUserControl1" runat="server" DefaultCssClass="default" UpdatingCssClass="updating" />

到此我们完成了一个简单的AjaxUserControl的开发，运行程序，在页面上点击右键-->查看源代码，用文本编辑器打开源文件，到文件最下面我们可以看到如下代码：
<mce:script type="text/javascript"></mce:script>

已经为我们创建好了SUCDemo.AjaxUserControl客户端组件，使用时不需要其他任何操作或者编写js脚本，就像使用服务器控件一样，是不是很方便:).

注：本文使用的例子是基于Asp.net WebApplication的，在ASP.NET WebSite项目中不会生成程序集，因此也无法将js脚本编译到程序集了。在WebSite项目中ScriptUserControl的服务器端略有不同：

脚本封送不再用标记，而是在构造器中设置ScriptPath属性.
重写ClientControlType，返回客户端类型.

WebSite项目中的AjaxUserControl服务器端代码：
//无法再使用ClientScriptResource //[AjaxControlToolkit.ClientScriptResource("SUCDemo.AjaxUserControl", "SUCDemo.AjaxUserControl.js")] public partial class AjaxUserControl : AjaxControlToolkit.ScriptUserControl//System.Web.UI.UserControl { public AjaxUserControl() : base(HtmlTextWriterTag.Div) { this.ScriptPath = "~/AjaxUserControl.js";//告诉客户端脚本文件 } protected override string ClientControlType { get { return "SUCDemo.AjaxUserControl";//返回对应客户端类型 //return base.ClientControlType; } } //根据此标记和产生$create时传递服务器端属性值 [AjaxControlToolkit.ExtenderControlProperty()] //必须设置此属性 [AjaxControlToolkit.RequiredProperty()] public string DefaultCssClass { get; set; } [AjaxControlToolkit.ExtenderControlProperty()] [AjaxControlToolkit.RequiredProperty()] public string UpdatingCssClass { get; set; } }

小结

综上文所述使用ScriptUserControl开发Ajax控件的确有很多优点，我们可以在客户端自由控制数据、展现、服务器端交互（可利用jquery等js库），实现高效的Web应用程序，提高应用程序用户体验。当然网上也有很多模块化开发模式，我们可以根据项目情况、功能或者业务需求来选择采用不同的技术来满足客户需求。