MVC 使用Jquery實現AJax

在上一篇介紹MVC中的Ajax實現方法的時候，曾經提到了除了使用Ajax HTML Helper方式來實現之外，Jquery也是實現Ajax的另外一種方案。

通過get方法實現AJax請求

View

<script type="text/javascript">    function GetTime() {        $.get("Home/GetTime", function (response) {            $("#myPnl").html(response);        });        return false;    }</script><div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"></div><a href="#" onclick="return GetTime();">Click Me</a>

Controller

public ActionResult GetTime(){    return Content(DateTime.Now.ToString());}

通過post方法實現Form的Ajax提交

View

@model MvcAjax.Models.UserModel@{    ViewBag.Title = "AjaxForm";}<script type="text/javascript">    $(document).ready(function () {        $("form[action$='SaveUser']").submit(function () {            $.post($(this).attr("action"), $(this).serialize(), function (response) {                $("#myPnl").html(response);            });            return false;        });    });    </script><div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"></div>@using (Html.BeginForm("SaveUser", "Home")){    <table>        <tr>            <td>                @Html.LabelFor(m => m.UserName)            </td>            <td>                @Html.TextBoxFor(m => m.UserName)            </td>        </tr>        <tr>            <td>                @Html.LabelFor(m => m.Email)            </td>            <td>                @Html.TextBoxFor(m => m.Email)            </td>        </tr>        <tr>            <td>                @Html.LabelFor(m => m.Desc)            </td>            <td>                @Html.TextBoxFor(m => m.Desc)            </td>        </tr>        <tr>            <td colspan="2">                <input type="submit" value="Submit" />            </td>        </tr>    </table>} 

Model

using System.ComponentModel.DataAnnotations;namespace MvcAjax.Models{    public class UserModel    {        [Display(Name = "Username")]        public string UserName { get; set; }        [Display(Name = "Email")]        public string Email { get; set; }        [Display(Name = "Description")]        public string Desc { get; set; }    }}

Controller

[HttpPost]public ActionResult SaveUser(UserModel userModel){    //Save User Code Here    //......    return Content("Save Complete!");}   

以上代碼實現了Jquery POST提交資料的方法。

通過查看以上兩種Jquery方式的Ajax實現方法，和之前AJax HTML Helper比較可以發現其實Controller都是相同的。

採用Jquery方式提交資料的的主要實現方案就是通過Jquery的get或者post方法，發送請求到MVC的controller中，然後處理擷取的response，更新到頁面中。

注意點：

無論是使用超連結和form方式來提交請求，javascript的方法始終都有一個傳回值false，用來防止超連結的跳轉或者是form的實際提交。

這個地方就會出現一個疑問：

如果針對該頁面禁止了Javascript指令碼，那麼該頁面就是跳轉或者是form就是提交，返回的ActionResult處理就會出現問題了。

這個時候就需要在Controller中判斷該請求是否是Ajax請求，根據不同的情況返回不同的ActionResult：

[HttpPost]public ActionResult SaveUser(UserModel userModel){    //Save User Code Here    //......    if (Request.IsAjaxRequest())        return Content("Save Complete!");    else        return View();}