ASP.NET GridView 刪除確認對話框實作：防止誤刪的最佳實踐

需求背景

GridView 內建 CommandField 可快速新增刪除功能，但缺乏確認機制，易造成使用者誤點刪除導致資料遺失。本文示範使用 TemplateField 搭配 JavaScript confirm() 實作刪除前確認。

實作步驟

步驟 1：定義 TemplateField 刪除欄位

<asp:TemplateField HeaderText="刪除" ShowHeader="False">
    <ItemStyle ForeColor="Red" />
    <ItemTemplate>
        <asp:LinkButton ID="BtnDelete" runat="server" 
            CausesValidation="False" 
            CommandName="Delete" 
            Text="刪除">
        </asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>

步驟 2：加入客戶端確認腳本

<asp:TemplateField HeaderText="刪除" ShowHeader="False">
    <ItemStyle ForeColor="Red" />
    <ItemTemplate>
        <asp:LinkButton ID="BtnDelete" runat="server" 
            CausesValidation="False" 
            CommandName="Delete" 
            Text="刪除" 
            OnClientClick="return confirm('確認要刪除此筆資料嗎？')">
        </asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>

核心屬性解析

完整 GridView 範例

<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="Id" 
    OnRowDeleting="gvData_RowDeleting">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="編號" />
        <asp:BoundField DataField="Name" HeaderText="名稱" />
        <asp:TemplateField HeaderText="操作">
            <ItemTemplate>
                <asp:LinkButton ID="BtnDelete" runat="server" 
                    CausesValidation="False" 
                    CommandName="Delete" 
                    Text="刪除" 
                    OnClientClick="return confirm('確定要刪除 【<%# Eval("Name") %>】 嗎？')">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

後端刪除事件處理

protected void gvData_RowDeleting(object sender, GridViewDeleteEventArgs e) 
{
    // 取得主鍵值
    int id = Convert.ToInt32(gvData.DataKeys[e.RowIndex].Value);
    
    // 執行刪除邏輯
    using (var conn = new SqlConnection(connStr))
    using (var cmd = new SqlCommand("DELETE FROM Table WHERE Id=@Id", conn))
    {
        cmd.Parameters.AddWithValue("@Id", id);
        conn.Open();
        cmd.ExecuteNonQuery();
    }
    
    // 重新繫結資料
    BindGridView();
}

進階優化：自訂確認訊息

動態顯示資料名稱增強使用者辨識度：

OnClientClick='return confirm("確定刪除 【<%# Eval("Name").ToString().Replace("\"", "\\\"") %>】 嗎？")'

替代方案對比

Bootstrap Modal 實作範例

<!-- Modal 結構 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">確認刪除</h5>
            </div>
            <div class="modal-body">
                確定要刪除  嗎？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">刪除</button>
            </div>
        </div>
    </div>
</div>

<script>
    var currentDeleteBtn = null;
    
    $('.btn-delete').click(function(e) {
        e.preventDefault();
        currentDeleteBtn = $(this);
        $('#deleteItemName').text($(this).data('item-name'));
        $('#deleteConfirmModal').modal('show');
    });
    
    $('#confirmDeleteBtn').click(function() {
        if (currentDeleteBtn) {
            __doPostBack(currentDeleteBtn.attr('id'), '');
        }
        $('#deleteConfirmModal').modal('hide');
    });
</script>

選擇 OnClientClick + confirm() 仍是最輕量、相容性最佳的基礎方案，適合大多數內部管理系統快速落地。

1. 上一篇文章： ADO.NET 核心基礎知識深度解析：SqlConnection 內部架構與介面實作
2. 下一篇文章： WPF 進度條美化實戰：仿 Visual Studio 2012 安裝介面風格 (ModernUI)

ASP.NET 基礎

C# switch case 語句完整指南：語法、模式匹配與最佳實踐

switch 是 C# 中多路分支選擇結構，支援整數、字串、

ASP.NET 依據 MIME 類型自動判斷下載檔案副檔名完整實作

問題背景 使用 WebClient 下載資源時，URL 常無

ASP.NET MVC 4 入門教學（七）：Code First Migrations 新增欄位與種子資料

啟用 Migrations 管理資料庫演進 Entity F

Windows 虛擬主機與 VPS 實現 301 重定向的兩種方案 (ASP.NET)

前言 301 永久重定向對 SEO 至關重要，但在 Wind