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


Answers

$('#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>
Question

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




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.




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




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



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



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

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



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




Related