时间戳

首页 > 解决方案 > 当 autoOpen 为 False 时，JQuery 对话框未从 C# 代码后面打开

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

问题描述

我有一个 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.netjquery-ui-dialog

解决方案

使用@Yair 解决方案，我对其进行了一些修改，以包含 OP 在这篇文章中所做的事情

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

<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);
    }

推荐阅读