引导模式窗口导致更新面板重新加载整个页面

Question

当我单击 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>

Answer 1

我发现了问题所在。我将在此处发布答案，因为在此问题上我在 Google 上找不到任何其他内容。以下是问题：

1. slimscroll 文件是导致更新面板执行整页回发的主要原因。我把它注释掉了。

2. 除了 slimscroll 文件之外，updatepanel 进行整页回发的另一个原因是，在母版页中，我有 ClientIDMode="Static"。我必须将下拉菜单设置为 ClientIDMode="AutoID"

3. 我必须做的最后一件事是，为了避免模态框消失，我不得不将更新面板移动到模态内容 div 中，而不是在更新面板中包含整个模态框。

希望这可以防止其他人像我几乎一样失去理智！ :)