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





jquery-ui (15)


Con ASP.NET usa semplicemente UseSubmitBehavior="false" nel tuo pulsante ASP.NET:

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

Riferimento: proprietà Button.UseSubmitBehavior

Ho una finestra di dialogo dell'interfaccia utente jQuery che funziona perfettamente 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 in modo da formare:

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

Ma ancora senza successo ...




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



Non volevo aggirare questo problema per ogni finestra di dialogo nel mio progetto, quindi ho creato un semplice plugin jQuery. Questo plugin serve solo per aprire nuove finestre di dialogo e posizionarle all'interno del 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, prima carichi 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.




Tieni presente che è disponibile un'impostazione aggiuntiva in jQuery UI v1.10. È stata aggiunta un'impostazione appendTo , per risolvere il problema in ASP.NET si sta utilizzando per aggiungere nuovamente l'elemento al modulo.

Provare:

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



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

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

Aggiungi il tuo asp:button all'interno della finestra di dialogo, e funziona bene.

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




So che questa è una vecchia domanda, ma per chiunque abbia lo stesso problema c'è una soluzione più nuova e più semplice: è stata introdotta un'opzione "appendTo" in jQuery UI 1.10.0

appendTo

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



La soluzione di Robert MacLean con il più alto 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 di jQuery, non dimenticare di aggiungerla al genitore. Come di seguito:

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




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

L'utilizzo di questo codice ha risolto il mio problema e ha funzionato in tutti i browser, Internet Explorer 7, Firefox 3 e Google Chrome. Inizio ad amare jQuery ... È una struttura interessante.

Ho provato anche con il 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>



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

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



Principalmente è perché jQuery sposta la finestra di dialogo all'esterno dei tag del modulo utilizzando il DOM . Spostalo indietro nei tag del modulo e dovrebbe funzionare correttamente. Puoi vedere questo ispezionando l'elemento in Firefox.




Fantastico! Questo ha risolto il mio problema con ASP: evento Button non attivato all'interno di jQuery modal. Tieni presente che l'utilizzo del modal UI jQuery con quanto riportato di seguito consente di attivare l'evento del pulsante:

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



La soluzione esatta è;

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



La soluzione $('#dialog').parent().appendTo($("form:first")) funziona perfettamente in IE 9. Ma in IE 8 fa apparire e scomparire la finestra di dialogo direttamente. Non è possibile vederlo a meno che non si inseriscano alcuni avvisi, quindi sembra che la finestra di dialogo non venga mai visualizzata. Trascorro una mattina trovando una soluzione che funziona 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




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



Ottieni tutte le radio:

var radios = jQuery("input[type='radio']");

Filtra per ottenere quello che viene controllato

radios.filter(":checked")






c# asp.net jquery jquery-ui postback