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

Question

我想展示一个引导模式，以便在 ASP.NET Web 表单中执行搜索和选择功能。问题是当用户单击“搜索”按钮时，模式关闭。我希望模式保持打开以在下面的 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。外部面板应设置为条件的 UpdateMode 和 ChildrenAsTriggers = true。

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

<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 控件）一起使用，它们将无法在 Auto Post Back 上正确呈现

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

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> 标记之前的文字。我发现我的应用程序中使用的引导程序版本通过在此位置添加 <div> 并使用 class="modal-backdrop fade in" 来实现变暗的背景效果。所以为了达到同样的效果，我用同样的东西填充这个文字。

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

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

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

Answer 4

将你的模态框放在更新面板之外，如果模态框在更新面板里面，那么当点击回发或asp按钮时，模态框会自动关闭。