利用ASP.NET实现无刷新更新页面 (1)

在ASP.NET开发过程中我们会遇到这类情况：为了获取服务器端状态而在提交整个页面，造成了很大的浪费。我们知道现在流行的AJAX框架能够实现局部页面更新，避免整个页面刷新。其实ASP.NET也提供了类似的解决方案。

在 ASP.NET 网页的默认模型中，用户会与页交互，单击按钮或执行导致回发的一些其他操作。此时将重新创建页及其控件，并在服务器上运行页代码，且新版本的页被呈现到浏览器。但是，在有些情况下，需要从客户端运行服务器代码，而不执行回发。如果页中的客户端脚本维护一些状态信息（例如，局部变量值），那么发送页和获取页的新副本就会损坏该状态。此外，页回发会导致处理开销，这会降低性能，且会让用户不得不等待处理并重新创建页。

若要避免丢失客户端状态并且不导致服务器往返的处理开销，可以对 ASP.NET 网页编码，使其能执行客户端回调。在客户端回调中，客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员，然后调用特别标记的方法。该方法执行代码中编写的处理过程，然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中，该页一直驻留在浏览器中。

下面给出的是一个简单的例子：
点击button控件，在文本框内显示服务器端时间。如下图所示：

相关页面代码如下：

<div>
2

<input type="text" id="txtTime" runat="server" readonly="readonly" />
3

<input type="button" id="btnGetTime" value="Get" runat="server" />
4

</div>

创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似，但也有如下这些区别。页的服务器代码必须实现ICallbackEventHandler接口。该接口需要RaiseCallbackEvent方法和GetCallbackResult方法。
1. RaiseCallbackEvent方法处理该事件
2. GetCallbackResult方法返回回调的结果

具体代码如下：

1 protected void Page_Load(object sender, EventArgs e)
2     {
3         txtTime.Value = DateTime.Now.ToString();
4
5         string callBackRef = ClientScript.GetCallbackEventReference(this, string.Empty, "getTime", string.Empty);
6         btnGetTime.Attributes["onclick"] = callBackRef;
7     }
8
9     public string GetCallbackResult()
10     {
11         return DateTime.Now.ToString();
12     }
13
14     public void RaiseCallbackEvent(string eventArgument)
15     {
16         //
17      }

另外，我们还需要实现客户端回调javascript函数代码，用来处理响应结果，实现局部页面更新。代码如下：

1 function getTime() {
2 document.getElementById("txtTime").value = arguments[0];
3 }
4

秒客网

利用ASP.NET实现无刷新更新页面 (1)

相关文章