如何防止Bootstrap Modal在GridView项目单击时关闭?

问题描述 投票:0回答:1

我已经在模态内部创建了一个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>
html asp.net vb.net aspxgridview
1个回答
0
投票

问题不是模式,而是单击控件时发生的回发。在模式中使用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>
© www.soinside.com 2019 - 2024. All rights reserved.