防止在 ASP.NET 回发时关闭引导模式

Question

我有一个我想显示的引导模式，以便在 ASP.NET Web 表单中执行搜索和 select 功能。 问题是当用户单击“搜索”按钮时，模式关闭。 我希望模式保持打开状态以在下面的 GridView 上显示搜索结果，并在用户选择任何 GridView 项目时关闭。

我尝试了其他线程中提到的其他解决方案，但似乎没有任何效果。 我正在使用带有母版页的 WebForm，我不知道它是否会引起我的问题。

这是我的模态代码：

<div class="modal fade" id="modSearchByAccount" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Search by Account</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-8">
                    <asp:TextBox ID="txtSearchText" runat="server" CssClass="form-control" placeholder="Account name"></asp:TextBox>
                </div>
                <div class="col-md-4">
                     <asp:Button ID="btnSearchAccount" runat="server" OnClick="btnSearchAccount_Click" Text="Buscar" CssClass="btn btn-default" />
                </div>    
            </div>
            <div class="row">
                <div class="col-md-12">
                     <asp:Panel ID="pnlSearchResults" runat="server" ScrollBars="Vertical" Height="200px" Width="100%">
                        <asp:GridView ID="gvSearchResults" runat="server" AutoGenerateColumns="False" DataKeyNames="ACCOUNT_ID" OnSelectedIndexChanged="gvSearchResults_SelectedIndexChanged" CssClass="table table-striped table-hover">
                            <Columns>
                                <asp:BoundField DataField="ACCOUNT_ID" HeaderText="ID" />
                                <asp:BoundField DataField="ACCOUNT_NAME" HeaderText="Name" />
                                <asp:CommandField ShowSelectButton ="true" />
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div> 
 </div>

有任何想法吗？ 我可以在这里的某个地方使用 UpdatePanel 吗？

提前致谢！

Answer 1

现在可能为时已晚，但是是可以做到的。 关键是要有一个外部 UpdatePanel 和一个内部 UpdatePanel。 外部面板应设置为条件和 ChildrenAsTriggers = true 的 UpdateMode。

在我的情况下，我将内部主体移动到用户控件中，但您的代码示例应如下工作：

<asp:UpdatePanel runat="server" ID="updatePanelTop" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
    <div class="modal fade" id="modSearchByAccount" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Search by Account</h4>
            </div>
            <div class="modal-body">
                <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <div class="row">
                        <div class="col-md-8">
                            <asp:TextBox ID="txtSearchText" runat="server" CssClass="form-control" placeholder="Account name"></asp:TextBox>
                        </div>
                        <div class="col-md-4">
                             <asp:Button ID="btnSearchAccount" runat="server" OnClick="btnSearchAccount_Click" Text="Buscar" CssClass="btn btn-default" />
                        </div>    
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                             <asp:Panel ID="pnlSearchResults" runat="server" ScrollBars="Vertical" Height="200px" Width="100%">
                                <asp:GridView ID="gvSearchResults" runat="server" AutoGenerateColumns="False" DataKeyNames="ACCOUNT_ID" OnSelectedIndexChanged="gvSearchResults_SelectedIndexChanged" CssClass="table table-striped table-hover">
                                    <Columns>
                                        <asp:BoundField DataField="ACCOUNT_ID" HeaderText="ID" />
                                        <asp:BoundField DataField="ACCOUNT_NAME" HeaderText="Name" />
                                        <asp:CommandField ShowSelectButton ="true" />
                                    </Columns>
                                </asp:GridView>
                            </asp:Panel>
                        </div>
                    </div>
                </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div> 
     </div>
</ContentTemplate>
</asp:UpdatePanel>     

Answer 2

如果您将 UpdatePanel 与 Select2List 或其他一些引导程序（如 FileUpload Controls）一起使用，它们将无法在Auto Post Back上正确呈现

