体验ASP.NET 2.0客户端回调功能(CallBack)
ASP.NET 2.0包含一个新的客户端回调功能,可以提取页面值,并把它们填充到已生成的页面上,而无须重新生成页面。所有不需要绘制全部页面。终端客户不会看到页面闪烁和重定位,页面流更类似于胖客户应用程序的流。
一个完整的回调包含以下几个过程:
1.客户端发出回调请求;
2.服务器端接收客户端回调请求;
3.服务器端处理请求并回发请求给客户端;
4.客户端接收服务器的返回结果并更新HTML。
一、服务器端代码:
处理回调的Web页面的Page类需实现System.Web.UI.ICallBackEventHandler接口。该接口要求实现两个方法:RaiseCallbackEvent和GetCallbackResult。这两个方法都处理客户端脚本的请求。
1.RaiseCallbackEvent方法:该方法含一个string类型的传入参数,可用于接收客户端脚本的回调参数
2.GetCallbackResult方法:该方法返回一个string类型(只能是string类型)的数据给客户端脚本
除了实现ICallBackEventHandler接口外,处理回调页面的Page类还需负责客户端回调脚本的管理:指明哪个JS函数发送回调请求、哪个JS函数接收回调数据。
二、客户端代码:客户端脚本则比较简单了,只需要实现接收回调结果的JS方法(这里是ReceiveDataFromServer)就OK了。
三、练手代码:用回调或去服务器端的时间(12和24小时制)
Default.aspx.cs:
Default.aspx:
注意:这里描述的回调功能使用了XmlHTTP,所以客户浏览器必须支持XmlHTTP(IE和FireFox支持这个功能)。
源码下载
一个完整的回调包含以下几个过程:
1.客户端发出回调请求;
2.服务器端接收客户端回调请求;
3.服务器端处理请求并回发请求给客户端;
4.客户端接收服务器的返回结果并更新HTML。
一、服务器端代码:
处理回调的Web页面的Page类需实现System.Web.UI.ICallBackEventHandler接口。该接口要求实现两个方法:RaiseCallbackEvent和GetCallbackResult。这两个方法都处理客户端脚本的请求。
1.RaiseCallbackEvent方法:该方法含一个string类型的传入参数,可用于接收客户端脚本的回调参数
public void RaiseCallbackEvent(string eventArgument)
{
// some code here
}
{
// some code here
}
2.GetCallbackResult方法:该方法返回一个string类型(只能是string类型)的数据给客户端脚本
public string GetCallbackResult()
{
// some code here
return "";
}
{
// some code here
return "";
}
除了实现ICallBackEventHandler接口外,处理回调页面的Page类还需负责客户端回调脚本的管理:指明哪个JS函数发送回调请求、哪个JS函数接收回调数据。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strRefrence = string.Empty;
strRefrence = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context"); // 这里ReceiveDataFromServer为客户端接收回调结果的JS方法,含一个传入参数
string strCallBack = string.Empty;
strCallBack = "function CallBackToTheServer(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true); // CallBackToTheServer,JS方法,发出回调请求
}
}
{
if (!IsPostBack)
{
string strRefrence = string.Empty;
strRefrence = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context"); // 这里ReceiveDataFromServer为客户端接收回调结果的JS方法,含一个传入参数
string strCallBack = string.Empty;
strCallBack = "function CallBackToTheServer(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true); // CallBackToTheServer,JS方法,发出回调请求
}
}
二、客户端代码:客户端脚本则比较简单了,只需要实现接收回调结果的JS方法(这里是ReceiveDataFromServer)就OK了。
function ReceiveDataFromServer(valueReturnFromServer)
{
document.getElementById(elementId).innerHTML = valueReturnFromServer;
}
{
document.getElementById(elementId).innerHTML = valueReturnFromServer;
}
三、练手代码:用回调或去服务器端的时间(12和24小时制)
Default.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;
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strRefrence = string.Empty;
strRefrence = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context");
string strCallBack = string.Empty;
strCallBack = "function CallBackToTheServer(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true);
}
}
#region ICallbackEventHandler Members
private string strTimeFormat;
public string GetCallbackResult()
{
if (strTimeFormat != "" && strTimeFormat == "12")
{
return DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss(12小时制)");
}
else
{
return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss(24小时制)");
}
}
public void RaiseCallbackEvent(string eventArgument)
{
strTimeFormat = eventArgument;
}
#endregion
}
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;
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strRefrence = string.Empty;
strRefrence = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context");
string strCallBack = string.Empty;
strCallBack = "function CallBackToTheServer(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true);
}
}
#region ICallbackEventHandler Members
private string strTimeFormat;
public string GetCallbackResult()
{
if (strTimeFormat != "" && strTimeFormat == "12")
{
return DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss(12小时制)");
}
else
{
return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss(24小时制)");
}
}
public void RaiseCallbackEvent(string eventArgument)
{
strTimeFormat = eventArgument;
}
#endregion
}
Default.aspx:
<%@ 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>CallBack</title>
<script language="javascript" type="text/javascript">
function ReceiveDataFromServer(valueReturnFromServer)
{
document.getElementById("ServerTime").innerHTML = valueReturnFromServer;
}
function GetServerTime(format)
{
CallBackToTheServer(format, "");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow12" runat="server" Text="获取服务器时间(12小时制)" OnClientClick="javascript:GetServerTime(12);return false;" /><br />
<asp:Button ID="btnShow24" runat="server" Text="获取服务器时间(24小时制)" OnClientClick="javascript:GetServerTime(24);return false;" /><br />
<br />
<span id="ServerTime"><%= DateTime.Now.ToString("yyyy-MM-dd HHHH:mm:ss") %></span> </div>
</form>
</body>
</html>
<!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>CallBack</title>
<script language="javascript" type="text/javascript">
function ReceiveDataFromServer(valueReturnFromServer)
{
document.getElementById("ServerTime").innerHTML = valueReturnFromServer;
}
function GetServerTime(format)
{
CallBackToTheServer(format, "");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow12" runat="server" Text="获取服务器时间(12小时制)" OnClientClick="javascript:GetServerTime(12);return false;" /><br />
<asp:Button ID="btnShow24" runat="server" Text="获取服务器时间(24小时制)" OnClientClick="javascript:GetServerTime(24);return false;" /><br />
<br />
<span id="ServerTime"><%= DateTime.Now.ToString("yyyy-MM-dd HHHH:mm:ss") %></span> </div>
</form>
</body>
</html>
注意:这里描述的回调功能使用了XmlHTTP,所以客户浏览器必须支持XmlHTTP(IE和FireFox支持这个功能)。
源码下载