正在取消UpdatePanel中的引导对话框

Dismissing a Bootstrap Dialog within an UpdatePanel

本文关键字：对话框 取消 UpdatePanel      更新时间：2023-09-26

单击下面示例中的"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>

代码隐藏

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

只有当您有完整的PostBack时，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事件中以关闭模态。

有关更多信息，您可以在此处阅读。

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

只缺少一件事。在Register启动脚本中编写以下语句。

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

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

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

然后，在页面上的各种Modals中，您可以将Submit/Create按钮的OnClientClick值设置为"；closeModal（'id_of_your_modal_container'）"

然后，我可以使用带有触发器的UpdatePanels，以及我想要在页面上进行的所有常规修剪（Toast通知等），它可以无缝地工作。如果它只是一个标准的按钮或锚标记，那么设置一个数据属性就是你所需要的"数据消除="；模态"

相关文章：