ASP.NET2.0实现无刷新客户端回调

来源：互联网发布：观澜网络杭州有限公司编辑：程序博客网时间：2024/06/07 21:52

Asp.Net2.0的客户端回调是一种很让人激动的方法，他能够让我们控制要提交什么数据给服务器而不用提交整个页面，同时服务器也只返回你所需要的数据而不要发回整个页面。

　　首先我们要说一个很重要的方法：GetCallbackEventRefernce.我把我的理解写出来，可能是错误的，恳请指出，非常感谢！

　　GetCallbackEventReference首先实现让客户端脚本有能力传递参数给服务器端的RaiseCallbackEvent方法,然后返回RaiseCallBackEvent方法的值给你在GetCallbackEventRefernce方法中注册的一个参数（其实也是一个你要在客户端写的脚本）。调用GetCallbackEventRefernce你必须从客户端脚本中传递给他两个参数，一个是要传递给RaiseCallbackEvent事件的值，一个是context.

　　他的参数意义如下：

　　第一个：实现了ICallbackEventHandler借口的页面或者服务器控件，写this代表但前页面。

　　第二个：代表你从要从客户端传递给服务器RaiseCallbackEvent方法的值

　　第三个：你要在客户端写的一个js函数，同时，服务器也会把计算得到的数据传递给这个函数做为这个函数的参数。

　　第四个：context具体什么意思我也不太清楚GetCallbackEventRefernce发送到了客户、端的代码是这样的：

WebForm_DoCallback('__Page',arg,ReceiveServerData,context,null,false)

　　那么我们要怎么样做才能够从客户端调用他呢？看到了三中方法：

　　第一种：在后台写个public string，在Page_Load中给他赋值为：=Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");注意在这里是Page.ClientScrip,因为他会返回个ClientScriptManager,ClientScriptManager管理所有的客户端脚本。然后在前台某个按钮的onclick事件里＜%=那个public后台字符串%＞.做个小实验代码如下：

　　前台ServerTime.aspx:为了方便去掉好多没用的html

＜%@ page language="C#" CodeFile="ServerTime.aspx.cs" Inherits="ServerTime_aspx" %＞

＜html＞

＜head＞

＜title＞Server Time＜/title＞

＜script language="javascript"＞

function GetServerTime()

{

　 var message = '';

　 var context = '';

　＜%=sCallBackFunctionInvocation%＞

}

function ShowServerTime(timeMessage, context) {

　 alert('现在服务器上的时间是:/n' + timeMessage);

}

＜/script＞

＜/head＞

＜body＞

＜form id="MainForm" runat="server"＞

＜input type="button" value="得到服务器端时间" onclick="GetServerTime();" /＞

＜/form＞

＜/body＞

＜/html＞

　　后台：

using System;

using System.Web.UI;

public partial class ServerTime_aspx : Page,ICallbackEventHandler

