服务器端控件的局部刷新,CallBack
(2007-01-13 13:46:37)
分类: 技术资料 |
发现了.net2.0原来有套CallBack机制,可以轻松实现服务器控件类似AJAX的效果(实现局部刷新),不过真的是服务器端控件用AJAX的话,效果确乎是没ASP.NET AJAX 好
Callback与asp.net ajax的UpdatePanel控件内在实现机制都是Ajax
但采用UpdatePanel控件的页面仍然采用Postback方式与服务器交互,会更新ViewState
Callback采用xmlhttp(GET方式)或是iframe,这个过程根本没有涉及到页面的 ViewState (还是没有解决服务器端控件的ViewState问题,而且只支持asp.net2.0,还有很多缺陷,个人不推荐使用)
http://www.cnblogs.com/teddyma/archive/2005/11/28/286196.html 深度解析Asp.Net2.0中的Callback机制
http://www.cnblogs.com/jailu/archive/2007/06/26/796045.html 体验ASP.NET2.0客户端回调功能(CallBack)
http://msdn2.microsoft.com/zh-cn/library/system.web.ui.icallbackeventhandler(VS.80).aspx MSDN
●一个完整的回调包含以下几个过程:
(1)客户端发出callback请求;
(2)服务器端接收客户端callback请求;GetCallbackEventReference接受
(3)服务器端处理请求并回发请求给客户端;RaiseCallbackEvent处理,GetCallbackResult返回
(4)客户端接收服务器的返回结果并更新HTML。
●string Page.ClientScript.GetCallbackEventReference( //获取一个对客户端函数的引用
string target, //处理客户端callback的服务器控件的名称(实现ICallbackEventHandler接口)
string argument, //从JS传递给服务器端RaiseCallbackEvent方法的1个参数
string clientCallback,//接收服务器处理结果的JS函数名。
string context,//原封不动的传给指定的返回数据处理的JS函数
string clientErrorCallback,//服务器端事件处理程序出现错误时接收结果的JS函数
bool useAsync //true同步;false异步
)
●void Page.ClientScript.RegisterClientScriptBlock ( //向Page对象注册客户端脚本
Type type, //要注册的客户端脚本的类型
string key, //要注册的客户端脚本的名称
string script, //要注册的客户端脚本内容
bool addScriptTags //指示是否添加脚本标记的布尔值
)
1。要使用Callback首先要继承ICallbackEventHandler接口:
public partial class Callback : Page, ICallbackEventHandler
或:
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>
2。实现ICallbackEventHandler接口的两个方法
string GetCallbackResult() //返回一个string类型(只能是string类型)的数据给客户端脚本
{
//////
}
void RaiseCallbackEvent(string eventArgument) //含一个string类型的传入参数,可用于接收客户端脚本的参数
{
///////
return "";
}
3。处理回调页面的Page类还需负责客户端回调脚本的管理:指明哪个JS函数发送callback请求、哪个JS函数接收数据。
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
string strRefrence = Page.ClientScript.GetCallbackEventReference(this, "arg", "AAA", "context");
// 这里AAA是callback成功之后,客户端接收结果的JS方法,可以包含两个参数。
//this表示执行callback的的服务端控件是当前这个Page,当前的Page必须实现ICallbackEventHandler接口
//arg是传给RaiseCallbackEvent的参数eventArgument的值,可以用自定义格式的字符串。
//context参数会被原封不动的传给指定的返回数据处理的JS函数
string strCallBack = "function BBB(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "BBB", strCallBack, true); ////注册JS函数BBB,BBB触发GetCallbackEventReference
}
}
这样写更好理解点
<script language="javascript" type="text/javascript">
function BBB(arg, context)
{<%= ClientScript.GetCallbackEventReference(this, "arg", "AAA", "context")%>;}
</script>
●前者把JS函数BBB写在了服务器端然后用RegisterClientScriptBlock注册,客户端调用BBB,BB再调用了GetCallbackEventReference
第2种,BBB直接写在客户端。
4。客户端代码:客户端脚本则比较简单了,只需要实现接收callback结果的JS方法(这里是AAA)就OK了
function AAA(valueRES, context) //valueRES是服务器端处理后的结果
{
document.getElementByIdx(elementId1).innerHTML = valueRES;
document.getElementByIdx(elementId2).innerHTML = context;
}
例子:用callback获取服务器端的时间(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 = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveDataFromServer", "context");
string strCallBack = "function CallBackToTheServer(arg, context) {" + strRefrence + "};";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallBackToTheServer", strCallBack, true); //注册JS函数CallBackToTheServer
}
}
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;
}
}
Default.aspx
<%@ Page Language="C#" 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,context)
{
document.getElementByIdx("ServerTime").innerHTML = valueReturnFromServer;
document.getElementByIdx("PIG").innerHTML = context;
}
function GetServerTime(format)
{CallBackToTheServer(format, "你是猪");} //调用触发GetCallbackEventReference的CallBackToTheServer函数(写在服务器端的JS函数)
</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>不点击则为默认显示
<span id="PIG"></span>
</div>
</form>
</body>
</html>