Использование SweetAlert2 для замены подтверждения возврата() на кнопке ASP.Net

При работе в 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() и ничего не возвращается. Я также заметил, что я могу использовать промисы, добавляя .then() после swal({...}), однако я не уверен, как это будет использоваться в этом случае.

Если нужно, я могу ухитриться со скрытой кнопкой, которая фактически запускает метод кода программной части, и щелкнуть эту скрытую кнопку в зависимости от выбора пользователя, но я надеюсь избежать этого.


javascript asp.net sweetalert2 sweetalert
person Tyler Roper    schedule 23.06.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Поскольку диалоговое окно SweetAlert2 обрабатывается асинхронно, вы должны программно инициировать еще одно нажатие кнопки, когда обещание разрешено. Вместо создания скрытой кнопки вы можете повторно использовать 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
        });
    }
}
person ConnorsFan    schedule 26.06.2017