在 UpdatePanel 中关闭引导对话框答案

【问题标题】：Dismissing a Bootstrap Dialog within an UpdatePanel在 UpdatePanel 中关闭引导对话框
【发布时间】：2015-06-02 22:53:12
【问题描述】：

在下面的示例中单击“显示”按钮会显示一个简单的引导模式对话框，其中包含两个按钮：取消（通过 data-dismiss 取消）和“确定”，这可能会在服务器端完成一些工作，然后调用一些 Javascript 来隐藏对话框。

基本概念很好用——直到我尝试将整个内容包装在 UpdatePanel 中，如下所示。我到底做错了什么？（对于奖励积分，我将如何尝试通过 Javascript 设置跟踪，这会告诉我我在搞砸什么？）

谢谢！

表格代码：

<%@ Page Language="VB" AutoEventWireup="false"
     CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" 
        href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" 
        href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
    <script type="text/javascript" src="/includes/js/jquery-min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
    </script>

</head>
<body>
    <form id="form1" runat="server">

        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1"
            runat="server" ScriptMode="Debug">
        </ajaxToolkit:ToolkitScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <div>
                    <asp:Panel ID="pnlTestPanel" runat="server" role="dialog" 
                        CssClass="modal fade TestDialog">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close"
                                        data-dismiss="modal" 
                                        aria-hidden="true">&times;
                                    </button>
                                    <h2 class="modal-title">Test Dialog</h2>
                                </div>

                                <asp:Panel runat="server" ID="pnlTestBody" 
                                    class="modal-body">
                                    <label>This is a test dialog</label>
                                </asp:Panel>

                                <asp:Panel runat="server" ID="Panel3" 
                                    class="modal-footer">
                                    <asp:Button ID="cmdOK" runat="server"
                                        Text="OK" 
                                        CssClass="btn btn-warning">
                                    </asp:Button>&nbsp;

                                    <asp:Button ID="cmdCancel" runat="server"
                                        CssClass="btn btn-default"
                                        Text="Cancel"
                                        data-dismiss="modal">
                                    </asp:Button>

                                </asp:Panel>
                            </div>
                        </div>
                    </asp:Panel>
                    <asp:Button runat="server" Text="Show" ID="cmdShow" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

代码隐藏代码

Partial Class Default2
    Inherits System.Web.UI.Page

    Protected Sub cmdShow_Click(sender As Object, e As EventArgs) Handles cmdShow.Click
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "pnlTestPanel", _
            "$('#" & pnlTestPanel.ClientID & "').modal();", True)
    End Sub

    Protected Sub cmdOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdOK.Click
        ' Do some server side work 

        ' And now, close the dialog
        ScriptManager.RegisterStartupScript(Me.UpdatePanel1, UpdatePanel1.GetType(), _
           "Hide Test Dialog", "$('.TestDialog').modal('hide');", True)
    End Sub
End Class

【问题讨论】：

标签： javascript asp.net twitter-bootstrap

【解决方案1】：

ScriptManager.RegisterStartupScript 仅在您有完整的 PostBack 时才有效。在您的情况下，回发出现在UpdatePanel 内。

当UpdatePanel 更新时，您将需要使用 ASP.NET 具有的 JavaScript 事件。

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    console.log('UpdatePanel start');
}

function EndRequestHandler(sender, args) {
    console.log('UpdatePanel end');
}

您需要将代码放入EndRequestHandler 事件中以关闭模式。

有关更多信息，您可以在此处read 和here。

【讨论】：

【解决方案2】：

即使按钮在更新面板中，脚本管理器仍然可以工作，因为您传递的是更新面板而不是页面作为其参数..

只缺少一件事。在您的注册启动脚本中写入此语句。

$(document).ready(function () {     
  $('.TestDialog').modal('hide');
});

【讨论】：

【解决方案3】：

我发现最好的方法是创建一个简单的 javascript 函数。

    function closeModal(modalid) {
        $('#' + modalid).modal('hide');
    }

然后，在页面的各种Modal中，您可以将Submit/Create按钮的OnClientClick值设置为“closeModal('id_of_your_modal_container');”

然后我可以将 UpdatePanels 与触发器一起使用，以及我想要在页面上进行的所有正常修剪（Toastr 通知等），并且它可以非常无缝地工作。如果它只是一个标准按钮或锚标记，那么设置一个数据属性就是你所需要的'data-dismiss="modal"'

【讨论】：