直接進入正題,如果要在asp.net網頁上實作Callback機制到底需要具備什麼?
1. 讓你的網頁具備Callback能力,也就是要告訴編譯器,本頁面有實作ICallbackEventHandler介面。

2. 而ICallbackEventHandler要動作,必須要實作兩個方法在頁面中,可以直接利用VS的功能讓他幫你實作。

3. 當你按下精靈時,他就會幫你實作兩個方法:RaiseCallbackEvent與GetCallbackResult。

4. 加上第三步所實作的RaiseCallbackEvent與GetCallbackResult外,要完成一個CallBack流程還需要另外兩個JavaScript,所以整體程式的架構是:

說明:
A. 完成一個CallBack功能必需具備上圖4個區塊。
B. 在頁面上面註冊啟動CallBack機制的JavaScript(語法:Page.ClientScript.GetCallbackEventReference),後面帶有四個參數,第一個為處理前端回呼的人,看起來通常是下this,也就是本頁;第二個為前端傳回的字串;第三個為CallBack結束後要呼叫的前端JavaScript;第四個類似一個標記,並不會參與邏輯處理,但回傳前端時會帶入,用於判斷何人傳回(不確定實際運用方法)。
C. 在上圖中,將B點的JavaScript註冊在按鈕事件,故按下鈕起動CallBack後,將會執行RaiseCallbackEvent方法內的邏輯,完成後會執行GetCallbackResult方法。因為上述流程,通常我們會使用一個全域變數,記載於RaiseCallbackEvent執行後的內容,於GetCallbackResult直接返回該變數。(全域變數為上圖第一區塊之AnswerCallback)
D. 執行GetCallbackResult後,將執行GetCallbackEventReference所註冊的前端JavaScript。(上圖ReceiveServerData)。
E. 而D點所提之JavaScript會收到兩個參數,第一個為CallBack的返回值,第二個為GetCallbackEventReference第四個參數。
所以,整理一次跑的流程:
1. 於Page_Load註冊一個CallBack的JavaScript於按鈕上。
2. 按下按鈕後,執行RaiseCallbackEvent,並將資訊存入全域變數AnswerCallback。
3. 完成RaiseCallbackEvent後,執行GetCallbackResult返回CallBack運算結果。
4. 執行前端JavaScript,顯示資訊於頁面上。
接下來進行實作,需求是,希望作一個簡單的計算程式,可以從頁面上輸入數字及計算符號(+-*/),經過CallBack機制返回計算結果。
頁面配置:

步驟1:宣告一個全域變數、組傳入字串、註冊GetCallbackEventReference於按鈕點擊事件上。

步驟2:拆解傳入字串,並將結果儲存於步驟1的全域變數中。

步驟3:將步驟2計算結果返回。

步驟4:依照步驟1GetCallbackEventReference第三參數之設定,執行前端相對應之JavaScript。

執行結果:

延伸:
有時候使用CallBack機制不是因為我們想要用,而是使用的元件需要用CallBack機制去呼叫,可以參考piggy:於ArcGIS Server實作ICallbackEventHandler,該篇以CallBack去呼叫ESRI ADF的地圖元件進行定位。
參考資料:
馬小玲點部落:ASP.NET AJAX(6)-CallBack
MIS2000:PostBack(回傳)與CallBack(回呼)的差別
AJAX魔法工廠:Client-CallBack非同步
My Program:ASP.NET CallBack實作
沒有留言:
張貼留言