当 autoOpen 为 False 时，JQuery 对话框未从 C# 代码后面打开答案

【问题标题】：JQuery Dialog Not Opening from C# Code Behind when autoOpen is False当 autoOpen 为 False 时，JQuery 对话框未从 C# 代码后面打开
【发布时间】：2021-08-09 01:38:23
【问题描述】：

我有一个 ASP.Net Web 应用程序（带有母版页），并且我在其中一个子页面上创建了一个 jQuery 对话框。此对话框用于向操作员显示错误消息是否以及何时发生在后面的代码中（例如保存错误等）。因此，没有任何一个按钮或控件可以打开此对话框。仅出于测试目的，我在页面上创建了一个 ASP 按钮，以确保可以从后面的代码中打开对话框。如果 jQuery 对话框设置为 autoOpen:true，则该 ASP 按钮每次都会打开对话框。显然，该对话框最初在页面加载时打开，但如果我关闭它，我可以使用该按钮将其打开。但是，如果我设置 autoOpen:false，则该 ASP 按钮将不会显示/打开对话框。所以我确定我打开对话框的代码是正确的，因为它的工作原理如前所述。我已经将 jQuery 对话框代码包装在一个函数中，该函数在“$(document).ready”中引用，但它仍然无法正常工作。不知道我做错了什么。对话框的 div 不包含在 UpdatePanel 中。我已经看到许多其他关于在 autoOpen:false 时显示对话框的“类似”问题的帖子，但其中一些不适用，而其他一些我已经尝试或采纳了他们的建议。

    $(document).ready(function ()
    {
        ShowPopup();            
    });


    function ShowPopup(msgBoxTitle) {
        $(function () {
            $("#UserMessageBox").dialog(
                {
                    autoOpen: false,
                    resizable: false,
                    height: "auto",
                    width: 600,
                    modal: true,
                    title: msgBoxTitle,
                    dialogClass: 'UserMessagBox',
                    buttons:
                    {
                        "Close": function () {
                            $(this).dialog("close");
                        },
                        "Next Message": function () {
                            var disableCloseBtn = ShowNextMessage();
                            if (disableCloseBtn) {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                            }
                            else {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                            }
                        },
                    },
                    open: function () {
                        $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                    },
                });
        });
    };

【问题讨论】：

标签： c# asp.net jquery-ui-dialog

【解决方案1】：

当“autoOpen”为“false”时，对话框不会像在函数上一样在初始化时打开。您需要为此使用“打开”方法：

$("#UserMessageBox").dialog("open");

文档在这里：

autoOpen

open

更新：与您在评论中提供的链接完全相同。和作品。在第一次初始化对话框后，您实际上可以在任何需要的地方调用 open 方法。所以在你运行 ShowPopup 之后，你可以在你的应用程序上运行“打开”。

更新：我做了一些更改，例如与您所写的内容相匹配。所以现在你初始化对话框，然后在你的脚本上调用它 "ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);"只是为了更新数据和标题并打开它。我将第一个打开加载只是为了表明当您关闭它时，您可以随时运行 ShowPopup（在我的测试中它是使用按钮），就像在您的脚本中一样。

$(document).ready(function ()
    {
        InitPopup();
        
        
        //just for test
        //ShowPopup('My Test Message');
        //put this code where ever you want. like in the button i createed
        //$("#UserMessageBox").dialog("open");
    });


    function InitPopup() {
    //i removed the function you created here
            $("#UserMessageBox").dialog(
                {
                    autoOpen: false,
                    resizable: false,
                    height: "auto",
                    width: 600,
                    modal: true,
                    title: '',
                    dialogClass: 'UserMessagBox',
                    buttons:
                    {
                        "Close": function () {
                            $(this).dialog("close");
                        },
                        "Next Message": function () {
                            var disableCloseBtn = ShowNextMessage();
                            if (disableCloseBtn) {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                            }
                            else {
                                $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                            }
                        },
                    },
                    open: function () {
                        $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                    },
                });
    };
    
    function ShowPopup(msgBoxTitle) {
      $("#UserMessageBox").html('');
      $("#UserMessageBox").append('<p>' + msgBoxTitle + '</p>');
      $("#UserMessageBox").dialog("option", "title", msgBoxTitle);
      $("#UserMessageBox").dialog("open");
    }
    $('#btn').on('click', function() { ShowPopup('New Message.'); })

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id = "UserMessageBox"></div>
<button id="btn">button</button>

