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

我有一个jQuery UI对话框在我的ASP.NET页面上工作得很好:

jQuery(function() { jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth: 10 }); }); jQuery(document).ready(function() { jQuery("#button_id").click(function(e) { jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]); jQuery('#dialog').dialog('open'); }); }); 

我的div:

 <div id="dialog" style="text-align: left;display: none;"> <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" /> </div> 

但是btnButton_Click从来没有被调用…我该如何解决这个问题?

更多信息:我添加了这个代码来移动div形式:

 jQuery("#dialog").parent().appendTo(jQuery("form:first")); 

但仍然没有成功

你靠近解决方案,只是得到错误的对象。 应该是这样的:

 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> 

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”参数中内联,而不是在事实之后。

 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 (ie 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:按钮事件不内射jQuery模态。 请注意,使用下面的jQuery UI模式允许触发按钮事件:

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

下面这行是获得这个工作的关键!

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

我知道这是一个古老的问题,但对于有同样问题的人来说,有一个更新,更简单的解决方案:在jQuery UI 1.10.0中引入了“appendTo”选项

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只需在ASP.NET按钮中使用UseSubmitBehavior="false"即可:

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

参考: Button.UseSubmitBehavior属性

罗伯特·麦克莱恩得票最高的解决方案是99%正确的。 但是,像我一样,唯一需要添加的人可能需要打开这个jQuery对话框,不要忘记将其附加到父项。 如下所示:

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

在使用模态:true选项的时候使用这一行来完成这个工作。

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

$('#dialog').parent().appendTo($("form:first"))解决方案在IE 9中正常工作。但是在IE 8中,它使对话框直接出现并消失。 你不能看到这个,除非你放置一些警报,所以似乎永远不会出现对话框。 我花了一个上午找到一个解决方案适用于这两个版本,唯一的解决方案,在版本8和9是:

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

希望这可以帮助那些在同一个问题上苦苦挣扎的人

以正确的方式移动对话框,但只能在打开对话框的按钮中进行。 以下是jQuery UI示例中的一些附加代码:

 $('#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"); } });