{

　 //一定要实现ICallbackEventHandler借口

　 public string sCallBackFunctionInvocation;

　 void Page_Load(object sender, System.EventArgs e)

　 {

　　 sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");

　 }

　 public string RaiseCallbackEvent(string eventArgument)

　 {

　　 return DateTime.Now.ToString();

　 }

　　运行，点按钮结果如下：

第二种方法：在上面的方法中我们必须要在前台绑定后台，那么如果不绑定呢？我们这样做：

　　直接把GetCallbackEventReference当做js函数中的一个实现内容，然后把这个js函数注册到客户端。

　　前台TestPage代码：

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %＞

＜html＞

＜head＞

＜title＞Untitled Page＜/title＞

＜script type="text/javascript"＞

function test()

{

　 var lb = document.getElementById("Select1");

　 //取的那个下拉框

　 var con = lb.options[lb.selectedIndex].text;

　 //得到你选择的下拉框的文本再调用呢个CallTheServer,是一个由服务器端输出的js函数

　 CallTheServer(con,'');

}

function ReceiveServerData(rValue)

{

　 Results.innerHTML = rValue;

}

＜/script＞

＜/head＞

＜body＞

＜form id="form1" runat="server"＞

＜div＞

＜select id="Select1"＞

＜option value=1 selected="selected"＞老鼠徒弟＜/option＞

＜option value=2＞吴旗娃师傅＜/option＞

＜/select＞

＜br /＞

＜input onclick="test()" value="从服务器返回下拉框文本" type=button＞

＜br /＞

＜span ID="Results"＞＜/span＞

＜br /＞

＜/div＞

＜/form＞

＜/body＞

＜/html＞

　　后台代码：

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 TestPage : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

{

　 protected void Page_Load(object sender, EventArgs e)

　 {

　　 String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");

　　 String callbackScript;

　　 callbackScript = "function CallTheServer(arg,context)" +"{ " + cbReference + "} ;";

　　 Page.ClientScript.RegisterStartupScript(this.GetType(),"abcdefg",callbackScript, true);

　　 //第四个参数代表是不是要自动给着脚本加上＜script type="text/javascript"＞＜/script＞标记，当然要加啊

　 }

　 public String RaiseCallbackEvent(String eventArgument)

　 {

　　 return "你选择的是" + eventArgument;

　 }

　　下面是执行结果：

第三种：前面两种都是＜input type="button"的html控件，那么如果是服务器按钮呢？当然也可以，在后台添加服务器按钮的onclick 属性。

　　前台third.aspx代码：

＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="third.aspx.cs" Inherits="third" %＞

＜html＞

＜head＞

＜title＞Untitled Page＜/title＞

＜/head＞

＜body＞

＜form id="form1" runat="server"＞

＜div＞

＜select id="Select1"＞

＜option selected="selected" value=1＞老鼠徒弟＜/option＞

＜option value=2＞吴旗娃师傅＜/option＞

＜/select＞

＜asp:Button ID="Button1" runat="server" Text="这是个服务器按钮" /＞＜/div＞

＜div id="div1" /＞

＜script type="text/javascript"＞

function Re(ret)

{

　 document.getElementById("div1").innerHTML = ret;

　 alert(ret);

}

＜/script＞

＜/form＞

＜/body＞

＜/html＞

后台代码：

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 third : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler

{

　 protected void Page_Load(object sender, EventArgs e)

　 {

　　 //第四个参数为null，因为你不可能再在js中给他传参数了

　　 string str = Page.ClientScript.GetCallbackEventReference(this,"document.getElementById('Select1')._

　　　　　　　 options[document.getElementById('Select1').selectedIndex].text","Re",null);

　　 //return false是为了防止提交窗体

　　 Button1.Attributes.Add("onclick",str+";return false;");

　 }

　 #region ICallbackEventHandler Members

　 public string RaiseCallbackEvent(string eventArgument)

　 {

　　 if (eventArgument == "老鼠徒弟")

　　 {

　　　 return "老鼠徒弟：人生如鼠，不在仓就在厕！";

　　 }

　　 else

　　 {

　　　 return "吴旗娃师傅：自信自强，乐观向上";

　　 }

　 #endregion

}

　　小技巧，当你写完System.Web.UI.ICallbackEventHandler后，把鼠标移上去，那么System前面会有个小图表，点他会自动写好那个RaiseCallbackEvent代码，效果如下；

转自：http://hi.baidu.com/zjali/blog/item/98af65df15e3be17632798fc.html

第一步：实现 ICallbackEventHandler 接口

　　ICallbackEventHandler接口位于System.Web.UI命名空间下。在beta2时，ICallbackEventHandler只包含一个RaiseCallbackEvent方法，即处理回调事件，又返回处理结果。在正式版中，它变成了包含GetCallbackResult和RaiseCallbackEvent两个成员方法，第一个用来返回回调事件的结果，第二个用来出来回调事件。这个变化主要是为了编写Web控件而做的改动，具体可以看一下GridView等控件中的实现代码。

　　建立一个 Web 网站，我们来修改 default.aspx.cs 文件：

　　1 public partial class _Default : System.Web.UI.Page, ICallbackEventHandler

　　1 private string str;

　　2 public void RaiseCallbackEvent(string eventArgument)

　　3 {

　　4 //可以根据传递的参数不同，调用不同的处理逻辑

　　5 str = "从服务器端返回的内容：" + eventArgument;

　　6 }

　　8 public string GetCallbackResult()

　　9 {

　　10 return str;

　　11 }

　　第二步：注册回调方法

　　我们在 default.aspx 页面中添加一个 TextBox ，一个 Label 和一个 Html 控件 Button ，并给 Button 添加 onclick 事件：

1 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

2 <input id="Button1" type="button" value="提交到Label1" onclick="CallServer(TextBox1, Label1)"/><br/>

3 <asp:Label ID="Label1" runat="server" Text="Label1:"></asp:Label>

1 <script type="text/javascript">

2 //由button调用

3 function CallServer(inputcontrol, context)

4 {

5 context.innerHTML = "Loading";

6 arg = inputcontrol.value;

7 //注册回调方法

8 <%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;

9 }

10 //在回调方法中注册的接收返回结果的函数

11 function ReceiveServerData(result, context)

12 {

13 context.innerHTML = result;

14 }

15 </script>

　　好了，一个无刷新的页面就开发完了，它可以将你在 TextBox 中输入的文字，通过服务器代码写回到页面的 Label 中。是不是很简单?你可以运行一下你的程序看看效果啦!

　　下面我们来分析一下这些代码。

　　首先，我们看

<%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>;

　　ClientScript是System.Web.UI.Page对象的一个属性，它是System.Web.UI.ClientScriptManager对象。用于管理客户端脚本，GetCallbackEventReference方法用于注册一个服务器端事件的客户端回调。它的第四个参数“Context”非常重要，但在MSDN中并没有相关的例子和详细的说明。在我上面给的代码中可以看到，调用CallServer方法时，传递的Context参数就是Label1，而ReceiveServerData的第二个参数“Context”就是被传递过来的Label1。在我的例子中，Context被我用于设定一个用来显示服务端返回结果的控件。其实，你可以将任意的对象赋值给Context，它都会被传递给本地端处理回调返回结果的函数，这样，你就可以根据调用前指定的“上下文”灵活的操作返回结果了!在我给出的完整例子中，你可以看到一个使用Context做的无刷新显示GridView的例子。

　　在这里我要说个题外话，Context这么重要的参数在MSDN中不但没有详细的说明，而且VS2005中文正式版MSDN中关于回调的例子竟然还是beta2时的实现!这个版本的MSDN可以说是我用过的版本中品质最差的。不过现在的MSND可以用“相当”庞大来形容，出错也是在所难免的，希望下个版本的MSND会好一些。

　　OK，在ASP.NET 2.0中开发具有Ajax特性的东东不难吧!其实就是两步：

　　1、在Server端实现ICallbackEventHandler接口，在接口包含的方法中根据传递的参数分别调用不同的处理方法，然后返回结果;

　　2、在Client端注册回调函数(当然你也可以在Server端注册)，然后实现处理回调结果的函数。其中，如果对Context能干灵活运行，你就可以做出非常好的效果了

第一步，在VS2005中建立一个新的WEB窗件。

第二步，在ASPX中，放上一段HTML代码(如下)：

1<body>

2 <form id="form1" runat="server">

3 <div>

4 <button onclick="CallServer()">CallServer</button>

5 </div>

6 </form>

7</body>

第三步，然后在<HEAD></HEAD>中放入一段JavaScript脚本：

1 <script type="text/javascript">

2 function CallServer()

3 {

4 var product = "测试";

5 <%= ClientScript.GetCallbackEventReference(this, "product", "ReceiveServerData",null)%>;

6 }

8 function ReceiveServerData(rValue)

9 {

10 alert(rValue);

11 }

12 </script>

第四步，在此ASPX的后台CS代码中，继承ICallbackEventHandler接口，并实现接口中的两个方法：

ICallbackEventHandler.GetCallbackResult()

和

ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)

第五步，增加一个变量CallBackValue，并修改接口的两个方法为：

1 private string CallBackValue = string.Empty;

3 string ICallbackEventHandler.GetCallbackResult()

4 {

5 return CallBackValue + ",ok";

6 }

8 void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)

9 {

10 this.CallBackValue = eventArgument;

11 }

第六步，运行，界面上会出现一个按钮，点击后，会将“测试”这个字符串传至后台，后台C#代码将字符串加上“，OK”后返回给客户端的JavaScript代码，并显示。

以上六步，就可以实现无刷新回调了。现在，我们来分析一下几段代码。

先看第三步中的JavaScript代码，其中的CallServer()方法中进行了回调，回调的语句为：

<%= ClientScript.GetCallbackEventReference(this, "product", "ReceiveServerData",null)%>;

里面四个参数中第二个参数指定将product这个JavaScript中的字符串变量传回后台，第三个参数指定了从后台返回时接收返回信息的JavaScript方法ReceiveServerData(string Value)。

第五步中后台的两个方法，一个ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)用来接收前台JavaScript中传来的字符串变量，并赋值给内部变量this.CallBackValue，另一个方法ICallbackEventHandler.GetCallbackResult()将变更后的内部变量this.CallBackValue返回给前台JavaScript方法ReceiveServerData(string Value)。

调用的顺序是： (前台)CallServer() --> (后台)ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) --> (后台)ICallbackEventHandler.GetCallbackResult() --> (前台)ReceiveServerData(string Value)。

整个调用过程非常简单，而其中非常关键的一步是第三步的