SimpleModal interrompe i postback ASP.Net

StackOverflow https://stackoverflow.com/questions/29174

Domanda

sto usando jQuery E SempliceModale in un progetto ASP.Net per creare alcune belle finestre di dialogo per un'app Web.Sfortunatamente, nessun pulsante in una finestra di dialogo modale non può più eseguire i propri postback, il che non è realmente accettabile.

C'è una fonte che ho trovato con a soluzione alternativa, ma per quanto mi riguarda non riesco a farlo funzionare, soprattutto perché non comprendo appieno tutti i passaggi necessari.

Ho anche una soluzione alternativa, ovvero sostituire i postback, ma è brutta e probabilmente non la più affidabile.Mi piacerebbe davvero far funzionare di nuovo i postback.Qualche idea?

AGGIORNAMENTO:Dovrei chiarire, i postback non funzionano perché il Javascript utilizzato per eseguire i postback si è rotto in qualche modo, quindi non succede nulla quando si fa clic sul pulsante.

È stato utile?

Soluzione

Entrambi eravate sulla strada giusta.Quello che ho capito è che SimpleModal aggiunge la finestra di dialogo al corpo, che è esterno a ASP.Net <form>, che interrompe la funzionalità, poiché non riesce a trovare gli elementi.

Per risolverlo, ho appena modificato il sorgente SimpleModal a cui aggiungere tutto 'form' invece di 'body'.Quando creo la finestra di dialogo, utilizzo anche il file persist: true opzione, per assicurarsi che i pulsanti rimangano durante l'apertura e la chiusura.

Grazie a tutti per i suggerimenti!

AGGIORNAMENTO: La versione 1.3 aggiunge un appendTo opzione nella configurazione per specificare a quale elemento deve essere aggiunta la finestra di dialogo modale. Ecco i documenti.

Altri suggerimenti

Tutti i postback ASP.NET standard funzionano chiamando un metodo JavaScript __doPostBack nella pagina.Quella funzione invia il modulo (ASP.NET piace davvero solo un modulo per pagina) che include alcuni campi di input nascosti in cui risiedono tutto lo stato di visualizzazione e altre qualità.

A prima vista non riesco a vedere nulla in SimpalModal che possa rovinare il modulo della tua pagina o uno qualsiasi degli input nascosti standard, a meno che il contenuto di quel modale non provenga da un HTTP GET a una pagina ASP.NET.Ciò comporterebbe il rendering di due moduli ASP.NET in un unico DOM e quasi sicuramente rovinerebbe la funzione __doPostBack.

Hai considerato l'utilizzo di Controllo ASP.NET AJAX ModalPopup?

I browser Web non pubblicheranno alcun elemento del modulo disabilitato o nascosto.

Quindi quello che sta succedendo è:

  1. L'utente fa clic su un pulsante nella finestra di dialogo.
  2. Il pulsante chiama il metodo close() di SimpleModal, nascondendo la finestra di dialogo e il pulsante
  3. Il client pubblica il modulo (senza l'ID del pulsante)
  4. Il framework ASP.NET non riesce a capire quale pulsante è stato fatto clic
  5. Il tuo codice lato server non viene eseguito.

La soluzione è fare tutto ciò che è necessario fare sul client (chiudendo la finestra di dialogo in questo caso) e quindi chiamare __doPostback() tu stesso.

Ad esempio (dove "dlg" è il riferimento alla finestra di dialogo SimpleModal lato client):

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

Ciò dovrebbe nascondere la finestra di dialogo, inviare il modulo e chiamare qualsiasi evento lato server disponibile per quel pulsante.

@Dan

Tutti i postback ASP.NET standard funzionano chiamando un metodo JavaScript __doPostBack nella pagina.

asp:Buttons non chiama __doPostback() perché i controlli di input HTML già inviano il modulo.

sono stato sorpreso da questo: molte grazie a tghw e a tutti gli altri contributori sul modulo in appendice invece che sulla correzione del corpo.(risolto dagli attributi nella versione 1.3)

comunque:Se qualcuno ha bisogno di chiudere la finestra di dialogo a livello di codice da .net, puoi utilizzare questo tipo di sintassi

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

dove il javascript di closedialog è così....

    function closeDialog() {
        $.modal.close();
    }

Ho trovato i seguenti lavori senza modificare simplemodal.js:

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}

