Verwenden von SweetAlert2 zum Ersetzen von "return confirm()" auf einer ASP.Net-Schaltfläche

Question

Wenn ich in ASP.Net arbeite, habe ich oft gerne "Sind Sie sicher?" Popups beim Klicken auf Dinge wie eine Schaltfläche zum Löschen. Dies ist leicht wie so getan:

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

Ich mag das Styling und allgemeines Gefühl von SweetAlert2 des Bestätigungsdialogs, aber sie sind scheinbar ein bisschen lästig, wenn ich versuche, sie in ähnlicher Weise zu integrieren. Kann mir jemand erklären, wie ich das SweetAlert2-Dialog-Ergebnis basierend auf der angeklickten Schaltfläche entweder fortsetzen oder stoppen kann?

Hier ist, was ich bisher habe:

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

Der Dialog kommt und das Löschen wird nicht verarbeitet, natürlich, wie ich zur Zeit ein event.preventDefault() und nichts tun zurückgegeben werden. Ich merke auch, dass I can use promises, Hinzufügen einer .then() nach meiner swal({...}), aber ich bin mir nicht sicher, wie das in diesem Fall verwendet werden würde.

Bei Bedarf kann ich mit einer versteckten Schaltfläche, die tatsächlich die Code-Behind-Methode auslöst, knifflig werden und auf die ausgeblendete Schaltfläche basierend auf der Benutzerauswahl klicken, aber ich hoffe, dies zu vermeiden.

Answer 1

Da der SweetAlert2-Dialog asynchron verarbeitet wird, müssen Sie bei der Lösung des Versprechens programmgesteuert einen weiteren Buttonklick auslösen. Anstatt eine versteckte Schaltfläche zu erstellen, können Sie btnDelete wiederverwenden, indem Sie ein Flag setzen, um anzuzeigen, dass die Aktion bereits bestätigt wurde. Dieses Flag wird erkannt, wenn der zweite Klick ausgeführt wird, und der Klick auf die Schaltfläche wird fortgesetzt und das Server-Ereignis ausgelöst.

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