Cuadro de diálogo jQuery UI con devolución de botones ASP.NET

Tengo un jQuery UI Dialog que funciona muy bien en mi página 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');
    });
});

Mi div:

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

Pero el btnButton_Click nunca se llama ... ¿Cómo puedo resolver eso?

Más información: agregué este código para mover div al formulario:

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

Pero aún sin éxito ...

Estás cerca de la solución, solo obtienes el objeto equivocado. Debería ser así:

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

El uso de este código resolvió mi problema y funcionó en todos los navegadores, Internet Explorer 7, Firefox 3 y Google Chrome. Empiezo a amar jQuery ... Es un marco genial.

También he probado con render parcial, exactamente lo que estaba buscando. ¡Excelente!

<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, la forma: la primera técnica no funcionó para mí.

Sin embargo, la técnica en ese artículo de blog hizo:

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

Específicamente, agregando esto a la declaración de diálogo:

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

Tenga en cuenta que hay una configuración adicional en jQuery UI v1.10. Se ha agregado una configuración appendTo para abordar la solución alternativa de ASP.NET que está utilizando para volver a agregar el elemento al formulario.

Tratar:

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

La respuesta de Ken arriba hizo el truco para mí. El problema con la respuesta aceptada es que solo funciona si tiene un solo modal en la página. Si tiene varios modales, deberá hacerlo en línea en el parámetro "abierto" mientras inicializa el diálogo, no después del hecho.

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

Si haces lo que la primera respuesta aceptada te dice con múltiples modales, solo obtendrás el último modal en la página que funciona correctamente, pero no todos.

Principalmente es porque jQuery mueve el diálogo fuera de las etiquetas de formulario usando el DOM . Vuelva a colocarlo dentro de las etiquetas de formulario y debería funcionar bien. Puede ver esto inspeccionando el elemento en Firefox.

No quería tener que solucionar este problema para cada diálogo en mi proyecto, así que creé un simple complemento jQuery. Este complemento es simplemente para abrir nuevos cuadros de diálogo y colocarlos dentro del formulario 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>

Entonces, para usar el complemento, primero cargue jQuery UI y luego el complemento. Entonces puedes hacer algo como lo siguiente:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

Para ser claros, este complemento supone que está listo para mostrar el cuadro de diálogo cuando lo llame.

Sé que esta es una pregunta antigua, pero para cualquiera que tenga el mismo problema, hay una solución más nueva y más simple: se ha introducido una opción "appendTo" en jQuery UI 1.10.0

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

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

¡Fantástico! Esto resolvió mi problema con ASP: el evento de botón no se activa dentro de jQuery modal. Tenga en cuenta que el uso del modo jQuery UI con lo siguiente permite que se active el evento de botón:

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

¡La siguiente línea es la clave para que esto funcione!

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

Acabo de agregar la siguiente línea después de crear el diálogo:

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

Esta fue la solución más clara para mí.

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

Todo el contenido dentro del dlg2estará disponible para insertar en su base de datos. No olvides cambiar la dialogvariable para que coincida con la tuya.

Con ASP.NET solo use UseSubmitBehavior="false"en su botón ASP.NET:

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

Referencia: Propiedad Button.UseSubmitBehavior

La solución de Robert MacLean con el mayor número de votos es 99% correcta. Pero la única adición que alguien podría requerir, como lo hice yo, es que cada vez que necesite abrir este cuadro de diálogo jQuery, no olvide agregarlo a los padres. Como abajo:

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

Use esta línea para hacer que esto funcione mientras usa la opción modal: true.

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

La $('#dialog').parent().appendTo($("form:first"))solución funciona bien en IE 9. Pero en IE 8 hace que el diálogo aparezca y desaparezca directamente. No puede ver esto a menos que coloque algunas alertas, por lo que parece que el cuadro de diálogo nunca aparece. Me paso una mañana buscando una solución que funcione en ambas versiones y la única solución que funciona en ambas versiones 8 y 9 es:

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

Espero que esto ayude a otros que están luchando con el mismo problema.

Mueva el cuadro de diálogo de la manera correcta, pero debe hacerlo solo en el botón que abre el cuadro de diálogo. Aquí hay un código adicional en la muestra de jQuery UI:

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

Agregue su asp:buttondentro del diálogo, y se ejecuta bien.

Nota: debe cambiar el <botón> a <input type = button> para evitar la devolución de datos después de hacer clic en el botón "crear usuario".

La solución exacta es;

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