ASP.NET MVC傳回Json格式的資料

2010-06-06

43895
0
jQuery

上星期有寫到一段程式，在一個按鈕上綁一個Click事件，

如果觸發就用Ajax去Controller撈兩個字串回來。

當時我還沒用過Json，所以只好用”,”將兩個字串隔開，在Client上再利用Split切成兩個字串

但這樣有點蠢，剛好趁這機會來試試看Json到底是什麼?怎麼用?

還是先看看維基吧 Json-Wiki，總之是一種資料交換的語言

而MVC的ActionResult中就有一種是回傳Json

在Action中，將資料塞入一個class,傳回return Json(class)


{
     TestJson model=new TestJson(){ HtmlTitle = "TestTitile",  HtmlContent = "TestContent" };
     return Json(model,JsonRequestBehavior.AllowGet);
}

需要注意的只有JsonRequestBehavior.AllowGet

因MVC2.0 預設禁止通過Get傳回JsonResult，因此使用Get當使用 Get 的時候必須加上這個,

如果是Post的話就不用加了

以下是View(該include的js檔要記得)


        $(function () {
            $("#GetJsonBtn").click(function () {
                $.ajax({
                    url: '<%=Url.Action("GetJson") %>',
                    type: "Get",
                    dataType: "json",
                    success: SetValue
                });
            });
        });
        function SetValue(data) {
            $('#HtmlTitle').html(data.HtmlTitle);
            $('#HtmlContent').html(data.HtmlContent);
        }
    </script>
    <input type="button" value="利用AJAX抓值(傳回Json)" id="GetJsonBtn" />
    <br />
    <div id="HtmlTitle">
    </div>
    <div id="HtemlDate">
    </div>
    <div id="HtmlContent">
    </div>
</asp:Content>

畫面就沒什麼特別的啦，按下Button之後，就會去Controller中撈回資料，加到div裡面

另外script這樣寫也可以囉


        $(function () {
            $("#GetJsonBtn").click(function () {
                $.getJSON('<%=Url.Action("GetJson") %>', null, SetValue);
            });
        });
        function SetValue(data) {
            $('#HtmlTitle').html(data.HtmlTitle);
            $('#HtmlContent').html(data.HtmlContent);
        }
</script>

參考資料

jQuery.ajax()

jQuery.getJSON()

回首頁