ASP.NET GridView删除行时如何使用SweetAlert2实现删除确认功能

• 执行顺序错误：preConfirm 中先返回了Promise实例，后续修改object.status、保存元素、触发点击的代码属于不可达死代码，永远不会执行
• 参数传递缺失：GridView按钮的OnClientClick调用ConfirmDelete时没有传入当前按钮元素，函数内的ev为undefined，后续触发点击的逻辑完全失效
• 冗余逻辑冲突：preConfirm中自定义的2秒延迟Promise没有实际业务意义，还会阻塞后续确认逻辑的执行
• 逻辑结构不合理：确认后的触发逻辑没有放在SweetAlert2的then回调中判断用户是否真的点击了确认按钮，存在取消操作也会误触发删除的隐患

修正后的JS代码 #

<script>
var deleteState = { isConfirmed: false, targetBtn: null };
function ConfirmDelete(btn) {
    // 如果已经确认过，直接放行提交
    if (deleteState.isConfirmed) { 
        deleteState.isConfirmed = false; // 重置状态，避免后续点击直接跳过确认
        return true; 
    }
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
        // 仅当用户点击确认按钮时执行
        if (result.isConfirmed) {
            deleteState.isConfirmed = true;
            deleteState.targetBtn = btn;
            // 触发按钮的点击事件，这次会直接返回true提交服务端删除
            deleteState.targetBtn.click();
        }
    })
    // 第一次点击直接返回false，阻止默认提交行为，等待用户确认
    return false;
}
</script>

修正后的GridView删除按钮代码 #

<asp:ImageButton ImageUrl="~/dist/img/delete.png" runat="server" CommandName="Delete" OnClientClick="return ConfirmDelete(this);" ToolTip="Sil" Width="20px" Height="20px" />

1. 首次点击删除按钮时，调用ConfirmDelete传入当前按钮实例，函数直接返回false阻止默认提交
2. 弹出SweetAlert2确认框，用户点击确认后修改确认状态，重新触发按钮点击
3. 第二次触发点击时，判断状态为已确认，直接返回true，执行服务端的删除逻辑
4. 每次执行完删除确认后重置状态，避免后续其他行的删除操作跳过确认步骤

内容的提问来源于stack exchange，提问作者Mete ÇİFTÇİ