Javascript 取消UpdatePanel中的引导对话框_Javascript_Asp.net_Twitter Bootstrap

Javascript 取消UpdatePanel中的引导对话框

javascript asp.net twitter-bootstrap

Javascript 取消UpdatePanel中的引导对话框,javascript,asp.net,twitter-bootstrap,Javascript,Asp.net,Twitter Bootstrap,单击下面示例中的“Show”（显示）按钮将显示一个简单的引导模式对话框，其中包含两个按钮：Cancel（使用数据解除解除解除）和“OK”（确定），这两个按钮可能会在服务器端执行一些工作，然后调用一点Javascript来隐藏对话框基本概念很好用——直到我尝试将整个内容包装在UpdatePanel中，如下所示。我到底做错了什么？（对于额外的积分，我将如何尝试通过Javascript设置跟踪，这将告诉我我搞砸了什么？）谢谢表格代码： <%@ Page Language="VB" Auto

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

ScriptManager.RegisterStartupScript

仅在您有完整回发时才起作用。在您的情况下，回发发生在

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

事件中以关闭模式

欲了解更多信息，请点击此处和

即使按钮位于更新面板内，脚本管理器仍将在您传递updatepanel时工作&而不是将页面作为其参数

只缺少一件事。在寄存器启动脚本中编写此语句

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

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

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

然后，在页面上的各种模态中，您可以将Submit/Create按钮的OnClientClick值设置为“closeModal（'id\u of_your\u modal\u container'）

然后，我可以使用带有触发器的UpdatePanel，以及我想要在页面上进行的所有常规修剪（Toastr通知等），并且它可以无缝地工作。如果它只是一个标准按钮或锚定标记，那么设置一个数据属性就是您所需要的“data dismission=“modal””

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