ASP.NET MVC AJAX 完全指南：AjaxHelper、Partial View 與 JSON 交互

前置準備：必須引入的腳本文件

在 `_Layout.cshtml` 或視圖中，**順序固定** 引入：

對應 NuGet 包：`Microsoft.jQuery.Unobtrusive.Ajax`。此庫解析 `data-ajax-*` 屬性，實現無侵入式 AJAX。

核心輔助方法：Ajax.ActionLink
生成帶 AJAX 行為的超鏈接 `` 標籤。

生成的 HTML：
   刪除用戶



核心輔助方法：Ajax.BeginForm
以 AJAX 方式提交表單，無刷新體驗。
 m.Name)
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Name)
    </div>
    <button type="submit" class="btn btn-primary">新增</button>
}


Partial View (分部視圖) 渲染策略

方式一：Html.Partial / Html.RenderPartial

**同步**渲染，直接寫入響應流 (RenderPartial) 或返回字符串 (Partial)。
**不執行**子 Action，僅使用當前 ViewData/Model 中的數據。
適用於：頁面佈局片段 (導航欄、側邊欄)、簡單數據展示。


方式二：Html.Action / Html.RenderAction

**執行**獨立的 Child Action 方法 (需標記 `[ChildActionOnly]`)。
Child Action 可有自己的邏輯、數據庫查詢、返回獨立模型。
適用於：複雜獨立組件 (購物車摘要、推薦列表、動態菜單)。


選擇決策表

場景
推薦方式
理由

頁面佈局片段，無獨立邏輯
Partial / RenderPartial
無額外 Action 執行開銷
需要獨立數據查詢/業務邏輯
Action / RenderAction
關注點分離，可緩存 (OutputCache)
AJAX 回調更新局部區域
Controller 返回 PartialViewResult
服務端渲染 HTML 片段，前端直接 innerHTML



Controller 返回 JSON 數據

實戰模式：AJAX 分頁列表

1. 列表容器視圖

2. 分部視圖 _UserList.cshtml
public ActionResult List(int page = 1)
{
    var data = _service.GetPaged(page, 10);
    if (Request.IsAjaxRequest()) // 或 Request.Headers["X-Requested-With"] == "XMLHttpRequest"
        return PartialView("_UserList", data);
    return View(data); // 首次完整頁面
}


常見問題與最佳實踐

問題
解決

AJAX 請求返回完整頁面 (含 Layout)
Controller 中判斷 `Request.IsAjaxRequest()` 返回 `PartialView`；或 Layout 中 `@if (!Request.IsAjaxRequest()) { @RenderBody() }`
驗證失效：動態添加的表單不驗證
AJAX 返回內容後調用 `$.validator.unobtrusive.parse("#formId")` 重新解析
防偽令牌 (AntiForgeryToken) 驗證失敗
在 `AjaxOptions` 中添加 `OnBegin = "addAntiForgeryToken"`，JS 中手動添加 Header: `xhr.setRequestHeader("RequestVerificationToken", token)`
IE 緩存 GET 請求
設置 `cache: false` 在 `$.ajaxSetup` 或 Action 返回 `Response.CacheControl = "no-cache"`
文件上傳 AJAX 化
原生 `AjaxHelper` 不支持文件。使用 `FormData` + `$.ajax({ processData: false, contentType: false })` 或插件 (jquery.form.js)



現代化替代：Fetch API + ASP.NET Core

總結
ASP.NET MVC 的 `AjaxHelper` (`ActionLink`/`BeginForm`) 配合 `jquery.unobtrusive-ajax` 提供了**聲明式、無侵入**的 AJAX 體驗，適合傳統多頁應用 (MPA) 快速增強交互。核心掌握：**`AjaxOptions` 配置、Partial View 選擇策略、Controller 區分 AJAX/普通請求、驗證與防偽令牌整合**。新項目建議直接採用 **Fetch API / Axios + ASP.NET Core Web API** 架構，前後端分離，體驗更佳、生態更現代。