jQuery UI对话框与ASP.NET按钮回发

您已经接近解决方案，只是获取了错误的对象。应该像这样：

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});

$('#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>

值得一提的是，form:first 技术在我这里并没有奏效。

然而，那篇博客文章中的技巧确实有效：

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: function(type,data) { $(this).parent().appendTo("form"); }

如果你按照第一个被接受的答案所说的做法使用多个模态框，你只能使页面上最后一个模态框正常运行并正确触发回传，而不是所有模态框。

我知道这是一个老问题，但对于任何遇到同样问题的人来说，现在有一个更简单的解决方案：jQuery UI 1.10.0引入了“appendTo”选项。

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

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

我不想每个对话框都要解决这个问题，所以我创建了一个简单的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!

需要明确的是，此插件假定您在调用时已准备好显示对话框。

太棒了！这解决了我在jQuery模态框内使用ASP:Button时无法触发事件的问题。请注意，使用以下代码与jQuery UI模态框一起使用可以使按钮事件触发：

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

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

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变量以匹配您自己的变量。