如何構建ASP.NET MVC4&JQuery&AJax&JSon示例

背景：

　　博客中將構建一個小示例，用於演示在ASP.NET MVC4項目中，如何使用JQuery Ajax。

　　直接查看JSon部分

步驟：

1，添加控制器(HomeController)和動作方法(Index),並為Index動作方法添加視圖(Index.cshtml),視圖中HTML如下：

輸入你的姓名：
<input type="text" id="txtName"/><br/>
輸入你的年齡：
<input type="text" id="txtAge" /><br />
<button type="button" id="btn1">提交</button>
<button type="button" id="btn2">清空</button>
<p id="display"></p>

　　視圖中包含兩個文本框，分別用來輸入名字和年齡，包含連個按鈕，分別用來提交信息和清空文本框的內容，同時包含一個段落，用來顯示Ajax返回的數據信息。

2，在Home控制器中添加另外一個動作方(AddUsers),用來接收並處理視圖傳遞過來的數據，並返回執行結果給視圖，代碼如下：

        public ActionResult AddUsers()
        {
            var my = new MyModel();
            string result = string.Empty;
            if(Request.IsAjaxRequest())
            {
                this.UpdateModel(my);
                string name = my.Name;
                int age = my.Age;
                if (age < 18) result = name+"的文章好爛啊";
                else result = name+",記得爛也要寫";
            }
            return Content(result);
        }

　　如代碼所示：直接用Content返回一個字符串。

　　或者是返回一個 ContentResult()對象，與上面的代碼類似(所以折疊了)，代碼如下：

        public ActionResult DoWithUsers()
        {
            var actionResult = default(ContentResult);
            var my = new MyModel();
            try
            {
                this.UpdateModel(my);
                string name = my.Name;
                int age = my.Age;
                string temp = "";
                if (age < 18) temp = "的文章好爛啊";
                else temp = ",記得爛也要寫";
                actionResult = new ContentResult()
                {
                    Content = name + temp
                };  
            }
            catch(Exception ex)
            {
                return null;
            }
            return actionResult;
        }

3，修改Jquery&Ajax代碼：

    $(document).ready(function () {
        $("#btn1").click(function () {
            var data = "";
            var name = $("#txtName").val();
            var age = $("#txtAge").val();
            data += "&Name=" + encodeURI(name);
            data += "&Age=" + encodeURI(age);
            $.ajax({
                async: true,
                cache: false,
                timeout: 60 * 60 * 1000,
                data: data,
                type: "GET",
                datatype: "JSON",
                url: "/Ajax/AddUsers",
                success:function(result)
                {
                    $("#display").text(result);
                },
                error: function (result) {
                    $("#display").html("error");
                },
            })
        });

4，運行效果如圖：

 以上，最簡單的ASP.NET MVC4&JQuery&AJax示例完成了。

---

以Json方式發送Action處理后的結果：

更多的情況下，不止是返回一個字符串，而是以Json的方式返回結果。

5，修改Action如下：

        public ActionResult DoWithUsers()
        {
            var my = new MyModel();
            try
            {
                this.UpdateModel(my);
                string name = my.Name;
                int age = my.Age;
                string temp = "";
                if (age < 18) temp = "的文章好爛啊";
                else temp = ",記得爛也要寫";
                JavaScriptSerializer jss = new JavaScriptSerializer();
                return Json(jss.Serialize(new { Name = name, Message = temp }), JsonRequestBehavior.AllowGet);
            }
            catch(Exception ex)
            {
                return null;
            }
        }

說明：JSon方法返回一個JSonResult，而JSonResult同樣是繼承自ActionResult的。

6，修改AJax部分，代碼如下：

                success:function(result)
                {
                    result = JSON.parse(result);
                    $("#display").text(result.Name + result.Message);
                },

運行效果一致。
以上，最簡單的ASP.NET MVC4&JQuery&AJax&JSon示例完成。