javascript - Using SweetAlert2 to replace "return confirm()" on an ASP.Net Button - Stack Overflow

admin管理员组

文章数量:1290976

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" />

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

The dialog es 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.

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" />

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

The dialog es 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.

• javascript
• asp
• sweetalert
• sweetalert2

Share Improve this question Follow edited Jun 23, 2017 at 20:31 Tyler Roper asked Jun 23, 2017 at 20:24 Tyler RoperTyler Roper 21.7k66 gold badges3535 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +50

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

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/npm/sweetalert2@8/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.jsdelivr/npm/sweetalert2@8/dist/sweetalert2.min.js"></script>

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

本文标签： javascriptUsing SweetAlert2 to replace quotreturn confirm()quot on an ASPNet ButtonStack Overflow