ASP.NET MVC 案例教程第五篇：整合 AJAX 實現非同步驗證、ASP.NET AJAX 與 jQuery 兩種方案

從同步驗證起步，重構為非同步

同步驗證：ModelState + Html.ValidationMessage

// View: Release.aspx
<%= Html.TextBox("Title") %>
<%= Html.ValidationMessage("TitleValidator") %>
<%= Html.TextArea("Content") %>
<%= Html.ValidationMessage("ContentValidator") %>

// Controller
[HttpPost]
public ActionResult DoRelease(AnnounceInfo model) {
    if (string.IsNullOrEmpty(model.Title))
        ModelState.AddModelError("TitleValidator", "標題必填");
    if (string.IsNullOrEmpty(model.Content))
        ModelState.AddModelError("ContentValidator", "內容必填");

    if (!ModelState.IsValid) return View("Release", model); // 同步回傳 View

    _service.Create(model);
    return RedirectToAction("Index"); // PRG
}

ASP.NET AJAX 方案：UpdatePanel 風格（舊版 MVC Futures）

• 使用 Ajax.BeginForm、AjaxOptions 設定 UpdateTargetId、OnSuccess 等。
• 需引用 MicrosoftMvcAjax.js。
• 目前已不建議新專案使用，保留相容性。

jQuery 方案（推薦現代標準）

View：移除驗證訊息 span，改用 JSON 回傳

<input type="text" id="Title" name="Title" />
<span id="TitleError" class="error"></span>
<textarea id="Content" name="Content"></textarea>
<span id="ContentError" class="error"></span>
<button id="btnSubmit">發布</button>

<script src="jquery.js"></script>
<script>
$("#btnSubmit").click(function() {
    $.post("/Announce/DoReleaseAjax", { Title: $("#Title").val(), Content: $("#Content").val() }, function(result) {
        if (result.Success) {
            window.location = result.RedirectUrl; // PRG
        } else {
            $("#TitleError").text(result.Errors.Title || "");
            $("#ContentError").text(result.Errors.Content || "");
        }
    }, "json");
});
</script>

Controller：回傳 JsonResult

public ActionResult DoReleaseAjax(string Title, string Content) {
    var errors = new Dictionary();
    if (string.IsNullOrEmpty(Title)) errors["Title"] = "標題必填";
    if (string.IsNullOrEmpty(Content)) errors["Content"] = "內容必填";

    if (errors.Count > 0)
        return Json(new { Success = false, Errors = errors });

    _service.Create(new AnnounceInfo { Title = Title, Content = Content });
    return Json(new { Success = true, RedirectUrl = Url.Action("Index") });
}

比較表

最佳實務建議

1. 新專案**首選 jQuery + JSON**，前後端分離最徹底。
2. Controller 驗證邏輯提煉為 IValidator 服務，Action 僅協調。
3. 統一錯誤回傳格式：{ Success, Errors: { field: message }, RedirectUrl }。
4. 搭配 jquery.validate.unobtrusive 實現客戶端預驗證，減少伺服器負載。

MVC + jQuery AJAX 讓非同步表單驗證變得簡單、可測試、體驗優異，是現代 Web 開發的標準範式。