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

客戶端回調本質上就是指經過前端的客戶端腳本向服務器端傳遞相應的數據參數,服務器端再以接受到的參數進行查詢和處理,最後將結果回傳到客戶端進行顯示。asp.net 2.0提供了實現無刷新回調的接口ICallbackEventHandler.爲了實現客戶端回調,你必須實現一個ICallbackEventHandler接口,該接口定義了兩個方法法RaiseCallbackEvent和GetCallbackResult. RaiseCallbackEvent()從瀏覽器接受一個字符串做爲事件參數,即該方法接受客戶端JavaScript傳遞的參數,注意它是首先觸發的。接下來觸發的就是GetCallbackResult()方法,它將所獲得的結果傳回給客戶端的JavaScript,JavaScript再將結果更新到頁面。下面以實例說明:javascript

 

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();
        }

        
    }

}

 

前臺代碼以下:html

 

<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>
相關文章
相關標籤/搜索