ASP.NET TextBox ReadOnly=true 後台取不到值？三種解決方案徹底解析

問題根因

ASP.NET 為防止惡意竄改，伺服器端渲染時若 ReadOnly="true"，Postback 時會忽略客戶端修改的值，直接使用 ViewState 中的原始值（通常為空）。這是安全機制，非 Bug。

方案一：客戶端模擬唯讀 (不設定伺服器 ReadOnly)

<asp:TextBox ID="TextBox1" runat="server" onfocus="this.blur();" />

• 原理： 獲得焦點立即失焦，使用者無法編輯，但瀏覽器仍會提交表單值
• 缺點： 螢幕閱讀器可能無法朗讀；Tab 鍵導航會跳過；行動裝置虛擬鍵盤可能閃爍
• 適用： 簡單唯讀顯示、無無障礙需求

方案二：後台透過 Request.Form 直接讀取 (保留伺服器 ReadOnly)

<asp:TextBox ID="TextBox1" runat="server" ReadOnly="true" />

// 後台
string value = Request.Form[TextBox1.UniqueID]; // 建議用 UniqueID 而非 ID
// 或
string value = Request.Form["TextBox1"]; // 若無 MasterPage/命名容器

• 原理： 繞過控件的 LoadPostData，直接讀取原始 HTTP 表單資料
• 優點： 保留語意上的唯讀、無障礙友好、螢幕閱讀器可讀
• 缺點： 需手動對應控件名稱、無法觸發 TextChanged 事件、驗證器可能失效
• 適用： 後台計算填充、JavaScript 設值、需無障礙合規

方案三：Page_Load 動態添加 readonly 屬性 (最推薦)

protected void Page_Load(object sender, EventArgs e) {
    if (!IsPostBack) {
        TextBox1.Attributes["readonly"] = "readonly"; // 小寫 readonly
    }
}

• 原理： 伺服器端 ReadOnly 屬性為 false，正常處理 Postback；瀏覽器端渲染出 readonly="readonly" 防止使用者編輯
• 優點： 完美平衡：後台正常取值、前台不可編輯、觸發 TextChanged、驗證器生效、無障礙友好
• 注意： 必須在 !IsPostBack 中執行，否則每次 Postback 重複添加屬性
• 適用： **絕大多數業務場景**，最佳實踐

方案對比總結表

延伸：GridView/Repeater 中的 TextBox 唯讀

// RowDataBound 中動態設置
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.DataRow) {
        var txt = (TextBox)e.Row.FindControl("TextBox1");
        txt.Attributes["readonly"] = "readonly";
    }
}

同理適用於所有輸入類控件。