WebForms 開發常需前後端互動。本文系統整理四大核心場景與對應實作模式。
| 模式 | 原理 | 優點 | 缺點 |
|---|---|---|---|
| 隱藏按鈕 + __doPostBack | JS 觸發隱藏 Button Click 事件 | 完整生命週期、支援 ViewState/驗證 | 完整 PostBack、頁面重整 |
內嵌程式碼塊 <%=Method()%> | 渲染階段執行 C# 回傳字串給 JS 變數 | 簡單、無 PostBack | 僅限渲染期、無法互動 |
| PageMethods / WebMethod (AJAX) | [WebMethod] 靜態方法 + ScriptManager EnablePageMethods | 輕量 AJAX、JSON 序列化、無 ViewState | 需 ScriptManager、靜態方法無法存取控件 |
| UpdatePanel 部分更新 | AJAX 觸發伺服器事件、局部刷新 | 保留 WebForms 開發習慣 | ViewState 傳輸大、非標準 AJAX |
// 後端
[WebMethod]
public static string GetServerTime()
{
return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
}
// 前端
// 後端
public string CurrentUser { get; set; } = "Admin";
// 前端 (內嵌程式碼塊，渲染時注入)
var user = '<%= CurrentUser %>';
var config = <%= JsonSerializer.Serialize(new { theme="dark", lang="zh" }) %>;
HttpUtility.JavaScriptStringEncode 防 XSS。JsonSerializer.Serialize (System.Text.Json) 或 JavaScriptSerializer。直接存取不可行 (伺服器端執行早於用戶端)。替代方案：
<input type="hidden" id="hfClientData" runat="server" />，JS 寫值，PostBack 時 C# 讀 hfClientData.Value。__doPostBack('btn', jsonData)，C# 端 Request["__EVENTARGUMENT"] 取得。
3. AJAX 回傳：PageMethods 回傳 JSON 物件，C# 邏輯在伺服器端完成，結果回傳給 JS。
| 時機 | 方法 | 範例 |
|---|---|---|
| 渲染階段 | Page.ClientScript.RegisterStartupScript | RegisterStartupScript(this.GetType(), "alert", "alert('Hello');", true); |
| 部分更新 (UpdatePanel) | ScriptManager.RegisterStartupScript | ScriptManager.RegisterStartupScript(this, GetType(), "key", "initChart();", true); |
| 非 AJAX 完整回傳 | Response.Write("") | 不推薦：破壞 HTML 結構、時機難控 |
JavaScriptStringEncode/HtmlEncode/UrlEncode)。
3. 最小權限：[WebMethod] 僅暴露必要業務邏輯，避免直接暴露 DAL/DB 操作。
4. 現代化替代：新專案建議 ASP.NET Core + WebAPI + fetch/axios 前端分離，徹底解耦前後端。
