今天看【Asp.NET 3.5 SP1高级编程(第六版)中文版】时,看到客户端回调,以前只知道Asp的回调函数__doPostBack(),今天看到回调就有感觉比较难(对于我这只小鸟来说),果然看到一个例子,怎么也看不懂,只要自己测试,然后才发现是这样,但是里面的原理还是不懂,以后会明白的,开始正题,下面通过一个例子讲解客户端回调功能(ICallbackEventHandler接口)如何实现的。
页面代码:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RandomNumber.aspx.cs" Inherits="RandomNumber" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title>使用回调功能把一个随机值填充到Web页面上</title>
8 <script type="text/javascript">
9 function GetNumber()
10 {
11 UseCallback();
12 }
13
14 function GetRandomNumberFromServer(TextBox1, context)
15 {
16 document.forms[0].TextBox1.value =TextBox1;
17 }
18 </script>
19 <script type="text/javascript">
20 function CallServer(index)
21 {
22 UseServerEvent(index);
23 }
24
25 function GetValueFromServer(value, value2)
26 {
27 document.forms[0].TextBox2.value =value;
28 //alert(value);
29 //alert(value2);
30 }
31 </script>
32 </head>
33 <body>
34 <form id="form1" runat="server">
35 <div>
36 <input type="button" id="Button1" value="Get Random Number" onclick="GetNumber()" />
37 <br />
38 <br />
39 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
40 </div>
41 <hr />
42 <h3>此为练习</h3>
43 <div>
44 <input type="button" id="Button2" value="Get Return Value" onclick="CallServer('Jolin')" />
45 <br />
46 <br />
47 <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
48 </div>
49 <hr />
50 </form>
51 </body>
52 </html>
后台代码:
1 using System;
2 using System.Collections;
3 using System.Configuration;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Security;
8 using System.Web.UI;
9 using System.Web.UI.HtmlControls;
10 using System.Web.UI.WebControls;
11 using System.Web.UI.WebControls.WebParts;
12 using System.Xml.Linq;
13
14 public partial class RandomNumber : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
15 {
16 private string _callbackResult = null;
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 if (!IsPostBack)
20 {
21 /*调试输出:
22 cbReference:
23 WebForm_DoCallback('__Page',arg,GetRandomNumberFromServer,context,null,false)
24
25 cbScript:
26 function UseCallback(arg, context){WebForm_DoCallback('__Page',arg,GetRandomNumberFromServer,context,null,false);}
27
28 html中生成的JS:
29 <script type="text/javascript">
30 //<![CDATA[
31 function UseCallback(arg, context)
32 {
33 WebForm_DoCallback('__Page',arg,GetRandomNumberFromServer,context,null,false);
34 }
35 //]]>
36 </script>
37 * */
38
39 /*cbReference 定义接收服务端返回结果的JS函数,即:GetRandomNumberFromServer(可以有n>-1个参数)
40 * this:指定从此发出
41 * arg:指定一个由Asp.Net自动生成的函数(WebForm_DoCallback)的第2个参数名称
42 * context:指定一个由Asp.Net自动生成的函数(WebForm_DoCallback)的第4个参数名称
43 * */
44 string cbReference = Page.ClientScript.
45 GetCallbackEventReference(this, "arg", "GetRandomNumberFromServer", "context");
46
47 /*UseCallback是可供客户端调用的服务器输出的JS函数名称,比如aspx页面有函数A,其中调用了
48 UseCallback函数(可能带有参数)。
49 * */
50 string cbScript = "function UseCallback(arg, context)" +
51 "{" + cbReference + ";}";
52
53 /*
54 * RegisterClientScriptBlock是注册代码到客户端页面,也就是生成一个JS脚本块。
55 * 最后一个参数是说明是否带有“<script type="text/javascript"></script>”标记,一般是true。
56 * */
57 Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
58 "UseCallback", cbScript, true);
59
60
61 //下面为练习(客户端调用带有参数"Jolin")
62 string cbReference2 = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetValueFromServer", "context");
63 string cbScript2 = "function UseServerEvent(arg, context)" +
64 "{" + cbReference2 + ";}";
65 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "UseServerEvent", cbScript2, true);
66 }
67
68 }
69
70 #region ICallbackEventHandler Members
71
72 public string GetCallbackResult()
73 {
74 return _callbackResult;
75 }
76
77 public void RaiseCallbackEvent(string eventArgument)
78 {
79 if (string.IsNullOrEmpty(eventArgument) || !("Jolin".Equals(eventArgument)))
80 {
81 Random rnd = new Random();
82 _callbackResult = rnd.Next().ToString();
83 }
84 else
85 {
86 _callbackResult = "Jolin, I love you!";
87 }
88 }
89
90 #endregion
91 }
测试结果:
如果点击第一个按钮"Get Random Number"会在其下的输入框中显示一个随机数字,如果点击第二个按钮"Get Return Value"会返回"Jolin, I love you!"。
解释:
上述代码中已经包含了一些解释,下面是针对整个流程,按照自己的理解进行解释,如果有不对的地方,请不吝赐教!
1、客户端直接或者间接调用函数:UseCallback()
而函数UseCallback()是由服务器端动态输出的,里面包含了具有回调功能的函数(具有参数)
2、服务器接收到客户端传递过来的信息,调用ICallbackEventHandler接口的RaiseCallbackEvent(string eventArgument)函数,进行分析(利用eventArgument)和计算,然后通过GetCallbackResult()返回一个string类型值到客户端
3、客户端接收服务器计算结果的函数GetValueFromServer()早已在UseCallback()中被标记,所以会把值传递到GetValueFromServer()函数中,然后赋予HTML控件值,得以显现给用户。
好了,以后还要学习回调的,到时候如果有新的理解,会再来的。
**注:在码字的过程中发现园子的输入控件有点小Bug,如果从外面复制英文状态(带引号)的字符到编辑框,就会出现在其后的中文引号变样,“”->"”“,如果把"去掉就正常了,可能是复制的字符带有格式吧,望高人解答。
风筝
2012.03.29