AJAX 非同步新增資料後，三種前端更新策略比較：InnerHTML / 模板渲染 / 資料綁定

情境

使用者在當前頁面按下「新增」，透過 AJAX 送出資料，伺服器回應成功後，需在**不重整頁面**情況下，將新資料顯示於列表中。

策略一：伺服器端渲染 HTML 片段 → innerHTML 替換 (本文採用)

優點

• 複用現有 Razor/View 模板，邏輯集中於伺服器。
• 前端極簡單：document.getElementById('list').innerHTML = xhr.responseText;
• 樣式、結構與初始載入完全一致。

缺點

• 回傳較大 HTML 字串，頻寬較高。
• 若列表極長，整段替換會閃爍、失去捲軸位置。

實作流程

1. 前端：表單 onsubmit 呼叫 ajaxPost()，成功回呼 document.getElementById('tb').innerHTML = data;。
2. 後端 (Razor)：return PartialView("_ListPartial", model); 回傳 <tr>...</tr> 片段。
3. 容器：<table id="tb"><tbody>...初始資料...</tbody></table>。

策略二：伺服器端回傳 JSON → 前端 JS 模板渲染 (Mustache / Handlebars / template literals)

優點

• 傳輸純資料，頻寬極小。
• 前端完全掌控渲染邏輯，支援動畫、虛擬化清單。

缺點

• 模板邏輯重複 (伺服器端 Razor + 前端 JS 模板)。
• SEO 不友善 (純 CSR)。

範例 (ES6 Template Literals)

fetch('/api/items', { method:'POST', body:JSON.stringify(formData) })
  .then(r => r.json())
  .then(item => {
    const html = `${item.name}${item.price}`;
    document.querySelector('#tb tbody').insertAdjacentHTML('beforeend', html);
  });

策略三：伺服器端回傳 JSON → 前端 MVVM 框架資料綁定 (Vue / React / Knockout)

優點

• 資料與視圖分離，狀態管理清晰。
• 複雜互動 (排序、篩選、分頁) 維護容易。

缺點

• 引入框架學習曲線、建置複雜度。
• 對傳統 ASP.NET WebForms/MVC 專案侵入性大。

本文實作細節 (策略一)

// Controller
[HttpPost]
public ActionResult Create(ItemForm form)
{
    if (!ModelState.IsValid) return Json(new { success=false, errors=ModelState.Values.SelectMany(v=>v.Errors).Select(e=>e.ErrorMessage) });
    var item = _service.Create(form);
    var list = _service.GetAll(); // 重新查詢完整列表
    return PartialView("_ListPartial", list); // 回傳完整 tbody HTML
}

@* _ListPartial.cshtml *@
@model IEnumerable
@foreach (var item in Model) {
  
    @item.Name
    @item.Price
    刪除
  
}

// 前端 jQuery AJAX
$('#createForm').submit(function(e){
    e.preventDefault();
    $.post('@Url.Action("Create")', $(this).serialize(), function(html){
        $('#tb tbody').html(html); // 直接替換 tbody 內容
        $('#createForm')[0].reset();
    });
});

執行畫面

選擇建議

結語

AJAX 更新列表無銀彈，依專案架構、團隊熟悉度、複雜度選擇最適策略。傳統 MVC 專案「PartialView + innerHTML」最務實；若朝前後端分離演進，建議逐步導入 JSON API + 前端渲染。