为避免这种情况，请不要使用更新面板，只需在后面的代码中添加以下代码即可。 此代码将使您的 Bootstrap 弹出窗口在 AutoPostBack 事件后保持打开状态。

 protected void OnSelectedIndexChanged(object sender, EventArgs e) { ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#MyPopup').modal('show')", true); }

Answer 3

我知道这很旧，但我遇到了同样的问题。 其他解决方案对我不起作用，但我想出了我自己的似乎有效的解决方案，尽管它可能被认为是“黑客”。 基本上，在代码隐藏中，我以与 Bootstrap 相同的方式设置 HTML 元素的各种属性。 我通过比较对话框“关闭”和“打开”时的页面源，找出了将它们设置为什么。

这是我的模态标记的顶部：

                        <div id="modalSizeChange" runat="server" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-header">
                            <asp:Button ID="btnCloseMatItem" class="close" runat="server" Text='&times;' OnClick="btnCloseMatItem_Click" OnClientClick="$('#modalSizeChange').modal('hide')" />
                            <h2 id="ResizeDlgHdr" runat="server">Change Size of Return Piece</h2>
                        </div>

这里有两个子程序（这是 vb.net）用于保持模式打开或关闭它：

    Private Sub HideResizeDlg()
    modalSizeChange.Style.Remove("display")
    modalSizeChange.Attributes("class") = "modal hide fade"
    modalSizeChange.Attributes("aria-hidden") = "true"
    litDlgBackdrop.Text = ""
    litDlgBackdrop.Visible = False

    'Following is to remove any Div with "modal-backdrop fade in" class created by JQuery (instead of the one created by code-behind)
    Dim script As String = "$('.modal-backdrop').remove();"
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "#modalBackdropRemove", script, True)
End Sub

Private Sub ShowResizeDlg()
    'Set the attributes of the dialog so it stays visible on the post back - this matches the state after the JQuery .modal('show') is called
    modalSizeChange.Style.Add("display", "block")
    modalSizeChange.Attributes("class") = "modal hide fade in"
    modalSizeChange.Attributes("aria-hidden") = "false"
    litDlgBackdrop.Text = "<div class=""modal-backdrop fade in""></div>"
    litDlgBackdrop.Visible = True

End Sub

因此，每当在回发期间我想保持对话框显示时，我都会调用 ShowResizeDlg()。 这种方法的一个问题是，在重新加载页面后，关闭/取消按钮不再使用基本的客户端 .modal('hide') 调用工作，原因与对话框没有保持打开状态相同。 因此，为了解决这个问题，我也制作了那些后退按钮，它们调用了 HideResizeDlg() 子例程，该子例程相当于“隐藏”。

关于 litDlgBackdrop 的注释，它是位于</body>标记之前底部的文字。 我发现我的应用程序中使用的 bootstrap 版本通过在这个位置添加一个<div>和 class="modal-backdrop fade in" 来实现变暗的背景效果。 所以为了达到同样的效果，我用同样的东西填充这个文字。

在 HideResizeDlg() 中，我注册了一个启动脚本，该脚本查找和删除具有“modal-backdrop”类的任何元素 - 以摆脱引导程序创建的元素。

另一个警告，我正在开发的应用程序使用的是 2013 年的旧 Bootstrap 版本，因此我设置的属性可能不适用于较新版本，但您可以通过研究页面源来采取类似的方法，就像我所做的那样找出要更改的内容。

可能有更好的方法，我只是发现这适合我的目的。

Answer 4

将您的模态框放在更新面板之外，如果模态框位于更新面板内，则在单击回发或 asp 按钮时模态框将自动关闭。

Answer 5

<div class="modal fade" id="mdlGuncelle" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<asp:UpdatePanel ID="upModalGuncelle" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
    <ContentTemplate>
       
            <div class="modal-dialog">

模态弹出 özelliğini 更新面板 dışına alın。 PostBack olacak kısımları 更新面板 içerisine koyması işinizi görecektir。