Asp.Net Ajax 的两种基本开发模式引言最近花了一些时间，将微软 Asp.Net 官方的Ajax 视频全部看了一遍，地址是http:/www.asp.net/learn/ajax-videos/，视频大多都很短，8 至 15 分钟的居多，有讲述AjaxControlToolkit 中控件用法的，也有讲述Asp.Net Ajax 常见的应用场景和技巧的。本文介绍了使用 Asp.Net Ajax 做开发时两种最常见的与服务端进行交互（客户端请求服务端执行逻辑，服务端返回结果）的开发模式。第一种我姑且称为 UpdatePanel 模式，第二种称为 Web Service（WCF Service）模式。开始前的一些准备对于这些文章，我假设大家都已经安装好了Asp.Net Ajax Extension 和 Asp.Net Ajax Control ToolKit 这两个组件。其中 Asp.Net Ajax Extension已经包含在了.Net Framework 3.5 中，而 Ajax Control Toolkit 可以去这个位置下载：http:/www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=16488 。因为我使用的是 VS2008，所以 Ajax Extension 无需安装，而 Ajax Control Toolkit 我安装到了GAC（Global Assembly Cache，全局程序集缓存）中，因此文章所附代码的 Bin 目录不会包含任何的 dll 组件。如果你想运行代码，可以像我一样将 Ajax Control Toolkit 安装到 GAC 中，或者针对自己的情况（VS2005 或者 VS2008，私有程序集部署还是 GAC部署）对代码进行一些简单的修改和配置。如果你想安装到 GAC 中，假设你将AjaxControlToolkit.dll 拷贝到了“C:”下，那么可以打开“VS2008 命令提示符”，然后输入下面的命令，按回车：gacutil -i C:AjaxControlToolkit.dll除此以外，还有两点需想要说明。如果你想要在页面的 CodeBehind 中使用 AjaxControlToolkit 中定义的类型，那么需要在 Web.config 中进行一下配置，假设你和我一样采用的是 GAC 部署，那么Web.Config 的设置为：在 VS2008(VS2005)中，你可以将AjaxControlToolkit 安装到工具箱（Toolbox）中，但是在安装好以后，当你向页面拖放一个控件时，控件默认的前缀是 cc1，并且会在页面顶部自动生成一行控件的声明，类似于这样：/ 自动在页面顶部产生的声明/ 页面中控件的样式. 这样让人感觉页面很不清爽，除此以外，cc1 也没有任何的含义。为了解决这个问题，我们也可以在Web.Config 进行一下设置：如果你和我一样经过上面三个步骤的设置的话，那么在 Web 站点 Bin 目录中不会有任何的程序集，另外页面顶部也不会再有控件的声明，同时，拖放控件到页面中时，它的代码将是这样子的：. 本文以及所有 Asp.Net Ajax 相关的文章，都假设你采用了和我相同的配置。Asp.Net Ajax - UpdatePanel 模式现在考虑一个最简单的范例，页面上放置一个Label 控件、一个 Button 控件，当我们点击 Button控件的时候，将 Label 控件的文本更新为当前时间，这里的关键是更新时间的代码位于服务端，而非使用Javascript 在客户端来完成。尽管这里服务端的代码仅仅是更新一下时间，但在实际中却可以执行任何的服务端操作。UpdatePanel 是是大家熟悉的一种方式了，即是在页面拖放一个 UpdatePanel，将需要用 Ajax 方式进行更新的控件放在 UpdatePanel 之内，在本例中是Label 控件。可以将 Button 控件也放置在UpdatePanel 之内，也可以不放置。如果UpdatePanel 内不放置 Button 控件，则需要设置UpdatePanel 的 Triggers 节点，其中包括一个ControlID 属性和 EventName 属性，用于指定哪个控件的哪个事件可以触发了一个 PostBack。本例中ControlID 自然是 Button 的 ID，而 EventName 则为Click。也就是说当 Button 的 Click 事件触发时，进行 PostBack 操作。下面是 aspx 页面的主要代码：当前时间： 而在后置代码中，我们只需要像平常的 Asp.Net开发一样，编写 Button 控件的 Click 事件处理程序就可以了：protected void Button1_Click(object sender, EventArgs e) Label1.Text = DateTime.Now.ToLongTimeString();OK，现在一切都已经就绪了，如果你运行这个页面，并且点击 Button，会看到 Label 的值变为了最新的时间，而且没有因为 PostBack 所产生的页面闪动，即是人们常说的无刷新更新页面。这可能是实现一个 Asp.Net Ajax 的最简单范例了。但是它的问题是什么呢？当我们点击 Button 的时候，在服务端执行了一个完整的 Asp.Net 页面生命周期，和你不使用UpdatePanel 更新页面没有任何的区别。可以做一个测试，在页面在拖放一个 Label，ID 为 Label2，然后在 Page_Load 中写入下面代码：protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) Label2.Text = DateTime.Now.ToLongTimeString(); else Label2.Text = DateTime.Now.ToLongTimeString();然后在 Page_Load 一行设置断点，接下来运行调试，会发现每次你点击 Button 按钮的时候，都会运行 else.中的语句，说明每次页面都会执行Page_Load 方法。这说明使用这种方式时，服务器端的开销是比较大的。这里还可以发现一个有趣的现象，尽管服务器执行了为 Label2.Text 赋值的语句，但是页面上 Label2 却并没有更新。如果想要更新它，那么需要将它也放置到 UpdatePanel 中，这里我们可以在页面上重新拖放一个 UpdatePanel，然后把 Label2放置进去。然后我们再点击 Button，会发现 Label1和 Label2 都进行了更新。这里又引出了一个有趣的问题：回想一下前面，我们只为第一个 UpdatePanel设置了 Triggers 节点，而并没有为后来新添的UpdatePanel 设置 Triggers 节点，但是对一个UpdatePanel 的更新也会影响到另一个。有的时候这种情况是我们所需要的，但更多时候不是，我们可能希望对于 Label2 的更新由其他控件的其他事件触发。此时，可以将第二个 UpdatePanel 的 UpdateMode 属性设为“Conditional”，就避免了受到其他UpdatePanel 提交的影响，这个值默认为“Always”。下面是此时 Aspx 页面的代码：以上这些就是一种最常见的 Asp.Net Ajax 开发模式了，我们看到它如何实现，也看到了它的缺陷：每次客户端的操作，都会在服务端执行一次完整的页面生命周期，加重了服务器的负担，同时客户端和服务端的通信过程中也会传递完整的 http 协议内容，增大了网络流量。我们也应该看到它的优点：实现起来非常的简单，操作上基本等同于通常的 Asp.Net 开发，所使用的控件也为 Asp.Net 服务器控件（Server Control，这里相对于 HTML 控件而言）。Asp.Net Ajax - Web Service 模式还有一种方式就是 Web Service 模式了，客户端不再提交页面，而只是发送 Web Service 请求，并对收到应答进行处理。由于这里采用了异步方式，所以客户端在发送 WebService 请求之后无需等待。采用这种方式服务端不会执行生命周期，往返的数据量也减到了最小。但缺点就是需要手动编写一些代码。我们来一步步看下如何完成，因为 WCF 是下一代Windows 平台通信的基础，集成了 Web Service 和Remoting 这两大技术，所以我们采用 WCF 来创建服务。首先选择“添加新项”，然后选择“启用了AJAX 的 WCF 服务”，输入名称 SimpleService，这样会在站点中添加一个 SimpleService.svc 文件，在App_Code 中创建一个 SimpleService.cs，还会在Web.Config 中添加相关的配置。我们只需要改动一下App_Code 中的 SimpleService.cs 下的代码：public class SimpleServiceOperationContract public string GetCurrentDate(string clientValue) string rtn = Server Time : + DateTime.Now.ToLongTimeString() + ;rtn += Client Value(round trip): + clientValue;return rtn;SimpleService 还用一些特性修饰了，我将它取消掉了以节省空间。方法接受一个字符串clientValue，然后获取服务器时间，最后返回clientValue。这段代码看上去没有什么特别之处，但是注意到我在 Client Value 旁加了一个括号，写着“round trip”，对于 Ajax 程序来说，这个值由客户端发送，最后再返还给客户端，进行了一趟由客户端到服务端，再到客户端的周游。为了要让 javascript 可以调用这个 Web 服务，我们需要在 aspx 页面中对它进行注册，拖放也一个ScriptManager 到页面上，然后向下面这样进行设置：接下来我们新建一个 Pattern2.aspx 页面，在上面拖放三个 HTML 标记。一个 span，一个input(Button)，一个 input(Text)。注意，是客户端HTML 标记，不含有 runat=server的，从这里已经可以看到一个很大的不同，我们使用的是客户端 HTML控件。接着在 input(Button)上双击，会自动生成Javascript 脚本，此时 aspx 页面的主要代码如下：未设置最关键是接下来要编写的 javascript 代码，我先将它贴出来，然后再进行解释：function Button1_onclick() var context = Callback Values; / 传给回调函数var clientValue = $get(txtSample).value; / 获得TextBox 的值SimpleService.GetCurrentDate(clientValue, OnComplete, OnFailed, context); return true;function OnComplete(args, context)alert(context);var span = $get(spnTime);span.innerHTML