【讨论】：

我把那行放在哪里？我仍在努力学习和理解这个 jQuery / Javascript 的东西。我尝试将它放在 ShowPopup 函数的末尾，但没有奏效
我实际上尝试过，就像这篇文章中建议的第一个答案一样：stackoverflow.com/questions/16924329/…。它没有用。
我为你添加了一个 sn-p，表明它正在工作
我将您的代码复制并粘贴到我的 aspx 页面中，每次页面加载时都会显示 jQuery 对话框。就像 autoOpen 设置为 true 时一样。我不希望对话框像那样自动显示。我还验证了我不是无意中从后面的代码中打开了对话框。
好的，现在我明白你想要什么了，我删除了你创建的函数。在“ShowPopup”中，我刚刚初始化了对话框，然后我调用了一些其他地方来打开它

【解决方案2】：

使用@Yair 解决方案，我对其稍作修改，以包含 OP 在this 帖子中所做的事情

这是最终的工作脚本代码：

<script type="text/javascript">

    $(document).ready(function () {
        InitPopup();
        //just for test
        //ShowPopup('My Test Message');
    });


    function InitPopup() {
        
        $("#UserMessageBox").dialog(
            {
                autoOpen: false,
                resizable: false,
                height: "auto",
                width: 600,
                modal: true,
                title: '',
                dialogClass: 'UserMessagBox',
                buttons:
                {
                    "Close": function () {
                        $(this).dialog("close");
                    },
                    "Next Message": function () {
                        var disableCloseBtn = ShowNextMessage();
                        if (disableCloseBtn) {
                            $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                        }
                        else {
                            $(".ui-dialog-buttonpane button:contains('Close')").button("enable");
                        }
                    },
                },
                open: function () {
                    $(".ui-dialog-buttonpane button:contains('Close')").button("disable");
                },
            });
    };

    function ShowPopup(msgBoxTitle)
    {
        $(function ()
        {
            $("#UserMessageBox").dialog("option", "title", msgBoxTitle);
            $("#UserMessageBox").dialog("open");
        });
        return false;

    }
</script>

这是另一个标记（减去母版页内容）：

<asp:Button ID="ShowPopupMsgTestBtn" runat="server" Text="Show Popup" OnClick="ShowPopupMsgTestBtn_Click" />

<asp:HiddenField ID="NextMessageIndexHF" runat="server" />
<asp:HiddenField ID="userMessagesHF" runat="server" ValidateRequestMode="Disabled"/>
<asp:HiddenField ID="UserDialogVisableHF" runat="server" />


<%--the following div makes up a dialog box used by the jQuery dialog--%>
<div id="UserMessageBox" title="User Message" style="display:none; ">
    <div style="text-align: left; margin-bottom: 5px; border-bottom: 2px solid black; padding: 5px 5px 5px 10px">
        <asp:Label ID="popupMsgHeaderLbl" runat="server" Text="Message" ForeColor="Black"></asp:Label>
    </div>
    <div style="text-align: left; padding: 10px; margin-bottom:40px">
        <asp:Label ID="popupMsgLbl" runat="server" Text="Here is a message" ValidateRequestMode="Disabled"></asp:Label>
    </div>
</div>

这是 ASP 按钮控件背后的代码，我仅用于测试，目的是展示我可以从背后的代码打开 jQuery 对话框。

    protected void ShowPopupMsgTestBtn_Click(object sender, EventArgs e)
    {
        string message = "Test Message";//not used right now but we may use this later as a parameter to "ShowPopup2()" below
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
    }

【讨论】：