ASP.NET 前端 JavaScript 與後端 C# 互動的四大核心方法

前言

在 ASP.NET Web Forms 開發中，前端 JavaScript 與後端 C# 代碼的互動是常見需求。本文整理四種主流實現方式，並附上完整代碼範例，幫助開發者根據場景選擇最適合的方案。

方法一：AjaxPro 框架（推薦用於複雜邏輯）

使用 AjaxPro 開發框架，只需在後端方法上標註 [AjaxPro.AjaxMethod] 屬性，前端 JavaScript 即可直接呼叫後端 C# 方法，實現無縫跨層調用。

// 後端 C#
[AjaxPro.AjaxMethod]
public string GetServerTime() {
    return DateTime.Now.ToString();
}

// 前端 JS
var result = MyNamespace.MyClass.GetServerTime();
alert(result.value);

方法二：內嵌伺服器端代碼塊（簡單場景適用）

將後端方法聲明為 public 或 protected，前端透過 <%= %> 語法直接輸出方法回傳值。

// 後端 .cs
public string Str() {
    return "前端 JS 執行後端 C# 方法...";
}

// 前端 .aspx
<script type="text/javascript">
    var msg = "<%= Str() %>";
    alert(msg);
</script>

注意：此方式僅支援頁面載入時單向輸出，無法實現動態互動。

方法三：Session 狀態管理（跨頁面數據共享）

利用 Session 變量在前後端間傳遞數據，適合用戶登入狀態、購物車等跨請求場景。

// 後端寫入
if (Session["siteName"] == null)
    Session["siteName"] = "";
Session["siteName"] = "我的網站";

// 前端讀取
var siteName = "<%= Session[\"siteName\"] %>";

方法四：隱藏按鈕觸發 Postback（需前端驗證時）

頁面放置一個 style="display:none" 的 asp:Button，前端 JS 通過 document.getElementById().click() 模擬點擊，觸發後端 OnClick 事件。此法可在 Postback 前完成前端驗證。

<!-- 前端 .aspx -->
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="display:none;" />
<input type="button" value="保存" onclick="GetBehind(); return false;" />

<script>
function GetBehind() {
    if (validateForm()) // 前端驗證
        document.getElementById("Button1").click();
}
</script>

// 後端 .cs
protected void Button1_Click(object sender, EventArgs e) {
    // 執行保存邏輯
}

反向操作：後端 C# 執行前端 JavaScript

1. RegisterStartupScript

頁面載入完成後註冊啟動腳本：Page.RegisterStartupScript("key", "<script>alert('Hello');</script>");

2. 隱藏域/ Literal 控件傳值

前端將計算結果寫入 <input type="hidden"> 或 <asp:Literal>，後端讀取 HiddenField.Value 或 Literal.Text 獲取數據。

// 前端 JS
function GetTitleID(obj) {
    var val = obj ? "type," + obj : "type,0";
    document.getElementById("HiddenField1").value = val;
}

// 後端讀取
string hiddenValue = this.HiddenField1.Value;

總結建議

• 現代專案：優先使用 ASP.NET Core + Web API + fetch/axios，避免 Web Forms 老舊模式。
• 維護舊專案：AjaxPro 適合複雜邏輯；內嵌代碼塊適合簡單輸出；隱藏按鈕適合需前端驗證的 Postback。
• 安全性：所有跨層傳值務必做輸入驗證與輸出編碼，防範 XSS 攻擊。