html - 如何防止 Bootstrap Modal 在 GridView 项目单击时关闭?
问题描述
我创建了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>
解决方案
问题不是模态,而是单击控件时发生的回发。在 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">×</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>
推荐阅读
- cmake - CMake:用于复制与模式匹配的文件并保留目录结构的自定义命令
- mysql - 从 date_of_birth 获取年龄大于 35 的年龄
- java - java项目中集成测试的最佳文件夹约定
- c++ - 如何从文件中读取并存储在c ++中的对象数组中
- laravel - Laravel-excel 无法更新记录“WithUpserts” - 未找到
- java - [LDAP:错误代码 32 - 0000208D:NameErr:DSID-03100241,问题 2001 (NO_OBJECT),数据 0,最佳匹配:
- list - 如何将整数乘以列表列表
- azure-web-app-service - 如何从 Azure 应用服务提供对 PublicClientApplicationBuilder AcquireTokenInteractive 的访问
- python - pygame sprite.Group - 从组中传递参数
- rust - Rust 双重参考值