Bootstrap modal window 导致 updatepanel 重新加载整个页面
Bootstrap modal window causes updatepanel to reload entire page
当我单击 Linkbutton2 时,整个页面都会重新加载。但是,如果我只是删除 id="addLineModal" div 但保持其内容不变,那么当我单击 Linkbutton2 时,更新面板将正常工作。任何想法为什么模态会破坏更新面板?这是代码:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="PriceAndLeadTimeRequest.aspx.vb" Inherits="PriceAndLeadTimeRequest" %>
<%@ MasterType VirtualPath="./MasterPage.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:LinkButton ID="OpenTheModal" runat="server" CssClass="btn btn-sm btn-primary" Style="margin-top: 7px;" data-toggle="modal" data-target="#addLineModal"><i class="fa fa-plus"></i> Add New Line Item</asp:LinkButton>
<asp:UpdatePanel ID="udpAddLineModal" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal inmodal fade" id="addLineModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-10">
<div class="form-group" runat="server" id="divCollection">
<label class="col-xs-3 control-label">Press:</label>
<div class="col-xs-9">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Jquery Validate -->
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<!-- jQuery UI -->
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
</asp:Content>
我发现哪里出了问题。我会 post 在这里回答,因为我在 Google 上找不到关于这个问题的任何其他内容。问题是:
slimscroll 文件是导致更新面板返回整页 post 的罪魁祸首。我注释掉了
除了 slimscroll 文件之外,updatepanel 正在做整页 post 的另一个原因是因为在母版页中,我有 ClientIDMode="Static" .我必须将下拉列表设置为 ClientIDMode="AutoID"
我必须做的最后一件事,为了避免模态消失,我不得不将更新面板移动到模态内容 div 中,而不是将整个模态包含在更新面板。
希望这可以防止其他人像我一样失去理智! :)
当我单击 Linkbutton2 时,整个页面都会重新加载。但是,如果我只是删除 id="addLineModal" div 但保持其内容不变,那么当我单击 Linkbutton2 时,更新面板将正常工作。任何想法为什么模态会破坏更新面板?这是代码:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="PriceAndLeadTimeRequest.aspx.vb" Inherits="PriceAndLeadTimeRequest" %>
<%@ MasterType VirtualPath="./MasterPage.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:LinkButton ID="OpenTheModal" runat="server" CssClass="btn btn-sm btn-primary" Style="margin-top: 7px;" data-toggle="modal" data-target="#addLineModal"><i class="fa fa-plus"></i> Add New Line Item</asp:LinkButton>
<asp:UpdatePanel ID="udpAddLineModal" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal inmodal fade" id="addLineModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-10">
<div class="form-group" runat="server" id="divCollection">
<label class="col-xs-3 control-label">Press:</label>
<div class="col-xs-9">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Jquery Validate -->
<script src="js/plugins/validate/jquery.validate.min.js"></script>
<!-- jQuery UI -->
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
</asp:Content>
我发现哪里出了问题。我会 post 在这里回答,因为我在 Google 上找不到关于这个问题的任何其他内容。问题是:
slimscroll 文件是导致更新面板返回整页 post 的罪魁祸首。我注释掉了
除了 slimscroll 文件之外,updatepanel 正在做整页 post 的另一个原因是因为在母版页中,我有 ClientIDMode="Static" .我必须将下拉列表设置为 ClientIDMode="AutoID"
我必须做的最后一件事,为了避免模态消失,我不得不将更新面板移动到模态内容 div 中,而不是将整个模态包含在更新面板。
希望这可以防止其他人像我一样失去理智! :)