Spesso e volentieri leggo sui vari NG di svariati problemi nel tentativo di integrare finestre modali all'interno di una applicazione web.
Innanzitutto vorrei sottolineare che non considero la soluzione "Modale" in ambiente Web una soluzione, il flusso delle informazioni in ambiente web deve essere rivisto al fine di adeguarsi alle caratteristiche del web, i soli problemi di xBrowsing dovrebbero farci dimenticare un sacco di cose.

Comunque in situazioni ben controllate, esempio tipico sono le intranet, la soluzione modale velocizza di molto lo sviluppo e mantiene l'utente "legato" (lo ritento negativo) al tradizionale sitema di imput e di browsing dei dati, classicamente "WindowsForms Like".
Quali sono i problemi nell'uso delle modali?, andiamo con ordine:
  1. Manipolare il contentuo della pagina chiamante (implicitamente quindi avere a che fare con il DOM della pagina chiamante) direttamente dalla finestra modale. TERRIBILE, perchè? perchè in ottica OOP sparpagliamo il codice in più posti martoriando la manutenibilità della ns applicazione. Quindi!:
  2. Utilizziamo quello che gli strumenti ci forniscono (vedi MSDN):

    vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

    Possiamo costruirci quindi un simil OOP (del resto JavaScript ci prova ad essere Object Oriented) creando una piccola function che useremo come classe per il trasporto delle informazioni (vArguments) e che la dialog potrà recuperare, estrarre, manipolare e ritornare infine alla pagina chiamante (vReturnValue):

    function MyDialogArguments()
    {
        
    this.Sender = null;
        
    this.StringValue = "";
    }


    Possiamo quindi scrivere una cosa del tipo (nel Js della pagina chiamante):

    function OpenMyDialog( sVal )
    {
        
    //dove sVal è il valore da passare alla form Modale
        
    dialogArgs = new MyDialogArguments();
        dialogArgs.StringValue = sVal;
        dialogArgs.Sender = window;
        
        var retVal = window.showModalDialog( 
    'modalUrl', dialogArgs, 'winFeatures' );
        
        
    /*
            Siccome è Modale l'esecuzione resta in attesa sintanto 
            che la finestra non si chiude.
            Alla chiusura possiamo manipolare il DOM direttamente nel chiamante
            ad esempio:
        */
        
    var txtBox = document.getElementByID( "MyTextBox" );
        txtBox.Value = retVal.StringValue;
    }

    Per far si che sia possibile manipolare il valore, nella finestra modale:

    function SetValue( sVal )
    {
        
    /*
            recuperiamo dall'oggetto window la proprietà
            dialogArguments che sappiamo essere del tipo da noi impostato
            nel chiamante, impostiamo quindi i valori che ci interessano
        */
        
    window.dialogArguments.StringValue = sVal;
    }

    E il "gioco" è fatto, lascio alla vs fantasia tutte le possibili evoluzioni... ;-)

  3. Altro problemone ricorrente è come invocare il PostBack dalla finestra modale nella pagina chiamante, anche qui ritengo assolutamente superfluo accedre al DOM della pagina chiamante dalla modale. La soluzione che adotto generalmente è decisamente più semplice. Utilizzo un controllo "Server" tipo ad esempio  per l'apertura della modale agganciando agli Attributes del controllo lo script per l'apertura della pagina:

    //Lato server
    myButton.Attributes[ "OnClick" ] = "MyJsFunctionToOpenModal();";

    A questo punto l'HTML prodotto conterrà un attributo on click che verrà eseguito prima del submit del form e siccome la finestra è modale il submit resterà "bloccato" sintanto che la form modale è aperta. Utilizzando quindi al tecnica sopra descritta siamo in grado di eventualmente tornare al server informazioni recuperate lato client da una finestra modale senza necessariamente fare il postback nella modale (punto 3);
    Per invocare un sistema del genere va benissimo qualsiasi controllo server side che sia in grado di scatenare il PostBack

  4. Ultimo problema che ho affrontato, ma difficilmente esposto nei NG, è la necessità di eseguire il postback anche nella finestra modale, pensiamo ad esempio ad una modale per la ricerca di CAP o codici ABI e CAB. Bene l'inghippo è che IE non permette questo e il risultato è che la finestra viene postbeccata (terribile :D) in una nuova finestra scompaginando quindi la ns interfaccia; unica soluzione è creare dentro alla modale un IFrame e quindi eseguire tutte le pagine all'interno di questo IFrame, avremo quindi una pagina che rappresenta la modale (es. "ModalPage.aspx") che, sempre tramite la tecnica del punto 1, si aspetta di ricevere tra gli arguments l'url della pgina che dovrà caricare nel suo IFrame, se lo riceve dinamicamente lato client imposteremo la proprietà src del TAG IFrame al fine di visualizzare la pagina effettivamente richiesta.. e così via per un eventale ritorno di informazioni
have a nice day,
m.
whynot [ at ] topics [ dot ] it
These postings are provided "AS IS" with no warranties, and confer no rights.
The views expressed on this weblog are mine alone.