SweetAlert2 ASP.NET Gridview 删除行确认

Posted

技术标签:

【中文标题】SweetAlert2 ASP.NET Gridview 删除行确认【英文标题】:SweetAlert2 ASP.NET Gridview Delete Row Confirm 【发布时间】:2021-12-19 14:27:31 【问题描述】:

我尝试在删除 gridview 一行时使用 sweetalert2。

这是我的 js:

<script>
        var object =  status: false, ele: null ;
        function ConfirmDelete(ev) 
            if (object.status)  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!',
                preConfirm: function () 
                    return new Promise(function (resolve) 
                        setTimeout(function () 
                            resolve()
                        , 2000)
                    )
                    object.status = true;
                    object.ele = ev;
                    object.ele.click();
                
            ).then(function () 
            )
            return false;

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

【问题讨论】:

【参考方案1】:

将其设置为更简单。您希望该函数返回 true 或 false。

并且引入promise和hand stand并不能解决这个问题,因为像大多数js插件一样,无论是jQuery.UI对话框,还是这种情况下的甜蜜警报,它们都是异步运行的——引入promise对你没有帮助除非该警报例程被其他 js 例程调用 - 而不是。

此外,我们“假设”您拥有的按钮在网格中 - 看起来确实如此,但您至少应该提供周围的标记。

不是世界末日。

所以,这应该可行:

你的按钮,变成这样:

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

请注意,在上面我们将按钮传递给 js 例程时非常小心。

所以,js 现在可以变成这样了:

<script>
    var ConfirmDeleteOk = false
    function ConfirmDelete(btn) 

        if (ConfirmDeleteOk) 
            ConfirmDeleteOk = false
            return true
        
        
        swal(
            title: "Are you sure?",
            text: "Are you sure that you want to delete this data?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        )
            .then(willDelete => 
                if (willDelete) 
                    ConfirmDeleteOk = true;
                    btn.click();
                
                else 
                    swal("Safe!", "Your imaginary file is safe!", "success");
                
            );
        return false;
    

</script>

注意例程的最后一行“return false”

当我们关心的只是返回真或假时,我看不出有任何理由创建一些要返回的 js 对象 - 所以为此使用一个简单的变量。

【讨论】:

【参考方案2】:

我在下面解决了我的问题代码。

这是按钮

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

这是JS

<script type="text/javascript">
    var object =  status: false, ele: null ;
    function conFunction(ev) 
        var evnt = ev;
        if (object.status)  return true; 
        Swal.fire(
            title: 'Silmek istediğinize emin misiniz?',
            text: "Onayladıktan sonra işlem geri alınamaz",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet, Sil',
            cancelButtonText: 'İptal',
            closeOnConfirm: true
        ).then((result) => 
            if (result.isConfirmed) 
                object.status = true;
                object.ele = evnt;
                evnt.click();
            
        )

        return object.status;
    ;
</script>

【讨论】:

以上是关于SweetAlert2 ASP.NET Gridview 删除行确认的主要内容,如果未能解决你的问题,请参考以下文章

如何在asp.net的GridView中按列名而不是按索引获取单元格值

asp.net的GridView控件的onrowdeleting属性怎么出错显示为找不到可接受类型。。。呢

sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框

SweetAlert2 使用教程

SweetAlert2 弹窗

SweetAlert2 - 如何更改警报中的响应图像