C# 带有 ASP.NET 按钮回发的 jQuery UI 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/757232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Dialog with ASP.NET button postback
提问by Paul
I have a jQuery UI Dialog working great on my ASP.NET page:
我有一个 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');
});
});
My div:
我的div：
<div id="dialog" style="text-align: left;display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>
But the btnButton_Click is never called... How can I solve that?
但是 btnButton_Click 永远不会被调用......我该如何解决？
More information: I added this code to move div to form:
更多信息：我添加了此代码以将 div 移动到表单：
jQuery("#dialog").parent().appendTo(jQuery("form:first"));
But still without success...
但是还是没有成功...
采纳答案by Robert MacLean
You are close to the solution, just getting the wrong object. It should be like this:
您已经接近解决方案了，只是得到了错误的对象。应该是这样的：
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"));
});
回答by Chad Ruppert
回答by Robert MacLean
Move the dialog the right way, but you should do it only in the button opening the dialog. Here is some additional code in jQuery UI sample:
以正确的方式移动对话框，但您应该只在打开对话框的按钮中执行此操作。以下是 jQuery UI 示例中的一些附加代码：
$('#create-user').click(function() {
$("#dialog").parent().appendTo($("form:first"))
$('#dialog').dialog('open');
})
Add your asp:buttoninside the dialog, and it runs well.
asp:button在对话框中添加您的内容，它运行良好。
Note: you should change the <button> to <input type=button> to prevent postback after you click the "create user" button.
注意：您应该将 <button> 更改为 <input type=button> 以防止在单击“创建用户”按钮后回发。
回答by Marco
$('#divname').parent().appendTo($("form:first"));
Using this code solved my problem and it worked in every browser, Internet Explorer 7, Firefox 3, and Google Chrome. I start to love jQuery... It's a cool framework.
使用此代码解决了我的问题，它适用于所有浏览器、Internet Explorer 7、Firefox 3 和 Google Chrome。我开始喜欢 jQuery...它是一个很酷的框架。
I have tested with partial render too, exactly what I was looking for. Great!
我也用部分渲染进行了测试，这正是我想要的。伟大的！
<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>
回答by Yahya
The solution from Robert MacLean with highest number of votes is 99% correct. But the only addition someone might require, as I did, is whenever you need to open up this jQuery dialog, do not forget to append it to parent. Like below:
Robert MacLean 得票最多的解决方案是 99% 正确的。但有人可能需要的唯一补充，就像我所做的，是每当你需要打开这个 jQuery 对话框时，不要忘记将它附加到父级。像下面这样：
var dlg = $('#questionPopup').dialog( 'open');
dlg.parent().appendTo($("form:first"));
var dlg = $('#questionPopup').dialog( 'open');
dlg.parent().appendTo($("form:first"));
回答by ken
FWIW, the form:first technique didn't work for me.
FWIW，形式：第一种技术对我不起作用。
However, the technique in that blog article did:
但是，该博客文章中的技术确实：
http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html
http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html
Specifically, adding this to the dialog declaration:
具体来说，将其添加到对话框声明中：
open: function(type,data) {
$(this).parent().appendTo("form");
}
回答by nickb
ken's answer above did the trick for me. The problem with the accepted answer is that it only works if you have a single modal on the page. If you have multiple modals, you'll need to do it inline in the "open" param while initializing the dialog, not after the fact.
ken上面的回答对我有用。已接受答案的问题在于，它仅在页面上只有一个模式时才有效。如果您有多个模态，则需要在初始化对话框时在“打开”参数中内联，而不是事后进行。
open: function(type,data) { $(this).parent().appendTo("form"); }
If you do what the first accepted answer tells you with multiple modals, you'll only get the last modal on the page working firing postbacks properly, not all of them.
如果您使用多个模态来执行第一个接受的答案告诉您的操作，那么您只会得到页面上的最后一个模态正确地触发回发，而不是全部。
回答by Mark Houldridge
Fantastic! This solved my problem with ASP:Button event not firing inside jQuery modal. Please note, using the jQuery UI modal with the following allows the button event to fire:
极好的！这解决了我的 ASP:Button 事件未在 jQuery 模态内触发的问题。请注意，使用带有以下内容的 jQuery UI 模式可以触发按钮事件：
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
$('#dialog').parent().appendTo($("form:first"))
return false;
});
The following line is the key to get this working!
下面这行是让这个工作的关键！
$('#dialog').parent().appendTo($("form:first"))
回答by James Sumners
I didn't want to have to work around this problem for every dialog in my project, so I created a simple jQuery plugin. This plugin is merely for opening new dialogs and placing them within the ASP.NETform:
我不想为项目中的每个对话框都解决这个问题，所以我创建了一个简单的 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>
So to use the plugin, you first load jQuery UI and then the plugin. Then you can do something like the following:
所以要使用插件，你首先加载 jQuery UI，然后加载插件。然后，您可以执行以下操作：
$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!
To be clear, this plugin assumes you are ready to show the dialog when you call it.
需要明确的是，此插件假设您已准备好在调用它时显示对话框。
回答by Buden Niere
I just added the following line after you created the dialog:
创建对话框后，我刚刚添加了以下行：
$(".ui-dialog").prependTo("form");
