Verhindern Sie mehrere Klicks auf modale Bootstrap-Taste mit ASP.NET

Question

Ich verwende Bootrap-Modals zum Speichern von Daten auf einer ASP.NET-Webseite und ich habe ein Problem, wenn Benutzer versehentlich mehr als einmal auf die Schaltfläche "Speichern" klicken modal. Das Ereignis löst aus, wie oft der Benutzer auf den Klick klickt. Dies geschieht, weil das Modal nicht sofort schließt. Es dauert ungefähr 1 Sekunde, um zu schließen, genug für den Benutzer, um mehr als einmal auf den Knopf zu klicken.

Meine Datenbank ist validiert (ich verwende Entity Framework), also sind keine doppelten Werte eingefügt. Wenn der Benutzer jedoch zweimal klickt, versucht es, den Datensatz zweimal einzufügen, und die Fehlermeldung wird angezeigt.

Wie kann ich das verhindern?

Dies ist der modale Code:

<asp:Panel runat="server" ID="pnlBank" DefaultButton="btnSaveBank"> 
    <div class="modal fade" id="modBank" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <a class="close" data-dismiss="modal">&times;</a> 
        <h4 class="modal-title">Banco</h4> 
       </div> 
       <div class="modal-body"> 
        <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
         <ContentTemplate> 
          <div class="form-group"> 
           <div class="row"> 
            <label class="col-md-2 control-label">Name</label> 
            <div class="col-md-10"> 
             <asp:TextBox ID="txtBankName" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox> 
            </div> 
           </div> 
            <label class="col-md-2 control-label">Address</label> 
            <div class="col-md-10"> 
             <asp:TextBox ID="txtBankAddress" CssClass="form-control" runat="server" MaxLength="150"></asp:TextBox> 
            </div> 
           </div> 
           <div class="row"> 
            <label class="col-md-2 control-label">Phone</label> 
            <div class="col-md-10"> 
             <asp:TextBox ID="txtBankPhone" CssClass="form-control" runat="server" MaxLength="15"></asp:TextBox> 
            </div> 
           </div> 
          </div> 
         </ContentTemplate> 
        </asp:UpdatePanel> 
       </div> 
       <div class="modal-footer"> 
        <a href="#" class="btn btn-default" data-dismiss="modal">Cerrar</a> 
        <asp:Button ID="btnSaveBank" runat="server" Text="Save" CssClass="btn btn-primary" OnClick="btnSaveBank_Click" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</asp:Panel>  

Und das ist der Code hinter:

protected void btnSaveBank_Click(object sender, EventArgs e) 
    { 
     Bank newBank = new Bank(); 
     newBank.Name = txtBankName.Text; 
     newBank.Address = txtBankAddress.Text; 
     newBank.Phone = txtBankPhone.Text; 
     using (bankEntity) 
     { 
      try 
      { 
       bankEntity.Bank.Add(newBank); 
       bankEntity.SaveChanges(); 
       lblResult.Text = "Bank successfully saved"; 
       ObtenerBancos(); 
      } 
      catch (Exception ex) 
      { 
       lblResult.Text = "Error when saving bank: " + ex.Message; 
      } 
     } 
    } 

Answer 1

Sie können versuchen, die Taste speichern deaktivieren und Schließen des modalen über jQuery und sobald das modale geschlossen ist Sie können die Schaltfläche zum Speichern erneut mit jQuery aktivieren. So stellen Sie sicher, dass die jQuery Event-Handler nach btnSaveBank_Click definiert werden, so dass btnSaveBank_Click Vorrang vor dem Ende/verbergen Tricks nimmt:

$(document).ready(function() { 
    $("#btnSaveBank").click(function() { 
     $(this).prop("disabled", true); 
     $("#modBank").modal("hide"); 
    }); 
    $("#modBank").on("hidden.bs.modal", function() { 
     $("#btnSaveBank").prop("disabled", false); 
    }); 
});