CallBack PageCommand 與 JSON 初體驗

CallBack PageCommand 與 JSON

JavaScript物件標記法,英文名稱 JavaScript Object Notation(簡稱JSON),是一種文字格式標記法,相較於 XML 而言,JSON 明顯更為簡潔。而 JSON 這種精簡的資料表示方式,非常適合用於 AJAX 的資料轉輸。

我們使用「BasePage 撰寫 PageCommand 事件 (使用 CallBack)」一文中提及的 PageCommand 來執行 AJAX,並在 PageCommand 事件中回傳 JSON 字串,用戶端以 JavaScript 取得回傳的 JSON 物件。

在頁面上放置一個 Button 來執行 CallBack PageCommand,Button.OnClientClick 使用 GetCallBackPageCommandEventReference 方法取得執行 PageCommand 事件的用戶端指令碼,用戶端以 ReceiveServerData JavaScript 函式來接收伺服端的回傳資料。當引發 PageCommand 時,透過 e.CallbackResult 屬性來回傳 JSON 字串給用戶端的 ReceiveServerData 函式。

aspx.vb 的程式碼如下

Partial Class Default
    Inherits Bee.Web.TBBasePage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Button1.OnClientClick = Me.BeeScript.GetCallBackPageCommandEventReference("JSON", "", "ReceiveServerData", "") & ";return false;"
    End Sub

    Protected Sub Page_PageCommand(ByVal sender As Object, ByVal e As TBBasePage.PageCommandEventArgs) Handles Me.PageCommand
        e.CallbackResult = "{'myCats': [ {'name': 'Hero', 'age': 5, 'color': 'silver' }, {'name': 'Euro', 'age': 2, 'color': ['brown', 'white', 'black']}]}"
    End Sub
End Class

用戶端負責接收 CallBack 伺服端回傳資料的 ReceiveServerData 函式如下所示,會將傳回的 JOSN 字串使用 eval 函式來轉換為 JSON 物件。

    <script type="text/jscript">
    function ReceiveServerData(value){
        var obj = eval ("(" + value + ")");
        alert('I have ' + obj.myCats.length + ' cats.');
        alert(obj.myCats[0].name);
        alert(obj.myCats[1].name);
    }
    </script>

執行結果如下

image

image

image

 

參考資料:
http://www.json.org/
http://caterpillar.onlyfun.net/Gossip/AjaxGossip/JSON.html

ASP.NET 魔法學院