再谈ASP.NET第一 - ASP.NET2.0的回调机制

本文参考《ASP.NET2.0经典案例教程》的部分内容。

虽然现在各种各样的Ajax已近流行很久，但本文还是回顾一下ASP.NET2.0的Ajax技术 - 回调，就当是个怀旧。回调的作用类似于ASP.NET Ajax，其使浏览器能够异步调用远程服务器，而无需刷新页面。

    回调实现的方法及执行的过程如下：

1. 让页面实现ICallbackEventHandler接口，实现该接口的WebForm将自动添加客户端JavaScript函数。GetCallbackEventReference方法获取上文提到的客户端JavaScript函数的名称。该函数即是回调的发起者。

2. 在客户端注册的JavaScript中包含了一个回调管理器。其负责在浏览器与服务器之间发起或响应XmlHttp通信。页面中以回调方式发送给服务器的请求将被回调管理器拦截，并以符合Xml Http的方式将这个请求发送到服务器。

3. 回调管理器将请求发送到服务器后，服务器调用ICallbackEventHandler.RaiseCallbackEvent()来处理。开发人员将处理请求的逻辑放置在这个函数中，处理调用并返回响应，响应的返回值可以为字符串。

4. 响应被返回给回调管理器，回调管理器通知调用者回调已完成，并将响应字符串交给最初的调用者。

 

下面将给出一段示例性代码来展示这个过程。

1. 首先新建一个WebForm名为CallBack.aspx，并让这个CallBack类实现ICallbackEventHandler接口。

public partial class Callback : System.Web.UI.Page,ICallbackEventHandler

 

2. 在VS中使用重构工具显示实现这个接口，会生成如下两个方法。

#region ICallbackEventHandler 成员

string ICallbackEventHandler.GetCallbackResult()
{
    throw new NotImplementedException();
}

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
    throw new NotImplementedException();
}

#endregion

其中RaiseCallbackEvent()接受来自客户端的调用，让服务器能够处理所需的业务逻辑，GetCallbackResult()函数将响应返回给客户端，让客户端能够通过JavaScript在浏览器中显示更新。

 

3. 这一步提供客户端脚本，函数名分别为CallServer和ReceiveServerData的函数提供了回调管理器脚本的入口和出口。

protected void Page_Load(object sender, EventArgs e)
{
    ClientScriptManager cm = Page.ClientScript;
    string cbReference;
    cbReference = cm.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
    string callbackScript = "";
    callbackScript += "function CallServer(arg, context){" + cbReference + ";}";
    cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}

 

4. 在Form中添加一个文本框的表单元素，将其命名为txtMessage。其用来取得用户要提交给服务器的数据。

<input id="txtMessage" type="text" style="width: 218px; height: 55px" />

 

5. 接下来添加一个按钮，按钮的onclick事件处理中调用回调管理器的入口（即第3步中的CallServer函数）。

<input id="Button1" type="button" value="Send"
         onclick="CallServer(document.getElementById('textMessage').value,null)" 
         style="width:57px;height:60px" />

onclick接受txtMessage控件的text值作为参数。

 

6. 在窗体中添加名为ReceiveServerData()的JavaScript函数。该函数接受参数arg和context。Arg提供服务器处理完调用后返回的响应。在这其中可以编写任意的Js代码来更新html。

<script type="text/javascript">
    function ReceiveServerData(arg, context) {
        var obj = document.getElementById("result");
        obj.innerHTML += arg;
    }
</script>

 

最后附上这个页面文件供参考。