C# 使用ASP.NET按钮显示jQuery UI对话框_C#_Asp.net_Jquery Ui_Dialog

C# 使用ASP.NET按钮显示jQuery UI对话框

c# asp.net jquery-ui

C# 使用ASP.NET按钮显示jQuery UI对话框,c#,asp.net,jquery-ui,dialog,C#,Asp.net,Jquery Ui,Dialog,我试图在用户单击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 sr

我试图在用户单击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>


$（函数（）{
$（“#对话框”）。对话框({
bgiframe：是的，
自动打开：错误，
身高：300，
莫代尔：是的，
按钮：{
“确定”：函数（）{
$（this.dialog（'close'）；
},
取消：函数（）{
$（this.dialog（'close'）；
}
},
关闭：函数（）{
;
}
});
});
函数ShowDialog（）{
$（'dialog'）。dialog（'open'）；
}
所有表单字段都是必需的
正文
形象
音频
视频

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

发生了什么事？

试试看

OnClientClick="return ShowDialog();"

及

这将阻止回发。

您没有从OnClient单击返回false。如果没有显式返回false，则假定在这种情况下为“true”。OnClientClick返回的值为true表示可以进行回发。尝试将OnClientClick更改为以下内容（在调用ShowDialog（）后添加“return false”）

这篇文章可能对您有些价值：

希望这对您有所帮助。

您的OnClientClick需要返回false如下：

OnClientClick="ShowDialog(); return false;"

按钮默认回发但返回false可防止在添加

返回false时出现默认行为

将解决您的问题（正如其他答案所建议的），我认为您最好使用标准的HTML按钮。在这种情况下，没有理由使用ASP.NET控件，因为您不打算回发

但是，如果您坚持使用ASP.NET按钮，请至少设置

使用submitbehavior=“False”

，使按钮呈现为

，而不是


使用preventDefault（）jQuery函数来防止按钮回发
试试这个：
function ShowDialog(evt) {
            evt.preventDefault();
            $('#dialog').dialog('open');
        }

不，它不起作用。生成的html将按钮显示为提交按钮。哦，我更喜欢你的按钮而不是我的：）为什么不使用标准html按钮？因为此对话框并不总是显示。我需要用这个按钮回发邮件。
OnClientClick="ShowDialog(); return false;"

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