使用SweetAlert2替换“return confirm（）”在ASP.Net按钮上 [英] Using SweetAlert2 to replace "return confirm()" on an ASP.Net Button

问题描述

在ASP.Net工作时，我经常喜欢你确定吗？单击删除按钮之类的弹出窗口。这很容易做到：

When working in ASP.Net, I often like to have "Are you sure?" popups when clicking things like a delete button. This is easily done like so:

<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return confirm('Are you sure?');" onClick="btnDelete_Click" />

我非常喜欢SweetAlert2确认对话的造型和一般感觉，但是他们看起来有点多了当我试图以类似的方式整合它们时很麻烦。有人可以向我解释我如何能够根据点击的按钮返回SweetAlert2对话框结果继续或停止吗？

I really like the styling and general feel of SweetAlert2's confirm dialog, however they're seemingly a bit more troublesome when I'm attempting to integrate them in a similar fashion. Can someone explain to me how I might be able to return the SweetAlert2 dialog result to either continue or stop based on the button clicked?

这是我到目前为止所得到的：

Here's what I've got so far:

<asp:Button runat="server" id="btnDelete" Text="Delete" onClientClick="return sweetAlertConfirm();" onClick="btnDelete_Click" />

    function sweetAlertConfirm() {
        event.preventDefault();
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
//      }).then(function() {
//          CONFIRM WAS CHOSEN
//      }, {function() {
//          CANCEL WAS CHOSEN
        });
    }

对话框出现，删除不处理，当然，因为我我正在做 event.preventDefault（），并且没有返回任何内容。我也注意到我可以使用承诺，添加。然后（）在我的 swal（{...}）之后，但是我不确定在这种情况下如何使用它。

The dialog comes up and the delete is not processed, of course, as I'm currently doing an event.preventDefault() and nothing is being returned. I'm also noticing that I can use promises, adding a .then() after my swal({...}), however I'm not sure how that would be used in this instance.

如果需要，我可以使用隐藏按钮实际触发代码隐藏方法，并根据用户选择单击该隐藏按钮，但我希​​望避免这种情况。

If need be I can get tricky with a hidden button that actually triggers the code-behind method, and click that hidden button based on the user selection, but I'm hoping to avoid this.

推荐答案

由于SweetAlert2对话框是异步处理的，因此在解析promise时必须以编程方式触发另一个按钮。您可以通过设置一个标志来指示该操作已经确认，而不是创建隐藏按钮，而是重用 btnDelete 。处理第二次点击时将检测到该标志，并且将允许按钮单击继续并触发服务器事件。

Since the SweetAlert2 dialog is processed asynchronously, you have to trigger another button click programmatically when the promise is resolved. Instead of creating a hidden button, you can reuse btnDelete by setting a flag to indicate that the action was already confirmed. That flag will be detected when the second click is processed, and the button click will be allowed to proceed and to trigger the server event.

<asp:Button ... OnClientClick="return sweetAlertConfirm(this);" OnClick="btnDelete_Click" />

function sweetAlertConfirm(btnDelete) {
    if (btnDelete.dataset.confirmed) {
        // The action was already confirmed by the user, proceed with server event
        btnDelete.dataset.confirmed = false;
        return true;
    } else {
        // Ask the user to confirm/cancel the action
        event.preventDefault();
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        })
        .then(function () {
            // Set data-confirmed attribute to indicate that the action was confirmed
            btnDelete.dataset.confirmed = true;
            // Trigger button click programmatically
            btnDelete.click();
        }).catch(function (reason) {
            // The action was canceled by the user
        });
    }
}

这篇关于使用SweetAlert2替换“return confirm（）”在ASP.Net按钮上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！