Asp.net中的ajax回调模式(ICallbackEventHandler)

时间:2023-03-09 07:17:05
Asp.net中的ajax回调模式(ICallbackEventHandler)

客户端回调本质上就是指通过前端的客户端脚本向服务器端传递相应的数据参数,服务器端再以接受到的参数进行查询和处理,最后将结果回传到客户端进行显示。asp.net 2.0提供了实现无刷新回调的接口ICallbackEventHandler.为了实现客户端回调,你必须实现一个ICallbackEventHandler接口,该接口定义了两个方法法RaiseCallbackEvent和GetCallbackResult. RaiseCallbackEvent()从浏览器接受一个字符串作为事件参数,即该方法接受客户端JavaScript传递的参数,注意它是首先触发的。接下来触发的就是GetCallbackResult()方法,它将所得到的结果传回给客户端的JavaScript,JavaScript再将结果更新到页面。下面以实例说明:

 
Code
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq; namespace Ajax
{
    /**//*ICallbackEventHandler接口封装了从客户端的JavaScript通过XmlHttp方式调用服务器端的代码,
     * 所以只要在页面中实现了这个接口,便可以无需要使用其它的Ajax框架
     * 或是自己动手写XmlHttp请求这两种方式实现异步回调,可以避免回发过程中带来的页面刷新,
     * 这样不但减少了页面刷新的延时而且服务端无需处理每次回发的大量视图状态(View State)信息,
     * 应用程序的整体性能会有很大的提高。
     */
    public partial class AjaxCall : System.Web.UI.Page,ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {         }         string text = string.Empty;
        /**//*ICallbackEventHandler 接口。
        继承这个接口需要实现两个方法RaiseCallbackEvent和GetCallbackResult,
        其中,RaiseCallbackEvent用来处理客户端提交的请求,RaiseCallbackEvente有一个string类型的参数,
        是客户端提交到服务器端的参数。而GetCallbackResult方法则负责把服务器端的处理结果返回到客户端。
        */        //GetCallbackResult方法则负责把服务器端的处理结果返回到客户端。
        public string GetCallbackResult()
        {
            return text;
        }
        //RaiseCallbackEvent用来处理客户端提交的请求,RaiseCallbackEvente有一个string类型的参数,是客户端提交到服务器端的参数
        public void RaiseCallbackEvent(string eventArgument)
        {
            text =eventArgument+"---------"+DateTime.Now.ToLocalTime().ToString();
        }
        
    }
}  

前台代码如下:

 
Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>AJAX回调模式</title>
    <script type="text/javascript">
    //回调函数
    function receiveServerData(arg,context)
    {
        document.getElementById("result").innerHTML=arg;
    }
    /**//* 为了向服务器页发送回调和接收结果这两个功能,
    可以在客户端定义两个脚本函数来实现用ClientScriptManager类
    的GetCallbackEventReference方法在客户端注册一个向服务器端发送请求的函数。
    Page.ClientScript获得页面的ClientScriptManager引用,GetCallbackEventReference注册发送回调请求的函数。
    */
    
    /**//*
      public string GetCallbackEventReference (Control control,string argument,string clientCallback,string context)   参数 作用 
control 处理客户端回调的服务器 Control。该控件必须实现 ICallbackEventHandler 接口并提供 RaiseCallbackEvent 方法。  
argument  从客户端脚本传递一个参数到服务器端的RaiseCallbackEvent 方法。  
clientCallback  一个客户端事件处理程序的名称,该处理程序接收服务器端事件返回的结果。 
context 启动回调之前在客户端的客户端脚本信息。脚本的结果传回给客户端事件处理程序。  
返回值 调用客户端回调的客户端函数的名称。 
*/
    function callServer(arg,context)
    {
        <%=ClientScript.GetCallbackEventReference(this,"arg","receiveServerData","context") %>;
    }
    
  //---------------------------------------------  
    function RServerData(arg,context)
    {
       context.value=arg;
    }
    function Call(Input,context)
    {   
        arg=Input.value;
        <%=ClientScript.GetCallbackEventReference(this,"arg","RServerData","context") %>;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
<input type="button" value="Submit" onclick="callServer()" />
   
<div id="result"> </div>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
     <input id="button" type="button" value="submit" onclick="Call(TextBox1,TextBox2)"/>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </form>
</body>
</html>

相关文章