ASP.NET 實作刪除確認彈出視窗：JavaScript confirm 與伺服器端事件整合教學

前言

在 ASP.NET Web Forms 開發中，資料刪除等高風險操作前加上確認對話框是基本的使用者體驗保障。本文示範如何結合 JavaScript confirm() 與 OnClientClick 屬性，在回傳伺服器前攔截使用者意圖，若取消則阻止 Postback，確認才執行後端刪除邏輯。

完整範例程式碼

前端 .aspx 頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DeleteConfirm.aspx.cs" Inherits="WebApp.DeleteConfirm" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>刪除確認示範</title>
    <script type="text/javascript">
        function confirmDelete() {
            // 回傳 true 繼續 Postback，false 取消
            return confirm('您確定要刪除這筆資料嗎？此操作無法復原。');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnDelete" runat="server" 
                Text="刪除資料" 
                OnClientClick="return confirmDelete();" 
                OnClick="btnDelete_Click" />
        </div>
    </form>
</body>
</html>

後端 .aspx.cs 程式碼

using System;
using System.Web.UI;

namespace WebApp
{
    public partial class DeleteConfirm : Page
    {
        protected void btnDelete_Click(object sender, EventArgs e)
        {
            // 這裡撰寫實際刪除資料庫資料的邏輯
            // 例如：using (var ctx = new MyDbContext()) { ctx.Items.Remove(item); ctx.SaveChanges(); }
            
            btnDelete.Text = "已刪除"; // 示範用：按鈕文字變更表示成功
            // 實務上建議搭配 GridView/DataList 等資料繫結控制項，重新 BindData()
        }
    }
}

關鍵點解析

• OnClientClick="return confirmDelete();"：return 關鍵字至關重要，JavaScript 函式回傳 false 時會取消後續的伺服器端 Postback。
• confirm() 回傳值：使用者點「確定」回傳 true，點「取消」回傳 false。
• 無需額外註冊腳本：直接內嵌在 <head> 或頁面底部即可，輕量且相容性極佳。

進階建議

• 若專案已引用 jQuery UI、Bootstrap Modal 或 SweetAlert2，可替換為更美觀的模態視窗，邏輯不變：OnClientClick="return showCustomConfirm();"。
• 針對批次刪除（GridView CheckBox 全選），建議在前端蒐集勾選的主鍵 ID，透過 __doPostBack 或 AJAX 傳遞至後端，避免逐筆確認造成使用者疲勞。
• 正式環境務必在後端再次驗證權限與資料完整性，前端確認僅為 UX 輔助，非安全防線。

常見錯誤與除錯