在 ASP.NET 网页中不经过回发而实现客户端回调

时间：2021-05-17 20:20:22

一、使用回调函数的好处

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

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

二、客户端回调组件

创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似，但也有如下这些区别。页的服务器代码必须：

  • 实现 ICallbackEventHandler 接口。可以向任何 ASP.NET 网页添加此接口声明。

  • 提供 RaiseCallbackEvent 方法的实现。此方法将被调用以对服务器执行回调。

  • 提供 GetCallbackResult 方法的实现。此方法会将回调结果返回给客户端。

此外，该页还必须包含执行以下操作的三个客户端脚本函数：

  • 一个函数调用帮助器方法，该方法执行对服务器的实际请求。在此函数中，可以首先执行自定义逻辑以准备事件参数，然后可以将一个字符串作为参数发送到服务器端回调事件处理程序。

  • 另一个函数由处理回调事件的服务器代码的结果调用并接收该结果，同时接受表示该结果的字符串。该函数称为客户端回调函数。

  • 第三个函数是执行对服务器的实际请求的 Helper 函数，当在服务器代码中使用 GetCallbackEventReference 方法生成对此函数的引用时，由 ASP.NET 自动生成该函数。

客户端回调及回发都是对起始页的请求，因此在 Web 服务器日志中将客户端回调及回发记录为页请求。

三、回调的过程如下所示：

1）客户端发出请求，请求内容包括：指定更新控件和传递参数。

2）服务端响应、处理。

3）服务端将处理后的内容以字符串返回。

4）客户端使用一个函数接受返回值

5）客户端更新指定控件。

四、实例

01：

<!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 Success(args,context){ 
message.innerHTML=args; 
} 
  
//下面的方式是当接收服务器方法处理的结果发生异常时调用的方法 
function Error(){ 
message.innerHTML="发生了异常!"; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
用户名:<input type="text" id="txtUserName" onblur="CallServerMethod(txtUserName.value,null)" /> 
<span id="message"></span> 
<br /> 
密码:<input type="password" size="10" maxlength="20" id="txtPwd" /> 
</div> 
</form> 
</body> 
</html>
[code]
public partial class Default3 : System.Web.UI.Page,ICallbackEventHandler //实现ICallbackEventHandler接口 
{ 
  
String result = String.Empty; 
  
protected void Page_Load(object sender, EventArgs e) 
{ 
//获取当前页的ClientScriptManager的引用 
ClientScriptManager csm = Page.ClientScript; 
/*获取回调的引用.会在客户端生成WebForm_DoCallback方法, 
* 调用它来达到异步调用.这个方法是微软写的方法,会被发送 
到客户端*/ 
/*注意这里的"Success"和Error两个字符串分别是客户端代码中 
*定义的两个javascript函数*/ 
//下面的方法最后一个参数的意义:true表示执行异步回调,false标志执行同步回调 
String reference = csm.GetCallbackEventReference(this, "args", "Success", "", "Error", true); 
String callbackScript = "function CallServerMethod(args,context){\n"+ 
reference+";\n }"; 
//向当前页面注册javascript脚本代码 
csm.RegisterClientScriptBlock(this.GetType(), "CallServerMethod",callbackScript,true); 
} 
  
#region ICallbackEventHandler 成员 
  
/// <summary> 
/// 返回回调方法执行结果的方法 
/// </summary> 
public string GetCallbackResult() 
{ 
return result; 
} 
  
/// <summary> 
/// 在服务器端运行回调方法 
/// </summary> 
public void RaiseCallbackEvent(string eventArgument) 
{ 
if (eventArgument.ToLower().IndexOf("admin")!=-1) 
{ 
result =eventArgument+ "不能作为用户注册."; 
} 
else 
{ 
result = eventArgument + "可以注册."; 
} 
} 
  
#endregion 
}
 
02：
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
  
<!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 DoSearch(){ 
var firstName=document.getElementById("TextBox1").value; 
CallServer(firstName,""); 
} 
  
//得到服务器的数据 
function ReceiveServerData(txtUserInfo){ 
Results.innerHTML=txtUserInfo; 
} 
  
//设置每1秒执行一次 
setInterval("DoSearch()",1000); 
</script> 
  
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
姓名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<br /> 
<span id="Results" style=" width:500px;"></span> 
</div> 
</form> 
</body> 
</html>
[/code]
.aspx.cs
[code]
using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Data.SqlClient; 
  
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler 
{ 
protected string txtUserInfo; 
  
  
protected void Page_Load(object sender, EventArgs e) 
{ 
//获取一个对客户端函数的引用 
string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context"); 
//动态注册回调函数 
string callbackScript = "function CallServer(arg,context)" + "{" + cbReference + "};"; 
//引发callbackScript 
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallServer", callbackScript, true); 
} 
  
//引发Callback事件处理 
public void RaiseCallbackEvent(string txtFirstName) 
{ 
if (txtFirstName != null) 
{ 
String connString = System.Configuration.ConfigurationManager.ConnectionStrings["sqlserver2008"].ToString(); 
  
SqlConnection conn = new SqlConnection(connString); 
  
conn.Open(); 
  
SqlCommand comm = new SqlCommand("select * from zzx where [name]=@name", conn); 
  
comm.Parameters.Add("@name", SqlDbType.VarChar).Value = txtFirstName; 
  
SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection); 
if (reader.Read()) 
{ 
txtUserInfo = "员工编号:" + reader["id"].ToString() + "<br>"; 
txtUserInfo += "员工姓名:" + reader["name"].ToString() + "<br>"; 
txtUserInfo += "地址:" + reader["address"].ToString() + "<br>"; 
txtUserInfo += "服务器查询时间:" + DateTime.Now.ToString(); 
} 
else 
{ 
if (string.IsNullOrEmpty(txtFirstName)) 
{ 
txtUserInfo = "请输入姓名"; 
} 
else 
{ 
txtUserInfo = "查无此人"; 
} 
} 
  
comm.Dispose(); 
reader.Dispose(); 
conn.Dispose(); 
} 
} 
  
//得到回调的结果,返回给客户端 
public string GetCallbackResult() 
{ 
return txtUserInfo; 
} 
  
}
 
