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

17 回答

• 1

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

  尝试：

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

  回复于 2024-05-03T19:21:12+08:00
• 24

  你接近解决方案，只是得到错误的对象 . 它应该是这样的：

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

  回复于 2024-05-03T19:21:12+08:00
• 1

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

  使用此代码解决了我的问题，它适用于每个浏览器，Internet Explorer 7，Firefox 3和Google Chrome . 我开始喜欢jQuery ......这是一个很酷的框架 .

  我也测试了部分渲染，正是我正在寻找的东西 . 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
  
            <asp:Button ID="but_OK" runat="server" Text="Send request" />
  
            <asp:TextBox ID="tb_send" runat="server"></asp:TextBox>
  
            <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>
  

  回复于 2024-05-03T19:21:12+08:00
• 0

  FWIW，形式：第一种技术对我不起作用 .

  但是，该博客文章中的技术做到了：

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

  具体来说，将其添加到对话框声明中：

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

  回复于 2024-05-03T19:21:12+08:00
• 7

  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需要在初始化对话框时在"open" param中内联，而不是事后 .

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

  如果你做的第一个接受的答案告诉你多个模态，你只会得到页面上的最后一个模式正确地触发回发，而不是全部 .

  回复于 2024-05-03T19:21:12+08:00
• 34

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

  回复于 2024-05-03T19:21:12+08:00
• 3

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

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

  回复于 2024-05-03T19:21:12+08:00
• 1

  太棒了！这解决了我的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"))
  

  回复于 2024-05-03T19:21:12+08:00
• 312

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

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

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

  回复于 2024-05-03T19:21:12+08:00
• 37

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

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

  回复于 2024-05-03T19:21:12+08:00
• 21

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

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

  回复于 2024-05-03T19:21:12+08:00
• 8

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

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

  参考：Button.UseSubmitBehavior Property

  回复于 2024-05-03T19:21:12+08:00
• 7

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

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

  回复于 2024-05-03T19:21:12+08:00
• 3

  使用modal：true选项时，使用此行可以使其工作 .

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

  回复于 2024-05-03T19:21:12+08:00
• 3

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

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

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

  回复于 2024-05-03T19:21:12+08:00
• 1

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

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

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

  注意：单击“创建用户”按钮后，应将<button>更改为<input type = button>以防止回发 .

  回复于 2024-05-03T19:21:12+08:00
• 27

  确切的解决方案是;

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

  回复于 2024-05-03T19:21:12+08:00