防止多次单击带有 ASP.NET 的引导模式按钮

Question

我使用 boostrap 模态将数据保存在 ASP.NET 网页上，当用户错误地多次单击模态上的"保存"按钮时，我遇到了问题。该事件触发用户按下单击的次数。发生这种情况是因为模态不会立即关闭。关闭大约需要 1 秒，足以让用户单击多次按钮。

我的数据库已验证（我使用的是实体框架），因此没有插入重复的值。但是，如果用户单击两次，它将尝试插入记录两次，并显示错误消息。

我该如何防止这种情况？

这是模态代码：

<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 再次重新启用保存按钮。只需确保 jQuery 事件处理程序是在btnSaveBank_Click之后定义的，以便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);
    });
});