ASP.NET MVC Ajax 輔助方法完整指南：ActionLink、BeginForm 與非侵入式原理

前置準備

• 引用 jquery.unobtrusive-ajax.js（依賴 jQuery），啟用非侵入式 AJAX。
• Web.config 確認 UnobtrusiveJavaScriptEnabled=true（默認開啟）。

核心輔助方法對比

Ajax.ActionLink 實戰

視圖代碼

<div id="dailydeal">
    @Ajax.ActionLink("點擊獲取每日優惠", "DailyDeal", new AjaxOptions
    {
        UpdateTargetId = "dailydeal",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "Get"
    })
</div>

控制器動作

public ActionResult DailyDeal()
{
    var album = storeDB.Albums.OrderBy(a => a.Price).First();
    return PartialView("_DailyDeal", album);
}

分部視圖 _DailyDeal.cshtml

@model MvcMusicStore.Models.Album
<div>
    <h3>@Model.Title</h3>
    <p>價格: @Model.Price</p>
    <img src="@Model.AlbumArtUrl" alt="@Model.Title" />
</div>

非侵入式原理深度解析

生成的 HTML：

<a data-ajax="true"
   data-ajax-method="Get"
   data-ajax-mode="replace"
   data-ajax-update="#dailydeal"
   href="/Home/DailyDeal">點擊獲取每日優惠</a>

• data-* 屬性：HTML5 標準自定義屬性，瀏覽器忽略不渲染，供 JS 框架讀取。
• jquery.unobtrusive-ajax.js 掃描 [data-ajax=true] 元素，綁定 click/submit 事件，發送 AJAX 請求，根據 data-ajax-update 目標替換內容。
• 零內聯腳本，符合 CSP 安全策略，關注點分離。

Ajax.BeginForm 完整示例：藝術家搜索

視圖

@using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "GET",
    OnFailure = "searchFailed",
    LoadingElementId = "ajax-loader",
    UpdateTargetId = "searchresults"
}))
{
    <input type="text" name="q" placeholder="輸入藝術家名稱" />
    <input type="submit" value="搜索" />
    <img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
}

<div id="searchresults"></div>

<script>
function searchFailed() {
    $("#searchresults").html("對不起，查詢出錯，請重試。");
}
</script>

控制器

public ActionResult ArtistSearch(string q)
{
    var artists = storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
    return PartialView(artists);
}

分部視圖 ArtistSearch.cshtml

@model IEnumerable<MvcMusicStore.Models.Artist>
<ul>
@foreach (var item in Model) {
    <li>@item.Name</li>
}
</ul>

AjaxOptions 關鍵屬性速查

Web.config 全局開關

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

單視圖覆蓋：@{ Html.EnableUnobtrusiveJavaScript(false); }

遷移建議

現代 ASP.NET Core / MVC 6+ 推薦使用 <form data-ajax="true"> 原生屬性或 fetch/axios 手寫 AJAX，配合 TagHelper 封裝，減少對 Microsoft.jQuery.Unobtrusive.Ajax 套件的依賴，提升前端靈活性與類型安全。