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

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 /＞
＜br /＞
＜input onclick="test()" value="从服务器返回下拉框文本" type=button＞
＜br /＞
＜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 }
　　7
　　8 public string GetCallbackResult()
　　9 {
　　10 return str;
　　11 }
　　12
　　第二步：注册回调方法
　　我们在 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>
4
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>
16
　　好了，一个无刷新的页面就开发完了，它可以将你在 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 }
7
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;
2
3 string ICallbackEventHandler.GetCallbackResult()
4 {
5 return CallBackValue + ",ok";
6 }
7
8 void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
9 {
10 this.CallBackValue = eventArgument;
11 }
12
第六步，运行，界面上会出现一个按钮，点击后，会将“测试”这个字符串传至后台，后台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)。
整个调用过程非常简单，而其中非常关键的一步是第三步的