ASP.NETでブートストラップモーダルボタンを複数回クリックしないようにする

Question

ASP.NET Webページにデータを保存するためにブーストラップモーダルを使用していますが、ユーザーが間違ってクリックすると「保存」ボタンが2回以上クリックされます。モーダル。イベントは、ユーザーがクリックを押した回数を発生させます。これは、モーダルがすぐに終了しないために発生します。ユーザーがボタンを2回以上クリックするのに十分な時間です。

私のデータベースは検証されています（私はEntity Frameworkを使用しています）ので、重複する値は挿入されていません。しかし、ユーザーが2回クリックすると、レコードを2回挿入しようとすると、エラーメッセージが表示されます。

どうすればこの問題を防ぐことができますか？

これはモーダルコードです：

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

そして、これは背後にあるコードです：

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

あなたは、保存ボタンを無効にするとjQueryを経由してモーダルが閉じられた後、モーダルを閉じてみてくださいすることができますjQueryを使用して保存ボタンを再度有効にすることができます。 btnSaveBank_Clickの後にjQueryイベントハンドラが定義されているので、btnSaveBank_Clickがトリッキーを閉じる/隠すよりも優先されるようにしてください：

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