使用SweetAlert2替换ASP.NET按钮上的“return confirm()”

ruoxqz4g 于 2023-06-25 发布在 .NET

关注(0)|答案(3)|浏览(143)

在ASP.NET工作时，我经常喜欢有“你确定吗？单击删除按钮之类的东西时弹出。这很容易做到，就像这样：

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

我真的很喜欢SweetAlert2的确认对话框的样式和总体感觉，但是当我试图以类似的方式集成它们时，它们似乎有点麻烦。有人能告诉我，我如何才能返回SweetAlert2对话框结果，以便根据点击的按钮继续或停止？
以下是我目前所得到的：

<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()，没有返回任何内容。我还注意到了I can use promises，在我的swal({...})后面添加了一个.then()，但是我不确定在这个例子中如何使用。
如果需要的话，我可以使用一个实际触发代码隐藏方法的隐藏按钮，然后根据用户的选择单击该隐藏按钮，但我希望避免这种情况。

asp.net

来源：https://stackoverflow.com/questions/44729434/using-sweetalert2-to-replace-return-confirm-on-an-asp-net-button

3条答案

按热度按时间

gab6jxml1#

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

<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
        });
    }
}

赞(0）回复(0）举报 2023-06-25

zlwx9yxi2#

var obj = { status: false, ele: null };
function DeleteConfirm(btnDelete) {

    if (obj.status) {
        obj.status = false;
        return true;
    };

    Swal.fire({
        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((result) => {
        if (result.value) {
            obj.status = true;
            //do postback on success
            obj.ele.click();

            Swal.fire({
                title: 'Deleted!',
                text: 'Your file has been deleted.',
                type: 'success',
                timer: 800
            })
        }
    });
    obj.ele = btnDelete;
    return false;
}

<link href="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8/dist/sweetalert2.min.js"></script>

<asp:LinkButton ID="cmdDelete" runat="server" CausesValidation="False" OnClientClick="return DeleteConfirm(this);">

赞(0）回复(0）举报 2023-06-25

rkttyhzu3#

如何调用SweetAlert确认按钮客户端上单击Gridview内部，然后在Gridview OnRowCommand上决定动作停止或继续

赞(0）回复(0）举报 2023-06-25