ASP.NET MVC 入門實作：使用 AJAX 實現非同步發表評論功能（Microsoft AJAX 與 jQuery 兩種寫法）

前言

ASP.NET MVC Beta 版內建支援 Microsoft AJAX 與 jQuery 兩大 JavaScript 框架。本文示範使用 System.Web.Mvc.Ajax 命名空間的 Helper 方法，實作非同步發表評論功能。

引入必要腳本

<script src="/Content/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Content/MicrosoftMvcAjax.js" type="text/javascript"></script>

使用 Ajax.BeginForm 實作非同步表單

寫法一： 使用 Ajax.BeginForm 表單 Helper

<%= Ajax.BeginForm("CreateComment", new AjaxOptions { UpdateTargetId = "commentsList" }) %>
    <%= Html.TextArea("commentText") %>
    <input type="submit" value="發表" />
<% Html.EndForm(); %>

<div id="commentsList"><!-- 此處更新評論列表 --></div>

寫法二： 使用 Ajax.ActionLink 觸發非同步請求

<%= Ajax.ActionLink("載入更多評論", "LoadMore", new AjaxOptions { UpdateTargetId = "commentsList" }) %>

關鍵屬性說明

• UpdateTargetId：指定要更新的 DOM 元素 ID。
• HttpMethod：預設 POST，可指定 GET。
• OnSuccess、OnFailure、OnComplete：客戶端回呼函數。
• LoadingElementId：載入中顯示的元素 ID。

jQuery 替代方案

專案 Scripts 目錄亦內含 jquery-1.x.x.js，若偏好 jQuery，可直接使用 $.ajax、$.post 等原生 API，搭配 Controller 回傳 JsonResult 或 PartialViewResult 更具彈性。

結語

ASP.NET MVC 內建 AJAX Helper 降低前端非同步開發門檻，配合 jQuery 可滿足更複雜互動需求。實務上建議以 jQuery 為主，搭配 Web API 或 MVC Controller 回傳 JSON，架構更清晰。