.NET 環境下基於 Ajax 的 MVC 方案：UserControl 封裝與前後端分離

問題背景

ASP.NET WebForms PostBack 模式下 MVC 架構在 Ajax 回呼時失效：回呼返回資料需客戶端 JS 解析更新 DOM，或伺服端手工拼 HTML，導致代碼混亂、門檻高。

提出方案：UserControl 作為 View/Controller

• View：`.ascx` 檔案（標籤 + 伺服器控制項 + 資料繫結）。
• Controller：`.ascx.cs` 邏輯代碼，存取 `Request.Form` 取得參數，綁定資料。
• Model：原有業務邏輯層。

核心元件

1. 客戶端 AjaxHelper.js

// 封裝 XMLHttpRequest
function Updater(ajaxTemplate, output, params, onComplete) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "Ajax.aspx", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (output) document.getElementById(output).innerHTML = xhr.responseText;
            if (onComplete) onComplete(xhr.responseText);
        }
    };
    xhr.send(params);
}

// 序列化 

function SerializeForm(formId) {
    var form = document.getElementById(formId);
    var parts = [];
    for (var i=0; i

2. 伺服端 Ajax.aspx
// Ajax.aspx.cs
protected void Page_Load(object sender, EventArgs e) {
    string template = Request["ajaxTemplate"]; // 如 "Controls/UserInfo.ascx"
    if (!string.IsNullOrEmpty(template)) {
        Control uc = LoadControl(template);
        // 可選：注入參數至 UserControl 公共屬性
        Page.Controls.Add(uc);
        StringWriter sw = new StringWriter();
        HttpContext.Current.Server.Execute(uc, sw, true);
        Response.Write(sw.ToString());
    }
}

3. 使用範例



搜尋


優勢總結

保留 ASP.NET 伺服器控制項與資料繫結優勢，減少手工 HTML 拼接。
MVC 架構清晰，UserControl 可複用於一般 PostBack 頁面。
降低 JS 門檻，後端開發者專注 `.ascx.cs` 邏輯。