2011年5月26日 星期四

最具實用性的伺服器控制項互動介面–ICallbackEventHandler

如果你很懶,覺得Server Control的東西很多,老闆的要求也很多,時間也很趕,如果用的是Web Form,那就使用這個介面吧。

前台可以使用JavaScript來搞定(如果你會jQuery那就更好了),後台回傳JSON形式的結構給前台呈現,絕妙的組合。

至於設計時的操作、瀏覽器的相容性、資料持續性等等的議題,就需要好好地給他系統分析一下,隨便亂搞是不行的啊。

Callbackc和一般Postback在網頁生命週期上有部分不同:

Postback & Callback Page LifeCycle COmparision

1. Server Control需要繼承ICallbackEventHandler,並實作GetCallbackResult與RaiseCallbackEvent。

ICallbackEventHandler讓你不必PostBack,就可以處理複雜的結構或許多的資料。

GetCallbackResult送出計算結果到前台。

RaiseCallbackEvent從前台接收資料資料。

至於OnLoad則是將處理的相關JavaScript寫到前台,這邊的函式命名與前台有關,需要注意一下。

    [ToolboxData("<{0}:CallbackControl runat=server></{0}:CallbackControl>")]
    public class CallbackControl : Control,ICallbackEventHandler
    {
        protected override void OnLoad(EventArgs e)
        {
            // 建立用戶端指令碼函式
              // http://msdn.microsoft.com/zh-tw/library/ms178208.aspx
            ClientScriptManager cm = Page.ClientScript;
            String cbReference = cm.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
            String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
            cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
            base.OnLoad(e);
        }
        public string GetCallbackResult()
        {
            return "GetCallbackResult: 123456"; //fromServerData
        }
        public void RaiseCallbackEvent(string eventArgument)
        {
            //eventArgument = "toServerData"   
        }
    }
2. 網頁的部分有兩個函式,一個送出資料到伺服器,另一個則是負責接收資料。與ICallbackEventHandler中時做的函式剛好互相對應。
    <cc1:CallbackControl ID="CallbackControl1" runat="server" />
    <div id="cbDiv" onclick="CallServer('toServerData', alert('Callback'))">
        伺服器傳回的資料會顯示在這裡。
    </div>
    <script type="text/javascript">
        function ReceiveServerData(fromServerData, context) {            
            document.getElementById("cbDiv").innerHTML = "從伺服器傳回的資料是=>" + fromServerData;
        }
    </script>
3. 執行前的畫面:
image
4. 點擊Div的區塊後,產生的執行後畫面:
image
參考資料:


 

沒有留言:

張貼留言