C#_MVC_ajax for form

在上一篇介紹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();
}