Quindi, invece di utilizzare i pulsanti nella finestra di dialogo per causare il postback, ne impedisci l'invio e quindi trovi un pulsante nascosto nel modulo e chiami il suo evento clic.

FWIW, ho aggiornato il file post del blog che hai indicato con il relativo chiarimento, ripubblicato qui - il ragionamento e altri dettagli sono nel post del blog:

La soluzione (a partire dal mio ultimo check-in prima di pranzo):

  1. Sostituisci l'evento onClose della finestra di dialogo ed effettua le seguenti operazioni:
    1. Chiama la funzione Chiudi predefinita della finestra di dialogo
    2. Imposta innerHTML del div della finestra di dialogo su un singolo
    3. Dirotta __doPostBack, indirizzandolo a una nuova funzione, newDoPostBack

Da alcuni commenti che ho visto sul web, il punto 1 necessita di qualche chiarimento.Sfortunatamente non lavoro più con lo stesso datore di lavoro e non ho accesso al codice che ho utilizzato, ma farò quello che posso.Prima di tutto, devi sovrascrivere la funzione onClose della finestra di dialogo definendo una nuova funzione e indirizzando la finestra di dialogo ad essa, in questo modo:

$('#myJQselector').modal({onClose: mynewClose});
  • Chiama la funzione Chiudi predefinita della finestra di dialogo.Nella funzione che definisci, dovresti prima chiamare la funzionalità predefinita (una best practice per qualsiasi cosa tu ignori di solito):
  • Imposta innerHTML del div della finestra di dialogo su un singolo– Questo non è un passaggio obbligatorio, quindi saltalo se non lo capisci.
  • Dirotta __doPostBack, indirizzandolo a una nuova funzione, newDoPostBack 
function myNewClose (dialog)
{
    dialog.close();
    __doPostBack = newDoPostBack;
}
  1. Scrivi la funzione newDoPostBack: 
function newDoPostBack(eventTarget, eventArgument)
{
    var theForm = document.forms[0];
    if (!theForm)
    {
        theForm = document.aspnetForm;
    }
 
    if (!theForm.onsubmit || (theForm.onsubmit() != false))
    {
        document.getElementById("__EVENTTARGET").value = eventTarget;
        document.getElementById("__EVENTARGUMENT").value = eventArgument;
        theForm.submit();
    }
}

Il nuovo Jquery.simplemodal-1.3.js ha un'opzione chiamata appendTo.Quindi aggiungi un'opzione chiamata appendTo:'form' perché l'impostazione predefinita è appendTo:'body' che non funziona in asp.net.

Aveva lo stesso problema, ma {appendTo:'form'} ha causato il rendering completamente errato del popup modale (come se avessi un problema CSS).

Risulta che il modello su cui sto costruendo include include che inseriscono altri moduli nella pagina.Una volta impostato {appendTo:'#aspnetForm'} (l'ID del modulo Asp.net predefinito), tutto ha funzionato perfettamente (incluso il postback).

Oltre alla risposta di tghw, questo eccellente post sul blog mi ha aiutato: jQuery:Correggi i tuoi postback nei moduli modali -- in particolare il commento di BtnMike:"Non devi inoltre avere cssclass =" SimpleModal-Close "impostato sul pulsante ASP:." Togliere la classe era la soluzione non ovvio.

-John

se non vuoi modificare il sorgente SimpleModal.prova questo..

Dopo aver chiamato il metodo modal() aggiungi questo:

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

il plugin SimpleModal ne aggiunge due al tuo markup.

  1. 'simplemodal-overlay' per lo sfondo
  2. 'simplemodal-container' contenente il div che desideri come modale pop-up.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top