带有 ASP.NET 按钮回发的 jQuery UI 对话框

Posted 2023-02-14

【中文标题】带有 ASP.NET 按钮回发的 jQuery UI 对话框

【英文标题】：jQuery UI Dialog with ASP.NET button postback

【发布时间】：2010-10-19 22:11:31

【问题描述】：

我的 ASP.NET 页面上有一个运行良好的 jQuery UI 对话框：

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"));

但还是没有成功……

【问题讨论】：

LOL...起初我以为你偷了我的问题，但后来我看到你先问了。我对 FancyBox 提出了同样的问题 - ***.com/questions/2686362/…

有比显式调用 appendTo() 更好的答案。检查这个***.com/a/20589833/2487549

【参考方案1】：

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

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"));
);

【讨论】：

如果模式选项设置为 true 会怎样？在我的情况下，解决方案是完美的，但没有模态 - 使用模态，为模态效果创建的 div 使用 parent() 方法放置在对话框上

【参考方案2】：

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

【讨论】：

这个完整的例子帮助我拼凑出我在遇到这个问题时所缺少的东西。谢谢！

【参考方案3】：

FWIW，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");
  

【讨论】：

如果您不在更新面板中执行此操作，则此方法是我可以让按钮（我想做一个完整的回发）工作的唯一方法。

+1 这是唯一对我有用的代码。我没有使用更新面板。谢谢！！！拯救了我的一天！

+1：当上述解决方案不起作用时，这对我有用。我正在使用 UpdatePanel。

将对话框返回到表单以进行 PostBack 行为的最简单和最佳的解决方案。

【参考方案4】：

请注意，jQuery UI v1.10 中有一个附加设置。添加了一个 appendTo 设置，以解决您用于将元素重新添加到表单的ASP.NET 解决方法。

试试：

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

【讨论】：

这对我来说不适用于同一页面上的 2 个 jquery 对话框。我希望它是正确的解决方案。

parent().appendTo("form") 技术不适用于模态对话框，因为覆盖 div 停留在表单之外并最终覆盖对话框（使其无法操作）。通过在 jquery 1.10 中使用这个新的 appendTo 属性，覆盖 div 被放置在正确的位置，因此模式对话框正常工作。

这应该是现在正确的答案，因为 jquery UI 库已经更新以添加 appendTo 设置。谢谢@Mike 为我节省了很多时间。

【参考方案5】：

ken 上面的回答对我有用。已接受答案的问题在于，它仅在页面上有单个模式时才有效。如果您有多个模式，则需要在初始化对话框时在“open”参数中内联，而不是事后。

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

如果您使用多个模式按照第一个接受的答案告诉您的操作，那么您只会让页面上的最后一个模式正常触发回发，而不是全部。

【讨论】：

+1 绝对正确。为我解决了我的问题。但为什么有必要？我想不通。

【参考方案6】：

主要是因为 jQuery 使用DOM 将对话框移动到表单标签之外。将其移回表单标签内，它应该可以正常工作。您可以通过检查 Firefox 中的元素来看到这一点。

【讨论】：

我把它移到了表单里面：jQuery("#dialog").parent().appendTo(jQuery("form:first"));但问题仍然存在......

您没有在 btnButton 对象上注册任何其他 jquery 事件吗？

你什么时候把它放回表单中？打开后立即？

jQuery(function() jQuery("#dialog").dialog( draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen : false, minHeight: 10, minwidth: 10 ); jQuery("#dialog").parent().appendTo(jQuery("form:first")); );应该是这样。

还是不开心？至少当您单击按钮时，如果在表单中，它应该会引起帖子。您是否收到 JS 错误？模态没有关闭还是什么？

【参考方案7】：

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

为了清楚起见，这个插件假定您在调用它时已准备好显示对话框。

【参考方案8】：

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

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

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

【讨论】：

对于模态对话框来说可能为时过早

优雅地工作

【参考方案9】：

太棒了！这解决了我的 ASP:Button 事件没有在 jQuery 模态中触发的问题。请注意，使用带有以下内容的 jQuery UI 模式可以触发按钮事件：

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

下面这行是让它工作的关键！

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

【参考方案10】：

我刚刚在您创建对话框后添加了以下行：

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

【参考方案11】：

这对我来说是最清晰的解决方案

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

【参考方案12】：

对于 ASP.NET，只需在 ASP.NET 按钮中使用 UseSubmitBehavior="false"：

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

参考：Button.UseSubmitBehavior Property

【参考方案13】：

Robert MacLean 获得最高票数的解决方案是 99% 正确的。但是像我一样，有人可能需要的唯一补充是，每当您需要打开这个 jQuery 对话框时，不要忘记将它附加到父级。如下：

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

【讨论】：

如我在 2 年前以上的回答中所述，但无论如何谢谢！

【参考方案14】：

在使用 modal:true 选项时，使用这一行来完成这项工作。

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

【参考方案15】：

$('#dialog').parent().appendTo($("form:first")) 解决方案在 IE 9 中运行良好。但在 IE 8 中，它使对话框直接出现和消失。除非您发出一些警报，否则您看不到这一点，因此该对话框似乎永远不会出现。 我花了一上午的时间寻找适用于两个版本的解决方案，而唯一适用于版本 8 和 9 的解决方案是：

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

希望这可以帮助其他遇到同样问题的人

【讨论】：

我相信您可以将 Button 的 UseSubmitBehavior 属性设置为 false 值。这样您就不需要任何append 或prepend 调用。

【参考方案16】：

以正确的方式移动对话框，但您应该只在打开对话框的按钮中执行此操作。 以下是 jQuery UI 示例中的一些附加代码：

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

在对话框中添加您的asp:button，它运行良好。

注意：您应该将 更改为 以防止在单击“创建用户”按钮后回发。

【参考方案17】：

确切的解决方案是；

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