ASP.NET MVC + jQuery + Newtonsoft.Json 快樂的AJAX

這是目前我的方案，個人覺得還蠻輕巧自在的。 Controller負責把要輸出的資料序列成json。

Html.ActionUrl 這隻method原來的MVC Toolkit沒有，我隨手加的。

我 是用Newtonsoft.Json作物件序列成JSON，那為什麼不用MS Ajax內建的 System.Web.Script.Serialization.JavaScriptSerializer 來做，是因為他將DateTime序列成字串格式，Client 端無法直接取用。Newtonsoft.Json的部份我也是小改一點，讓他可以做Value Type 的序列化，可參考。

附帶一提，我是架在iis 5.1上測試，本來看到 IIS 6.0 和 ASP.NET 3.5 / VS 2008 的相容性測試，己為會很困難的，大概是測MVC Web Project比較單純吧，裝完 .NET Framework 3.5 再裝 ASP.NET 3.5 Extensions Preview (是的，目前只是preview版)，直接就ok了。

線上

範例下載

底 下的流程 Controller(AjaxTest) -> View(AjaxPage) -> Controller(Ajax, id=1) -> View(AjaxPage) 取得json ->Controller(Ajax, id=2) -> View(AjaxPage) 取得json -> end ，大概是這樣。(如果畫成圖會比較漂亮吧)

ControllerBase.cs

    public class ControllerBase : Controller {
public void RenderJSON(object obj) {
string jsonString = Newtonsoft.Json.JavaScriptConvert.SerializeObject(obj);
            Response.Clear();
            Response.ContentEncoding = Encoding.UTF8;
            Response.ContentType = "application/json";
            Response.Write(jsonString);
            Response.Flush();
            Response.End();
        }
    }

HomeController.cs

    public class HomeController : ControllerBase {

        [ControllerAction]
public void AjaxTest() {
            RenderView("AjaxPage");
        }

        [ControllerAction]
public void Ajax(int id) {
switch (id) {
case 1:              
                    RenderJSON(DateTime.Now.ToString());                    
break;
case 2:
                    Order[] orders = new Order[] {
new Order() {PK=1, Title="B001", OrderDate = DateTime.Now},
new Order() {PK=2, Title="A003", OrderDate = DateTime.Now}
                    };
                    RenderJSON(orders);
break;
case 3:                    
int n1,n2;
int.TryParse(Request["n1"],out n1);
int.TryParse(Request["n2"],out n2);                        
                    RenderJSON(n1 + n2);
break;
            }
        }
    }
}

AjaxPage.aspx

  <script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
var actionUrl1 = '<%=Html.ActionUrl("ajax", "/1") %>';
var actionUrl2 = '<%=Html.ActionUrl("ajax", "/2") %>';
var actionUrl3 = '<%=Html.ActionUrl("ajax", "/3") %>';
       $("#link1").click(function() {
            $.getJSON(actionUrl1, { }, function(json){
alert("Server Time: " + json);
            });

        });

        $("#link2").click(function() {
            $.getJSON(actionUrl2, { }, function(json){
alert("total " + json.length.toString() + " records");
for(var i=0;i<json.length;i++) {
alert(json[i].PK + ", " + json[i].Title + ", " + json[i].OrderDate);
              }              
            });
        });

        $("#t1,#t2").change(function() {
            $.getJSON(actionUrl3, { "n1": $("#t1").val(),"n2": $("#t2").val() }, function(json){
              $("#t3").val(json.toString());
            });
        });        
    });
</script>

<h3>
    Ajax Page</h3>
<ol>
<li><a id="link1" href="#">Get Server Time</a></li>
<li><a id="link2" href="#">Return Object</a></li>
<li>
<input type="text" name="t1" id="t1" maxlength="4" style="width: 40px" />
      +
<input type="text" name="t2" id="t2" maxlength="4" style="width: 40px" />
      =
<input type="text" name="t3" id="t3" maxlength="4" readonly="readonly" style="width: 40px" />
</li>    
</ol>