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

unguejic  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(4)|浏览(169)

我想显示一个 Bootstrap 模态,以便在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吗?
提前感谢!

nom7f22z

nom7f22z1#

现在可能太晚了,但是可以做到。关键是要有一个外部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>
eufgjt7s

eufgjt7s2#

如果您将UpdatePanel与Select2List或FileUpload控件等其他 Bootstrap 一起使用,则它们将无法在自动回发上正确呈现
要避免这种情况,请不要使用更新面板,只需在后面的代码中添加以下代码。此代码将在AutoPostBack事件后保持 Bootstrap 弹出窗口打开。

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

trnvg8h33#

I know this is old, but I came upon this thread with the same problem. The other solutions did not work for me, but I came up with my own that seems to work, although it might be considered a "hack". Basically, in the code-behind I set up the various attributes of HTML elements the same way that Bootstrap does it. I figured out what to set them to by comparing the Page Source when the dialog was "closed" vs. when "open".
Here's the top of the markup for my modal:

<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>

And here are two subroutines (this is vb.net) for keeping the modal open or closing it:

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

So whenever during postback I want to keep the dialog displayed, I call ShowResizeDlg(). The one problem with this approach is that after reloading the page, the close/cancel buttons no longer work using basic client-side .modal('hide') call, for the same reasons that the dialog didn't stay open. So to get around that I made those post-back buttons as well, and they call the HideResizeDlg() subroutine which does the equivalent of 'hide'.
A note about litDlgBackdrop, which is a literal at the bottom just before the </body> tag. I found out that the version of bootstrap used in my app achieves the darkened background effect by adding a <div> at this location with the class="modal-backdrop fade in". So to achieve the same affect I populate this literal with the same thing.
In the HideResizeDlg(), I register a startup script that looks for and deletes any elements with class "modal-backdrop" - to get rid of the one created by bootstrap.
One other caution, the app I'm working on is using an old Bootstrap version from 2013, so the attributes I'm setting may not work with newer versions, but you could take a similar approach by studying the Page Source like I did to find out what to change.
There's probably a much better way, I just found this works for my purposes.

u91tlkcl

u91tlkcl4#

把你的Modal放在updatepanel之外,如果modal在updatepanel之内,那么当回发或者点击asp按钮时,modal会自动关闭。

相关问题