03：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
  
<!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 OnCallBack(txtUserInfo,context){ 
Results.innerHTML=txtUserInfo; 
} 
</script> 
  
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
姓名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
<input id="Button2" type="button" value="button" 
onclick="<%=Page.ClientScript.GetCallbackEventReference(this, "document.getElementById('TextBox1').value", "OnCallBack",null)%>" /> 
<br /> 
<span id="Results" style="pink; width: 500;"></span> 
</div> 
</form> 
</body> 
</html>
.aspx.cs
  
using System; 
using System.Collections; 
using System.Configuration; 
using System.Data; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Data.SqlClient; 
using System.Text; 
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler 
{ 
protected StringBuilder txtUserInfo; 
  
protected void Page_Load(object sender, EventArgs e) 
{ 
  
} 
  
public string GetCallbackResult() 
{ 
return txtUserInfo.ToString(); 
} 
  
public void RaiseCallbackEvent(string txtFirstName) 
{ 
txtUserInfo = new StringBuilder(); 
String connString = ConfigurationManager.ConnectionStrings["sqlserver2008"].ToString(); 
SqlConnection conn = new SqlConnection(connString); 
conn.Open(); 
SqlCommand comm = new SqlCommand("select * from zzx where [name]=@name", conn); 
comm.Parameters.Add("@name", SqlDbType.VarChar).Value = txtFirstName; 
SqlDataReader reader = comm.ExecuteReader(CommandBehavior.CloseConnection); 
if (reader.Read()) 
{ 
txtUserInfo.Append("员工编号:" + reader["id"].ToString() + "<br>"); 
txtUserInfo.Append("员工姓名:" + reader["name"].ToString() + "<br>"); 
txtUserInfo.Append("地址:" + reader["address"].ToString() + "<br>"); 
txtUserInfo.Append("查询时间:" + DateTime.Now.ToString()); 
} 
else 
{ 
if (txtFirstName == string.Empty) 
{ 
txtUserInfo.Append("请输入姓名"); 
} 
else 
{ 
txtUserInfo.Append("查无此人"); 
} 
reader.Dispose(); 
comm.Dispose(); 
conn.Dispose(); 
}
} 
}
 
 
 

相关文章