Диалог пользовательского интерфейса jQuery с ASP.NET кнопка обратной передачи

$('#divname').parent().appendTo($("form:first"));

использование этого кода решило мою проблему, и он работал в каждом браузере, Internet Explorer 7, Firefox 3 и Google Chrome. Я начинаю любить jQuery... Это классная структура.

Я тестировал с частичным рендером тоже, именно то, что я искал. великолепно!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>

FWIW, форма: первый метод не работал для меня.

однако, техника в этой статье блога сделал:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

в частности, добавив это в объявление диалогового окна:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }

имейте в виду, что в jQuery UI v1.10 есть дополнительная настройка. Существует appendTo установка, которая была добавлена, чтобы обратиться к ASP.NET обходной путь, который вы используете для повторного добавления элемента в форму.

попробуй:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});

Кенответ выше сделал трюк для меня. Проблема с принятым ответом заключается в том, что он работает только в том случае, если у вас есть один модальный на странице. Если у вас есть несколько модалов, вам нужно будет сделать это встроенным в "open" param при инициализации диалогового окна, а не после факта.

open: function(type,data) { $(this).parent().appendTo("form"); }

Если вы делаете то, что первый принятый ответ говорит вам с несколькими модалами, вы получите только последний модал на странице, работающий с обратной связью правильно, а не все их.

в первую очередь это потому, что jQuery перемещает диалог за пределы тегов формы с помощью DOM. Переместите его обратно в теги формы, и он должен работать нормально. Вы можете увидеть это, проверив элемент в Firefox.

Я не хотел, чтобы обойти эту проблему для каждого диалога в моем проекте, поэтому я создал простой плагин jQuery. Этот плагин предназначен только для открытия новых диалогов и размещения их в ASP.NET форма:

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

Итак, чтобы использовать плагин, вы сначала загружаете jQuery UI, а затем плагин. Тогда вы можете сделать что-то вроде следующего:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

чтобы быть ясным, этот плагин предполагает, что вы готовы показать диалог при вызове его.

фантастика! Это решило мою проблему с событием ASP:Button, не срабатывающим внутри модального jQuery. Обратите внимание, что использование модального пользовательского интерфейса jQuery со следующим позволяет запускать событие button:

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

следующая строка является ключом к получить эту работу!

$('#dialog').parent().appendTo($("form:first"))

Я знаю, что это старый вопрос, но для тех, у кого есть такая же проблема, есть более новое и простое решение: опция "appendTo" была введена в jQuery UI 1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});

Я просто добавил следующую строку после того, как вы создали диалоговое окно:

$(".ui-dialog").prependTo("form");

Это было самое ясное решение для меня

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

все содержимое внутри dlg2 будет доступен для вставки в вашу базу данных. Не забудьте изменить dialog переменной совпадет с вашим.

С ASP.NET просто используйте UseSubmitBehavior="false" в вашем ASP.NET кнопка:

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />       

ссылки: .Свойство UseSubmitBehavior

решение от Роберта Маклина с наибольшим количеством голосов является 99% правильным. Но единственное дополнение, которое может потребоваться, как и я, - это всякий раз, когда вам нужно открыть этот диалог jQuery, не забудьте добавить его к parent. Как показано ниже:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

используйте эту строку, чтобы сделать эту работу при использовании параметра modal:true.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },

The $('#dialog').parent().appendTo($("form:first")) решение отлично работает в IE 9. Но в IE 8 он заставляет диалог появляться и исчезать напрямую. Вы не можете увидеть это, если вы не разместите некоторые предупреждения, поэтому кажется, что диалоговое окно никогда не появляется. Я провожу одно утро, находя решение, которое работает на обеих версиях, и единственное решение, которое работает на обеих версиях 8 и 9:

$(".ui-dialog").prependTo("form");

надеюсь, что это помогает другим, которые борются с той же проблемой

переместить диалоговое окно в правильном направлении, но вы должны сделать это только в кнопке открытия диалогового окна. Вот некоторые дополнительные коды в Примере пользовательского интерфейса jQuery:

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

добавить asp:button в диалоговом окне, и он работает хорошо.

Примечание: Вы должны изменить на , чтобы предотвратить обратную передачу после нажатия кнопки "Создать пользователя".

точное решение;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});