Finestra di dialogo dell'interfaccia utente jQuery con postback del pulsante ASP.NET

Ho una finestra di dialogo dell'interfaccia utente jQuery che funziona alla grande sulla mia pagina 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');
    });
});

Il mio div:

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

Ma btnButton_Click non viene mai chiamato ... Come posso risolverlo?

Ulteriori informazioni: ho aggiunto questo codice per spostare div nel modulo:

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

Ma ancora senza successo ...

Sei vicino alla soluzione, stai solo ottenendo l'oggetto sbagliato. Dovrebbe essere così:

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

L'uso di questo codice ha risolto il mio problema e ha funzionato in tutti i browser, Internet Explorer 7, Firefox 3 e Google Chrome. Comincio ad amare jQuery ... È un quadro fantastico.

Ho provato anche con rendering parziale, esattamente quello che stavo cercando. Grande!

<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, il modulo: la prima tecnica non ha funzionato per me.

Tuttavia, la tecnica in quell'articolo del blog ha fatto:

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

In particolare, aggiungendo questo alla dichiarazione della finestra di dialogo:

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

Tenere presente che esiste un'impostazione aggiuntiva nell'interfaccia utente di jQuery v1.10. È stata aggiunta un'impostazione appendTo per risolvere la soluzione alternativa ASP.NET che si sta utilizzando per aggiungere nuovamente l'elemento al modulo.

Provare:

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

La risposta di Ken sopra ha fatto il trucco per me. Il problema con la risposta accettata è che funziona solo se nella pagina è presente un singolo modale. Se hai più modali, dovrai farlo in linea nel parametro "open" durante l'inizializzazione della finestra di dialogo, non dopo il fatto.

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

Se fai ciò che la prima risposta accettata ti dice con più modali, otterrai solo l'ultimo modale sulla pagina che funziona postando correttamente i postback, non tutti.

Principalmente perché jQuery sposta la finestra di dialogo all'esterno dei tag del modulo utilizzando DOM . Spostalo nuovamente all'interno dei tag del modulo e dovrebbe funzionare correttamente. Puoi vederlo ispezionando l'elemento in Firefox.

Non volevo risolvere questo problema per ogni finestra di dialogo nel mio progetto, quindi ho creato un semplice plugin jQuery. Questo plugin serve semplicemente per aprire nuove finestre di dialogo e inserirle nel modulo 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>

Quindi, per usare il plugin, devi prima caricare l'interfaccia utente di jQuery e poi il plugin. Quindi puoi fare qualcosa di simile al seguente:

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

Per essere chiari, questo plugin presuppone che tu sia pronto a mostrare la finestra di dialogo quando la chiami.

So che questa è una vecchia domanda, ma per chiunque abbia lo stesso problema esiste una soluzione più recente e più semplice: un'opzione "appendTo" è stata introdotta nell'interfaccia utente 1.10.0 di jQuery

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

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

Fantastico! Questo ha risolto il mio problema con ASP: l'evento Button non si attiva all'interno di jQuery modale. Nota: l'utilizzo dell'interfaccia utente dell'interfaccia jQuery con i seguenti consente di attivare l'evento button:

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

La seguente riga è la chiave per farlo funzionare!

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

Ho appena aggiunto la seguente riga dopo aver creato la finestra di dialogo:

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

Questa è stata la soluzione più chiara per me

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

Tutto il contenuto all'interno di dlg2sarà disponibile per l'inserimento nel database. Non dimenticare di modificare la dialogvariabile in modo che corrisponda alla tua.

Con ASP.NET basta usare UseSubmitBehavior="false"nel pulsante ASP.NET:

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

Riferimento: proprietà Button.UseSubmitBehavior

La soluzione di Robert MacLean con il maggior numero di voti è corretta al 99%. Ma l'unica aggiunta che qualcuno potrebbe richiedere, come ho fatto io, è ogni volta che è necessario aprire questa finestra di dialogo jQuery, non dimenticare di aggiungerlo al genitore. Come sotto:

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

Usa questa linea per farlo funzionare mentre usi l'opzione modal: true.

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

La $('#dialog').parent().appendTo($("form:first"))soluzione funziona perfettamente in IE 9. Ma in IE 8 fa apparire e scomparire direttamente la finestra di dialogo. Non puoi vederlo a meno che tu non inserisca alcuni avvisi in modo che la finestra di dialogo non appaia mai. Passo una mattina a trovare una soluzione che funzioni su entrambe le versioni e l'unica soluzione che funziona su entrambe le versioni 8 e 9 è:

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

Spero che questo aiuti gli altri che stanno lottando con lo stesso problema

Sposta la finestra di dialogo nel modo giusto, ma dovresti farlo solo nel pulsante che apre la finestra di dialogo. Ecco del codice aggiuntivo nell'esempio dell'interfaccia utente jQuery:

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

Aggiungi il tuo asp:buttondentro la finestra di dialogo, e funziona bene.

Nota: è necessario modificare <button> in <input type = button> per impedire il postback dopo aver fatto clic sul pulsante "crea utente".

La soluzione esatta è;

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