使用 ASP.NET 按钮显示的 jQuery UI 对话框答案

【问题标题】：jQuery UI Dialog shown using an ASP.NET button使用 ASP.NET 按钮显示的 jQuery UI 对话框
【发布时间】：2010-02-23 19:45:06
【问题描述】：

当用户单击 ASP.Net 按钮时，我试图显示一个模式对话框。这是我的页面：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {

            $("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                buttons: {
                    'Ok': function() {
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                    ;
                }
            });
        });
        function ShowDialog() {
            $('#dialog').dialog('open');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="TreeNew" runat="server" Text="New" OnClientClick="ShowDialog();"/>
        <asp:Label ID="Message" runat="server"></asp:Label>
        <div id="dialog" title="Select content type">
            <p id="validateTips">All form fields are required.</p>
            <asp:RadioButtonList ID="ContentTypeList" runat="server">
                <asp:ListItem Value="1">Text</asp:ListItem>
                <asp:ListItem Value="2">Image</asp:ListItem>
                <asp:ListItem Value="3">Audio</asp:ListItem>
                <asp:ListItem Value="4">Video</asp:ListItem>
        </asp:RadioButtonList>
        </div>
    </div>
    </form>
</body>
</html>

当我点击 TreeNew 按钮时，会出现模态弹出窗口，但页面会立即回发。

发生了什么事？

【问题讨论】：

为什么不使用标准的 HTML 按钮？
因为此对话框并不总是显示。我需要使用按钮进行回发。

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

【解决方案1】：

虽然添加 return false; 可以解决您的问题（正如其他答案所建议的那样），但我认为您最好的做法是使用标准 HTML 按钮。在这种情况下没有理由使用 ASP.NET 控件，因为您不打算回发。

但是，如果您坚持使用 ASP.NET 按钮，至少设置 UseSubmitBehavior="False" 以便按钮呈现为 <input type="button"/> 而不是 <input type="submit"/>。

【讨论】：

【解决方案2】：

试试

OnClientClick="return ShowDialog();"

与

function ShowDialog() {
            $('#dialog').dialog('open');
            return false;
        }

这将阻止回发。

【讨论】：

不，它不起作用。生成的 html 将按钮显示为提交按钮。

【解决方案3】：

您的 OnClientClick 需要像这样返回 false：

OnClientClick="ShowDialog(); return false;"

按钮默认回发但返回 false 会阻止默认行为

【讨论】：

【解决方案4】：

您不会从 OnClientClick 返回 false。当您没有明确返回 false 时，在这种情况下假定为“true”。 OnClientClick 的返回值为 true 表示可以进行回发。尝试将 OnClientClick 更改为以下内容（在调用 ShowDialog() 后添加“return false”）

OnClientClick="ShowDialog();return false;"

【讨论】：

哦，我比我更喜欢你的:)

【解决方案5】：

这篇文章可能对你有些价值：using-jquery-modal-dialog-confirmation-with-an-asp-net-server-control。

希望这会有所帮助。

【讨论】：

【解决方案6】：

使用 preventDefault() jQuery 函数来防止按钮回发

试试这个：

function ShowDialog(evt) {
            evt.preventDefault();
            $('#dialog').dialog('open');
        }

【讨论】：