如何防止 Bootstrap Modal 在 GridView 项目单击时关闭？答案

【问题标题】：How to prevent Bootstrap Modal from closing on GridView item click?如何防止 Bootstrap Modal 在 GridView 项目单击时关闭？
【发布时间】：2020-04-11 16:42:34
【问题描述】：

我在模态框内创建了一个GridView，其中包含要添加到GridView 的控件。一切正常，但是，每次我单击Gridview 的控件时，模式都会关闭。即使我在Gridview 上选择一个元素，模式也会关闭。如果我再次打开模态，它将显示我在关闭模态之前选择的元素。有没有办法做到这一点？我看过帖子说我应该包含data-backdrop:static 但不起作用。

<section class="modal modalWindow" id="popupOne" style="margin-top: -137px; height: 581px; width: 941px; border: solid; margin-left: -627px; top: 25%; left: 65%">
    <section class="modalWrapper" style="height: 625px">
        <h1 class="h3 mb-0 text-gray-800">Credentialing</h1>

        <hr />

        <div class="card pmd-card">
            <div class="card-body">
                <!-- Basic Information -->
                <div class="details-tab">
                    <%--<div class="d-flex flex-row align-items-center mb-2">
                                                <h3 class="card-title media-body">Applicant Information</h3>
                                            </div>--%>
                        <div class="row view-basic-card" style="margin-bottom: 10px">
                            <div class="col-12 col-md-6 col-lg-3">
                                <label class="pmd-list-subtitle">Applicant ID</label>
                                <asp:TextBox ID="tbAppID" class="form-control" runat="server" Style="margin-right: 15px; width: 185px"></asp:TextBox>
                            </div>

                            <div class="col-12 col-md-6 col-lg-3">
                                <label class="pmd-list-subtitle">Applicant Name</label>
                                <asp:TextBox ID="tbFullName" class="form-control" runat="server" Style="margin-right: 15px; width: 185px"></asp:TextBox>
                            </div>
                        </div>

                </div>

                <!-- Contact Information -->
                <div class="details-tab">
                    <!-- View Card -->

                    <div class="row view-contact-card" style="margin-bottom: 10px">
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="pmd-list-subtitle">Document/Credential</label>
                            <asp:TextBox class="form-control" runat="server" ID="tbDocType"></asp:TextBox>
                        </div>
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="pmd-list-subtitle">Date Received</label>
                            <asp:TextBox class="form-control" TextMode="Date" runat="server" ID="tbDateReceived"></asp:TextBox>
                        </div>
                    </div>
                    <div class="row view-contact-card" style="margin-bottom: 10px">

                        <div class="col-12 col-md-6 col-lg-3">
                            <asp:LinkButton runat="server" ID="btnSubmitCred" OnClick="btnSubmitCred_Click" class="d-none d-sm-block btn btn-sm btn-success shadow-sm"><i class="fas fa-plus-circle fa-sm text-white-50" style="padding-right:10px"></i>Add</asp:LinkButton>
                        </div>

                        <div class="col-12 col-md-6 col-lg-3">
                            <asp:LinkButton runat="server" ID="btnRemoveCred" OnClick="btnRemoveCred_Click" class="d-none d-sm-block btn btn-sm btn-danger shadow-sm"><i class="fas fa-trash fa-sm text-white-50" style="padding-right:10px"></i>Remove</asp:LinkButton>
                        </div>

                    </div>
                </div>

                <asp:GridView class="table table-bordered" ID="gvAppCred" runat="server" AutoGenerateColumns="False" DataKeyNames="CredID" DataSourceID="SqlDataSource2" OnPageIndexChanging="gvAppCred_PageIndexChanging" OnRowDataBound="gvAppCred_OnRowDataBound">
                    <Columns>
                        <%--<asp:BoundField DataField="CredID" HeaderText="CredID" ReadOnly="True" InsertVisible="False" SortExpression="CredID"></asp:BoundField>--%>
                            <%--<asp:BoundField DataField="AppID" HeaderText="AppID" SortExpression="AppID"></asp:BoundField>--%>
                                <asp:CommandField ShowSelectButton="True" Visible="false"></asp:CommandField>
                                <asp:BoundField DataField="DocumentType" HeaderText="Document" SortExpression="DocumentType"></asp:BoundField>
                                <asp:BoundField DataField="SubmitDate" HeaderText="Submission Date" SortExpression="SubmitDate"></asp:BoundField>
                    </Columns>
                    <SelectedRowStyle BackColor="#54a1e5" Font-Bold="True" ForeColor="white" />
                </asp:GridView>
                <asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString='<%$ ConnectionStrings:HRRecruitmentDBConn %>' SelectCommand="SELECT * FROM [tblCredential] WHERE ([AppID] = @AppID)">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="tbAppID" PropertyName="Text" DefaultValue="xSelectedPersonID" Name="AppID" Type="String"></asp:ControlParameter>
                    </SelectParameters>
                </asp:SqlDataSource>

                <div class="form-row" style="justify-content: center; padding: 15px 15px 15px 15px">
                    <asp:LinkButton ID="btnClose" runat="server" class="d-none d-sm-inline-block btn btn-lg btn-success shadow-sm modalButton" Style="margin-right: 15px"><i class="fas fa-backward fa-sm text-white-50"></i>Back</asp:LinkButton>
                    <%--<asp:LinkButton ID="btnEditCancel" runat="server" href="#" class="d-none d-sm-inline-block btn btn-lg btn-danger shadow-sm modalButton"><i class="fas fa-minus-circle fa-sm text-white-50"></i>Cancel</asp:LinkButton>--%>
                </div>
            </div>
        </div>
    </section>
    <a class="closeBtn">CLOSE X</a>
</section>

【问题讨论】：

这不是数据背景，它只是背景。你在你的脚本中使用过这个吗？尝试在这里查看这篇文章：tutorialrepublic.com/faq/…希望这会有所帮助。
我已经尝试了您提到的链接中的脚本，但在 Gridview 上选择一个项目时，模式仍然关闭。我的问题只是单击 GridView 导致模式关闭。没有脚本，如果我在外部单击，模式不会关闭。所以我认为该解决方案不适用于我的情况。
我没有看到任何 vb.net。请更正标签。

标签： html asp.net vb.net aspxgridview

【解决方案1】：

问题不在于模态，而在于单击控件时发生的 PostBack。在 Modal 中使用 UpdatePanel。

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>

                        <asp:GridView ID="GridView1" runat="server"></asp:GridView>

                    </ContentTemplate>
                </asp:UpdatePanel>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

【讨论】：