ASP.NET Web Forms Button 控制項完整指南：提交按鈕、命令按鈕、OnClick 事件與 PostBack 機制

Button 是 Web Forms 最基礎的互動控制項，支援**提交按鈕**（Submit）與**命令按鈕**（Command）兩種模式，觸發伺服器端 PostBack 執行後端邏輯。本文涵蓋 Button 類型差異、事件處理、驗證群組、客戶端確認、防重複提交等實務技巧。

Button 兩種運作模式

基本宣告與屬性

<asp:Button ID="btnSubmit" runat="server" 
    Text="送出" 
    OnClick="btnSubmit_Click"
    CssClass="btn btn-primary"
    UseSubmitBehavior="true"
    ValidationGroup="vgForm"
    CausesValidation="true" />

核心屬性速查

Click 事件處理：表單提交範例

前端

<form runat="server">
    <div>
        <label>姓名：</label>
        <asp:TextBox ID="txtName" runat="server" />
    </div>
    <asp:Button ID="btnSubmit" Text="提交" runat="server" OnClick="btnSubmit_Click" />
    <br /><br />
    <asp:Label ID="lblResult" runat="server" ForeColor="Green" />
</form>

後端

<script runat="server">
    protected void btnSubmit_Click(object sender, EventArgs e) {
        lblResult.Text = "你好，" + txtName.Text + "！歡迎來到 ASP.NET Web Forms。";
    }
</script>

Command 事件處理：Repeater 列內按鈕

前端

<asp:Repeater ID="rptItems" runat="server" OnItemCommand="rptItems_ItemCommand">
    <ItemTemplate>
        <div>
            <span><%# Eval("Name") %></span>
            <asp:Button ID="btnEdit" runat="server" 
                Text="編輯" 
                CommandName="Edit" 
                CommandArgument='<%# Eval("ID") %>' />
            <asp:Button ID="btnDelete" runat="server" 
                Text="刪除" 
                CommandName="Delete" 
                CommandArgument='<%# Eval("ID") %>'
                OnClientClick="return confirm('確定刪除？');" />
        </div>
    </ItemTemplate>
</asp:Repeater>

後端

<script runat="server">
    protected void rptItems_ItemCommand(object source, RepeaterCommandEventArgs e) {
        string id = e.CommandArgument.ToString();
        
        switch (e.CommandName) {
            case "Edit":
                Response.Redirect("Edit.aspx?id=" + id);
                break;
            case "Delete":
                // 執行刪除邏輯
                BindData();
                break;
        }
    }
</script>

驗證群組：多表單頁面獨立驗證

<!-- 登入表單 -->
<asp:TextBox ID="txtLoginEmail" runat="server" />
<asp:RequiredFieldValidator ControlToValidate="txtLoginEmail" ValidationGroup="vgLogin" ... />
<asp:Button ID="btnLogin" Text="登入" ValidationGroup="vgLogin" runat="server" />

<!-- 註冊表單 -->
<asp:TextBox ID="txtRegEmail" runat="server" />
<asp:RequiredFieldValidator ControlToValidate="txtRegEmail" ValidationGroup="vgRegister" ... />
<asp:Button ID="btnRegister" Text="註冊" ValidationGroup="vgRegister" runat="server" />

同頁面不同表單設定不同 ValidationGroup，按鈕只觸發同群組驗證。

客戶端確認與防重複提交

OnClientClick 確認對話框

<asp:Button ID="btnDelete" Text="刪除" runat="server" 
    OnClick="btnDelete_Click"
    OnClientClick="return confirm('確定要刪除此項目嗎？');" />

回傳 false 取消 PostBack，true 繼續提交。

防重複提交：雙重保護

<asp:Button ID="btnSave" Text="儲存" runat="server" 
    OnClick="btnSave_Click"
    OnClientClick="this.disabled=true; this.value='處理中...'; __doPostBack(this.name, '');" 
    UseSubmitBehavior="false" />

後端完成後可透過 ScriptManager.RegisterStartupScript 重新啟用按鈕。

PostBackUrl：跨頁面提交

<asp:Button ID="btnGoToResult" Text="前往結果頁" runat="server" 
    PostBackUrl="~/Result.aspx" />

目標頁面取得來源頁面控制項值：

// Result.aspx.cs
protected void Page_Load() {
    if (PreviousPage != null && PreviousPage.IsCrossPagePostBack) {
        TextBox txt = (TextBox)PreviousPage.FindControl("txtName");
        if (txt != null) lbl.Text = "來自上一頁：" + txt.Text;
    }
}

Button vs LinkButton vs ImageButton 比較

常見問題排查

• Click 事件未觸發：檢查 AutoEventWireup="true"、方法簽章 void Method(object sender, EventArgs e)、CausesValidation 導致驗證失敗阻擋
• CommandArgument 為空：確認 CommandArgument 屬性繫結語法正確、資料來源欄位存在
• 跨頁面 PostBack 取不到值：目標頁面需檢查 PreviousPage.IsCrossPagePostBack、PreviousPage 不為 null
• UpdatePanel 內按鈕不觸發：確認按鈕在 ContentTemplate 內、ChildrenAsTriggers="true" 或明確設定 AsyncPostBackTrigger
• 重複提交資料庫寫入多筆：實作防重複提交（客戶端 disable + 伺服器端 Token/Session 檢查）

Button 控制項看似簡單，但掌握其兩種模式、驗證群組、客戶端/伺服器端協作細節，是建構穩健 Web Forms 表單互動的關鍵。下一節將介紹 TextBox 文字輸入控制項完整應用。

1. 上一篇文章： ASP.NET Web Forms 資料繫結架構總覽：支援控制項、資料來源類型與 DataBind 流程
2. 下一篇文章： ASP.NET Web Forms TextBox 控制項完整指南：文字輸入、密碼、多行、AutoPostBack 即時回傳與驗證整合

ASP.NET 基礎

GridView 取得行索引：JavaScript 客戶端實作 (無 Postback)

場景 GridView 每行有一「選擇」按鈕，點擊後**不想

RDLC 報表巧用 Sum 函式實現資料循環：將多筆資料合併顯示在單一列的完整技巧

情境痛點 RDLC (Report Definition L

ASP.NET 移除 ViewState 完整指南：Base64 解碼與替代儲存方案

為什麼要移除 ViewState？ 在 ASP.NET We

.NET 使用 XSLT 轉換 XML 文件完整教學

XSLT 基礎概念 XSL (eXtensible S