Question

我想要显示一个bootstrap模式，以便在ASP.NET Web表单中执行搜索并选择功能。问题是当用户点击＆＃34;搜索＆＃34;按钮，模态关闭。我希望modal保持打开状态以在下面的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）一起使用，它们将无法在自动回发

上正确呈现

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

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

Answer 3

我知道这很旧，但是遇到同样的问题我遇到了这个线程。其他解决方案对我不起作用，但是我提出了自己的可行的解决方案，尽管它可能被认为是“黑客”。基本上，在后面的代码中，我以与Bootstrap相同的方式设置HTML元素的各种属性。我通过比较对话框“关闭”时的“页面源”与“打开”时的“页面源”来找出要设置的内容。

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

host.docker.internal

这是两个用于保持模式打开或关闭的子例程（这是vb.net）：

$db = new \PDO('mysql:host=host.docker.internal;port=3306;dbname=db', 'root', 'pass');

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

有关litDlgBackdrop的注释，它是<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='×' OnClick="btnCloseMatItem_Click" OnClientClick="$('#modalSizeChange').modal('hide')" /> <h2 id="ResizeDlgHdr" runat="server">Change Size of Return Piece</h2> </div>标记之前的底部文字。我发现，我的应用程序中使用的引导程序版本通过在此位置添加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并使用class =“ modal-backdrop fade in”来实现深色背景效果。因此，为实现相同的效果，我用相同的内容填充了该文字。

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

另一个警告，我正在使用的应用程序使用的是2013年以来的旧Bootstrap版本，因此我正在设置的属性可能不适用于较新的版本，但是您可以采用类似的方法，例如研究Page Source我确实是要找出要更改的内容。

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

防止ASP.NET中的回发关闭bootstrap模式

3 个答案: