c# - jQuery UI Diálogo con devolución de botón de ASP.NET

jquery-ui postback

Question

Tengo un jQuery UI Dialog funcionando 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 para formar:

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

Pero aún sin éxito ...

Answer 1

¡Fantástico! Esto solucionó mi problema con ASP: el evento de botón no se activaba dentro de jQuery modal. Tenga en cuenta que el uso del jQuery UI modal con lo siguiente permite que se dispare 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"))

Answer 2

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

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

Answer 3

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: Button.UseSubmitBehavior Property

Answer 4

Estás cerca de la solución, solo consigues 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"));
});

Answer 5

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 dlg2 estará disponible para insertar en su base de datos. No olvides cambiar la variable de dialog para que coincida con la tuya.

Answer 6

FWIW, la forma: la primera técnica no funcionó para mí.

Sin embargo, la técnica en ese artículo del 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");
  }

Answer 7

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 "abrir" mientras inicializa el cuadro de 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 realiza las devoluciones de datos de manera adecuada, no todas.

Answer 8

La solución $(''#dialog'').parent().appendTo($("form:first")) 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 diálogo nunca aparece. Pasé 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.

Answer 9

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 necesitar, como lo hice yo, es que siempre que necesite abrir este diálogo de jQuery, no se olvide de agregarlo a los padres. Como abajo:

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

Answer 10

La solución exacta es;

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

Answer 11

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

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

Agrega tu asp:button dentro del diálogo, y funciona bien.

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

Answer 12

No quería tener que solucionar este problema para cada diálogo en mi proyecto, así que creé un complemento simple de 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>

Así que para usar el complemento, primero debes cargar la interfaz de usuario de jQuery 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 que quede claro, este complemento supone que está listo para mostrar el cuadro de diálogo cuando lo llame.

Answer 13

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. Puedes ver esto inspeccionando el elemento en Firefox.

Answer 14

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

appendTo

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

Answer 15

Tenga en cuenta que hay una configuración adicional en jQuery UI v1.10. Se ha appendTo una configuración de appendTo a, para abordar la solución 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"
});

Answer 16

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

Answer 17

$(''#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 a jQuery ... Es un marco genial.

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

<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>