JQuery UI Диалог отображается с помощью кнопки ASP.NET - PullRequest
Новая
       12

JQuery UI Диалог отображается с помощью кнопки ASP.NET

4 голосов
/ 23 февраля 2010

Я пытаюсь показать модальное диалоговое окно, когда пользователь нажимает кнопку 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, появляется модальное всплывающее окно, но сразу после этого страница выполняет обратную передачу.

Что происходит?

Ответы [ 6 ]

3 голосов
/ 23 февраля 2010

Хотя добавление return false; решит вашу проблему (как предлагают другие ответы), я думаю, что вам лучше всего использовать стандартную кнопку HTML. В этом случае нет никаких оснований использовать элемент управления ASP.NET, поскольку вы не собираетесь выполнять обратную передачу.

Однако, если вы настаиваете на использовании кнопки ASP.NET, по крайней мере установите UseSubmitBehavior="False", чтобы кнопка отображалась как <input type="button"/> вместо <input type="submit"/>.

3 голосов
/ 23 февраля 2010

Попробуйте 

OnClientClick="return ShowDialog();"

И 

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

Это предотвратит обратную передачу.

2 голосов
/ 23 февраля 2010

Ваш OnClientClick должен вернуть false примерно так: 

OnClientClick="ShowDialog(); return false;"

Кнопки по умолчанию отправляют, но возвращают false, предотвращает поведение по умолчанию

1 голос
/ 23 февраля 2010

Эта статья может иметь для вас какое-то значение: using-jquery-modal-диалоговое-подтверждение-с-as-net-server-control .

Надеюсь, это поможет некоторым.

1 голос
/ 23 февраля 2010

Вы не возвращаете false из своего OnClientClick. Если вы явно не возвращаете false, в этой ситуации предполагается «true». Возвращаемое значение true из вашего OnClientClick указывает, что можно сделать обратную передачу. Попробуйте изменить OnClientClick на следующее (добавив «return false» после вашего вызова ShowDialog ()) 

OnClientClick="ShowDialog();return false;"
0 голосов
/ 30 марта 2011

Использовать функцию jQuery protectDefault () для предотвращения обратной передачи кнопки

Попробуйте это: 

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