六步使用ICallbackEventHandler實現無刷新回調

 ajax技術所提倡的無刷新回調,在原來的技術中需要寫大量的javascript代碼或使用一些ajax框架,使得開發效率和可維護性大大降低。其實asp.net2.0中,已經提供了這樣的接口,這就是icallbackeventhandler。
    關於icallbackeventhandler網上已經有很多文章介紹了,這篇實爲畫蛇添足。

icallbackeventhandler存在於system.web.ui中,我們先做一個非常簡單的例子來試用一下。

   第一步,在vs2005中建立一個新的web窗件。
   第二步,在aspx中,放上一段html代碼(如下):


1<body>
2    <form id="form1" runat="server">
3    <div>
4        <button οnclick="callserver()">callserver</button>
5    </div>
6    </form>
7</body>

   第三步,然後在<head></head>中放入一段javascript腳本:


 1 <script type="text/javascript">
 2     function callserver()
 3     {
 4         var product = "測試";
 5         <%= clientscript.getcallbackeventreference(this, "product", "receiveserverdata",null)%>;
 6     }
 7     
 8     function receiveserverdata(rvalue)
 9     {
10         alert(rvalue);
11     }
12 </script>

   第四步,在此aspx的後臺cs代碼中,繼承icallbackeventhandler接口,並實現接口中的兩個方法:
 icallbackeventhandler.getcallbackresult() 
    和
 icallbackeventhandler.raisecallbackevent(string eventargument)

   第五步,增加一個變量callbackvalue,並修改接口的兩個方法爲:


 1 private string callbackvalue = string.empty;
 2    
 3 string icallbackeventhandler.getcallbackresult()
 4 {
 5  return callbackvalue + ",ok";
 6 }
 7
 8 void icallbackeventhandler.raisecallbackevent(string eventargument)
 9 {
10  this.callbackvalue = eventargument;
11 }
12

    第六步,運行,界面上會出現一個按鈕,點擊後,會將“測試”這個字符串傳至後臺,後臺c#代碼將字符串加上“,ok”後返回給客戶端的javascript代碼,並顯示。

    以上六步,就可以實現無刷新回調了。現在,我們來分析一下幾段代碼。
    先看第三步中的javascript代碼,其中的callserver()方法中進行了回調,回調的語句爲:
<%= clientscript.getcallbackeventreference(this, "product", "receiveserverdata",null)%>;
    
    裏面四個參數中第二個參數指定將product這個javascript中的字符串變量傳回後臺,第三個參數指定了從後臺返回時接收返回信息的javascript方法receiveserverdata(string value)。

    第五步中後臺的兩個方法,一個icallbackeventhandler.raisecallbackevent(string eventargument)用來接收前臺javascript中傳來的字符串變量,並賦值給內部變量this.callbackvalue,另一個方法icallbackeventhandler.getcallbackresult()將變更後的內部變量this.callbackvalue返回給前臺javascript方法receiveserverdata(string value)。

    調用的順序是: (前臺)callserver() --> (後臺)icallbackeventhandler.raisecallbackevent(string eventargument) --> (後臺)icallbackeventhandler.getcallbackresult() --> (前臺)receiveserverdata(string value)。

    整個調用過程非常簡單,而其中非常關鍵的一步是第三步的
<%= clientscript.getcallbackeventreference(this, "product", "receiveserverdata",null)%>;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章