在 ASP.NET 网页的默认模型中,单击按钮或执行导致回发的一些其他操作。此时将重新创建页及其控件,并在服务器上运行页代码,然后返回给浏览器,并呈现出来。但是,在有些情况下,需要从客户端运行服务器代码,而不执行回发。如果页中的客户端脚本维护一些状态信息(例如,局部变量值),那么发送页和获取页的新副本就会损坏该状态。此外,页回发会导致处理开销,这会降低性能,且会让用户不得不等待处理并重新创建页。
若要避免丢失客户端状态并且不导致服务器往返的处理开销,可以对 ASP.NET 网页编码,使其能执行客户端回调。在客户端回调中,客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员,然后调用特别标记的方法。该方法执行代码中编写的处理过程,然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中,该页一直驻留在浏览器中。
客户端回调组件
创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似,但也有如下这些区别。页的服务器代码必须:
实现 ICallbackEventHandler 接口。可以向任何 ASP.NET 网页添加此接口声明。
提供 RaiseCallbackEvent 方法的实现。此方法将被调用以对服务器执行回调。
提供 GetCallbackResult 方法的实现。此方法会将回调结果返回给客户端。
此外,该页还必须包含执行以下操作的三个客户端脚本函数:
一个函数调用帮助器方法,该方法执行对服务器的实际请求。在此函数中,可以首先执行自定义逻辑以准备事件参数,然后可以将一个字符串作为参数发送到服务器端回调事件处理程序。
另一个函数由处理回调事件的服务器代码的结果调用并接收该结果,同时接受表示该结果的字符串。该函数称为客户端回调函数。
第三个函数是执行对服务器的实际请求的 Helper 函数,当在服务器代码中使用 GetCallbackEventReference 方法生成对此函数的引用时,由 ASP.NET 自动生成该函数。
GetCallBackEventReferenceTest.aspx.cs:
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Web.UI.HtmlControls;
using
System.Text;
public
partial
class
MiniSample_GetCallbackEventReferenceTest : System.Web.UI.Page,ICallbackEventHandler
{ public double cbCount = 0 ; protected void Page_Load( object sender, EventArgs e) { ClientScriptManager cs = Page.ClientScript; // 获取一个对客户端函数的引用;调用该函数时,将启动一个对服务器端事件的客户端回调。通过调用页的 GetCallbackEventReference 方法可以获取对库函数的引用,该方法可通过页 ClientScript 属性进行访问。然后动态生成一个客户端函数,该函数包含对来自 GetCallbackEventReference 方法的返回值的调用。 // ClientScriptManager.GetCallbackEventReference 方法的使用请查看。 http://msdn2.microsoft.com/zh-cn/library/system.web.ui.clientscriptmanager.getcallbackeventreference (VS.80).aspx // arg+'|'+context是传递给服务端的函数,由于要传入多参数,故用|连接起来, ReceiveServerData是一个客户端方法接受服务端返回的值,GetBoxValueAndSum是在调用服务端方法之前所调用的客户端方法,ProcessCallBackError当服务端函数出错时,执行这客服端方法。 String cbReference = cs.GetCallbackEventReference( this , " arg+'|'+context " , " ReceiveServerData " , " GetBoxValueAndSum " , " ProcessCallBackError " , false ); // CallTheServer此客户端函数作用是用来调用服务器端方法 String callbackScript = " function CallTheServer(arg, context) { " + cbReference + " ; } " ; // 注册脚本块,以客户端方法调用服务器端方法 cs.RegisterClientScriptBlock( this .GetType(), " CallTheServer " ,callbackScript, true ); } // 回调服务器端处理函数 public void RaiseCallbackEvent(String eventArgument) { string [] data = eventArgument.Split( ' | ' ); // “|”分割 // 判断运算符 switch (data[ 2 ]) { case " + " : cbCount = Convert.ToDouble(data[ 0 ]) + Convert.ToDouble(data[ 1 ]); break ; case " - " : cbCount = Convert.ToDouble(data[ 0 ]) - Convert.ToDouble(data[ 1 ]); break ; default : break ; } } // 回调结果,返回给客户端 public string GetCallbackResult() { return cbCount.ToString(); } }
GetCallbackEventReferenceTest.aspx:
<%
@ Page Language = " C# " AutoEventWireup = " true " CodeFile= " GetCallbackEventReferenceTest.aspx.cs " Inherits= " MiniSample_GetCallbackEventReferenceTest "
%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
runat
="server"
>
<
title
>
无标题页
</
title
>
<
script
type
="text/javascript"
>
function ProcessCallBackError(arg, context) { Message2.innerText = ' 错误: ' + arg; // 服务器端出错时,显示错误信息 } // 调用服务器端方法之前处理一些请求 function GetBoxValueAndSum(mth) { GetMethod(mth); var value1 = document.getElementById( " Num1 " ).value; var value2 = document.getElementById( " Num2 " ).value; var value = value1 + " | " + value2; CallTheServer2(value,mth); // 客户端调用服务端方法 } function ReceiveServerData2(arg, context) { Message1.innerText = arg; // 接受回调函数返回的值 } function GetMethod(mt) { document.getElementById( " Method " ).innerText = mt; }
</
script
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
id
="txtNum"
>
<
input
id
="Num1"
type
="text"
/><
span
id
="Method"
></
span
>
<
input
id
="Num2"
type
="text"
/>
=
<
span
id
="Message1"
>
0
</
span
>
<
br
/>
<
input
type
="button"
value
="客户端回调1(加法)"
onclick
="GetBoxValueAndSum('+')"
/>
<
input
type
="button"
value
="客户端回调2(减法)"
onclick
="GetBoxValueAndSum('-')"
/>
<
br
/>
<
asp:Label
id
="MyLabel"
runat
="server"
></
asp:Label
><
br
/>
<
span
id
="Message2"
></
span
>
</
div
>
</
form
>
</
body
>
</
html
>