ASP.NET 向 JavaScript 傳遞變量的兩種核心方法與互操作實戰

方法一：隱藏控件中轉

<asp:HiddenField ID="hfValue" runat="server" Value="<%= ServerValue %>" />

<script>
    var value = document.getElementById("hfValue").value;
</script>

優點： 類型安全、支援複雜對象序列化（JSON）、不污染全局命名空間。
缺點： 需額外 DOM 查詢、ViewState 增加頁面體積。

方法二：內聯代碼塊直接輸出

<script>
    // 數值/布爾/對象字面量
    var num = <%= NumProperty %>;
    var flag = <%= IsEnabled %>;
    var obj = <%= JsonSerializer.Serialize(Model) %>;

    // 字符串必須加引號
    var str = "<%= StringProperty %>";
    alert("<%= Message %>");
</script>

前提條件：

• 變量必須是 public 屬性/字段（非私有變量）
• 頁面/控件類中定義：public string Num { get; set; }
• 字符串類型需手動加雙引號，防止語法錯誤

JavaScript 與 ASP.NET 深度互操作實戰

1. 客戶端事件綁定伺服器控件

// 正確方式：Attributes 添加客戶端事件
btnDelete.Attributes.Add("onclick", "return confirm('確定刪除？');");

// CheckBox 特殊處理：OnCheckedChanged 為伺服器事件
// 客戶端用 onclick，伺服器用 OnCheckedChanged
chkAgree.Attributes.Add("onclick", "handleAgreeChange(this);");

2. 伺服器端訪問 HTML 控件

<select id="ddlMonth" runat="server">...</select>

// 後台代碼
var ddl = this.FindControl("ddlMonth") as HtmlSelect;
int index = ddl.SelectedIndex;
string value = ddl.Value;

關鍵： 添加 runat="server" 並用 FindControl 強制轉型對應 HTML 控件類型（HtmlSelect、HtmlInputText 等）。

3. JavaScript 讀取伺服器端變量

// 後台
public string UserId = "zhangsan";
public UserInfo CurrentUser = new UserInfo { Name = "張三", Role = "Admin" };

// 前台
<script>
    // 簡單類型
    var userId = "<%= UserId %>"; 
    
    // 複雜對象：序列化為 JSON
    var user = <%= new JavaScriptSerializer().Serialize(CurrentUser) %>;
    console.log(user.Name); // "張三"
</script>

核心原則： 將伺服器端數據序列化為 JavaScript 識別的字面量（字符串、數字、布爾、對象、陣列）。

架構建議：發揮各自長處

「JavaScript 擅長客戶端交互、DOM 操作、即時反饋；ASP.NET 擅長業務邏輯、資料存取、安全驗證。良好結合，事半功倍。」

推薦模式

• 初始化數據： 內聯 JSON 輸出或 HiddenField + JSON
• 異步交互： jQuery AJAX / Fetch API 呼叫 WebMethod / WebAPI
• 表單提交： 標準 PostBack 或 AJAX 提交序列化表單
• UI 邏輯： 純客戶端處理（顯示/隱藏、驗證、動畫）

避坑指南