`
索菲亚．　　ぅ
  • 浏览: 15827 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

    博客分类：
  • NET
ASPASP.netUIWebForm脚本
阅读更多

 概述

在Asp.net网页的默认模型中，用户与页进行交互，单击按钮或执行导致回发的一些操作，此时将重新创建页及其控件，并在服务器端运行页代码，且新生成的页被呈现到浏览器。但是，很多情况下我们有这样的需求（比如说，客户端脚本维护一些状态信息，节省服务器往返的处理开销等），既是需要从客户端运行服务器代码，而不执行回发。Asp.net2.0的客户端回调机制正好能满足这种需求。在客户端回调中，客户端脚本会向Asp.net网页发送一个请求，该网页会调用一个"特别标记"的方法执行请求处理，然后向浏览器返回可由另一客户端脚本函数读取的值。

客户端回调组件
创建实现了客户端回调的Asp.net页应该包含如下几个方面，页的服务器端代码必须：
=>实现了ICallbackEventHandler接口。可以向任何Asp.net网页添加此接口声明。
=>提供RaiseCallbackEvent方法的实现。此方法将被调用以对服务器执行回调。
=>提供GetCallbackResult方法的实现。此方法会将回调结果返回个客户端。

此外，该网页还需包括执行以下操作的三个客户端脚本函数：
=>第一个是函数调用帮助器方法，该方法执行对服务器的实际请求。在此函数中，可以首先执行自定义的逻辑以准备事件参数，该参数将以字符串格式发送到服务器端回调事件处理程序。
=>第二个是客户端回调函数，该函数接收服务器端回调事件处理程序返回的结果。
=>第三个函数是执行对服务器端的实际请求的帮助函数。当在服务器代码中使用GetCallbackEventReference方法生成对此函数的引用时，由Asp.net自动生成该函数。

结合示例分析
建立一个Client_Callback3.aspx页面，UI部分：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="client_callback3.aspx.cs" Inherits="client_callback3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Client Callback Sample</title> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="txtName" value="请输入一个人名" /> <input type="button" id="btnGetAge" value="Get his(her) Age" onclick="getAgeByName(); " /> <hr /> <span id="result"></span> </div> <script type="text/javascript"> function getAgeByName() { var context = ""; var name = document.getElementById('txtName').value; <%= Page.ClientScript.GetCallbackEventReference(this, "name", "ReceiveDataFromServer", "context") %>; } function ReceiveDataFromServer(retVal) { document.getElementById('result').innerText = retVal; } </script> </form> </body> </html>



 code-behind部分：


using System; public partial class client_callback3 : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { private System.Collections.Generic.Dictionary<string, int> _Person = new System.Collections.Generic.Dictionary<string, int>(); public System.Collections.Generic.Dictionary<string, int> Person { get { if (!Equals(ViewState["Person"], null)) { return ViewState["Person"] as System.Collections.Generic.Dictionary<string, int>; } else return null; } set { ViewState["Person"] = value; } } string callbackVal = string.Empty; protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { _Person.Add("Allan", 24); _Person.Add("Kaori", 23); _Person.Add("Vincent", 22); _Person.Add("George", 21); Person = _Person; } } void System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent(string eventArgument) { this.callbackVal = eventArgument; } string System.Web.UI.ICallbackEventHandler.GetCallbackResult() { return this.callbackVal + "'age is " + Person[this.callbackVal].ToString(); } }




 在UI中的getAgeByName即对应如上讲的第一个脚本函数，ReceiveDataFromServer对应第二个函数即是客户端回调函数，code-behind页面类继承了接口ICallbackEventHandler，并实现了其RaiseCallbackEvent和GetCallbackResult方法。RaiseCallbackEvent方法有一个string类型的参数，该参数是从客户端传入。而GetCallbackResult方法则是返回一个string类型的值，该值被客户端回调函数接收。大家可能注意到了还有一个客户端函数哪里去了？它是在服务器端调用GetCallbackEventReference方法生成对此函数的引用时，有Asp.Net2.0自动生成。我们可以通过html的查看源文件知道这个函数（WebForm_DoCallback('__Page',name,ReceiveDataFromServer,context,null,false);）。

几个问题
1，GetCallbackEventReference方法：获取一个对客户端函数的引用，调用该函数时，将启动一个对服务器端事件的客户端回调。按照我的理解，此方法是实现让客户端有能力传递参数到服务器端。这个方法包含四个参数，GetCallbackEventReference(this, "name", "ReceiveDataFromServer", "context")，其参数意思分别是：第一个参数既是继承了ICallbackEventHandler接口的控件；第二个参数是从客户端传递到服务器端的参数值；第三个参数是客户端回调函数；第四个是上下文。


  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      Ruby 学习笔记[1]有疑问
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics