在 ASP.NET 网页的默认模型中,单击按钮或执行导致回发的一些其他操作。此时将重新创建页及其控件,并在服务器上运行页代码,然后返回给浏览器,并呈现出来。但是,在有些情况下,需要从客户端运行服务器代码,而不执行回发。如果页中的客户端脚本维护一些状态信息(例如,局部变量值),那么发送页和获取页的新副本就会损坏该状态。此外,页回发会导致处理开销,这会降低性能,且会让用户不得不等待处理并重新创建页。
若要避免丢失客户端状态并且不导致服务器往返的处理开销,可以对 ASP.NET 网页编码,使其能执行客户端回调。在客户端回调中,客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员,然后调用特别标记的方法。该方法执行代码中编写的处理过程,然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中,该页一直驻留在浏览器中。
客户端回调组件
创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似,但也有如下这些区别。页的服务器代码必须:
-
实现 ICallbackEventHandler 接口。可以向任何 ASP.NET 网页添加此接口声明。
-
提供 RaiseCallbackEvent 方法的实现。此方法将被调用以对服务器执行回调。
-
提供 GetCallbackResult 方法的实现。此方法会将回调结果返回给客户端。
此外,该页还必须包含执行以下操作的三个客户端脚本函数:
-
一个函数调用帮助器方法,该方法执行对服务器的实际请求。在此函数中,可以首先执行自定义逻辑以准备事件参数,然后可以将一个字符串作为参数发送到服务器端回调事件处理程序。
-
另一个函数由处理回调事件的服务器代码的结果调用并接收该结果,同时接受表示该结果的字符串。该函数称为客户端回调函数。
-
第三个函数是执行对服务器的实际请求的 Helper 函数,当在服务器代码中使用 GetCallbackEventReference 方法生成对此函数的引用时,由 ASP.NET 自动生成该函数。
GetCallBackEventReferenceTest.aspx.cs:
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();
}
}
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 >