Question

单击下面示例中的“显示”按钮显示一个简单的引导模式对话框，其中包含两个按钮：取消（通过数据关闭解除）和“确定”，这可能会在服务器端执行某些操作，然后调用一点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

Answer 1

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

您需要使用ASP.NET在更新UpdatePanel时拥有的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。

Answer 2

即使按钮位于更新面板内，脚本管理器仍然可以正常传递updatepanel＆amp;不是页面作为参数..

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

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

Answer 3

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

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

然后，在页面上的各种模式中，可以将“提交/创建”按钮的OnClientClick值设置为“ closeModal（'id_of_your_modal_container'）;”

然后，我可以将UpdatePanels与Triggers以及我想要在页面上进行的所有常规修饰（Toastr通知等）一起使用，并且可以无缝地工作。如果只是标准按钮或锚标记，则只需设置数据属性'data-dismiss =“ modal”'

解除UpdatePanel中的Bootstrap对话框

3 个答案: