Creare un controllo che fa uso di UpdatePanel
L’UpdatePanel è senza dubbio uno dei controlli più utili di Atlas, purtroppo però ci sono alcune particolarità che è bene conoscere, per evitare di incappare in spiacevoli inconvenienti.
Spesso l’UpdatePanel viene inserito all’interno di controlli utente. Nell’esempio accluso si può infatti vedere che il Controllo1.ascx, ha due semplici combo per effettuare una selezione a cascata racchiuse da un UpdatePanel, il cui scopo è essenzialmente quello di impedire che ad ogni selezione tutta la pagina venga nuovamente renderizzata.
Naturalmente la pagina ospitante (Page1.aspx) deve contenere un controllo ScriptManager ed abilitare il PartialRendering affinché tutto funzioni correttamente. Purtroppo come si può vedere eseguendo la Page2.aspx se il controllo utente viene utilizzato all’interno di un controllo Wizard si generano errori javascript quando si effettua il postback della pagina. Spendendo un po’ di tempo debuggando il javascript dell’Atlas si scopre che l’errore è dovuto al fatto che il controllo Wizard renderizza nella pagina solamente i controlli del tab corrente. Purtroppo Atlas esaminando il codice sorgente della pagina nota che sono presenti due istanze del Controllo1.ascx ed quindi nella pagina sono effettivamente presenti due controlli UpdatePanel. Questo fa si che durante il postback il codice javascript si aspetta che la pagina contenga entrambi gli UpdatePanel, purtroppo però quello relativo al tab non attivo del Wizard non è in realtà presente nel DOM della pagina ed ecco la sorgente dell’errore.
Risolvere il problema del wizard
La soluzione è nel Controllo2.ascx e consiste semplicemente nell’utilizzo corretti dei trigger degli UpdatePanel, in modo da indicare al motore javascript di Atlas di aggiornare l’UpdatePanel solamente quando la prima combo genera l’evento di cambio indice. In questo a runtime durante il postback causato da un controllo Atlas cerca di aggiornare solamente l’UpdatePanel per cui il trigger è stato attivato, ignorando quindi gli UpdatePanel che non sono effettivamente presenti nella pagina.
Purtroppo i problemi non sono finiti. Nella pagina Page4.aspx un altro bug si genera quando si tenta di creare dinamicamente da codice un’istanza del Controllo2.ascx.
Purtroppo anche in questo caso a runtime Atlas va in errore, questa volta però non si genera un errore javascript, ma viene mostrata un educata messagebox in cui l’utente è avvertito del fatto che il nome del controllo utilizzato per il trigger non è valido. Per capire l’origine di questo altro problema bisogna confrontare ciò che viene renderizzato nel caso di controllo incluso a design time (page1.aspx) con il DOM della pagina dinamica. Nel caso di inclusione a design time in particolare ecco come viene renderizzata la prima dropDownList del controllo utente.
Mentre ecco quello che appare nella pagina che include dinamicamente il controllo.
In questo caso molto probabilmente il motore javascript di Atlas quando esamina la struttura della pagina genera il javascript corrispondente considerando che i nomi dei controlli nel DOM vengano generati sempre con lo stesso criterio. Purtroppo per i controlli dinamici il nome del controllo segue una regola di denominazione differente e da qui l’errore, perché si cerca nel DOM il nome di un controllo inesistente.
Generare trigger dinamicamente
Il problema precedente è derivato dal trigger e se il ragionamento fatto in precedenza è corretto la soluzione è semplicemente generare dinamicamente tutti i trigger nell’evento PreRender del controllo utente. Questa accortezza permette di indicare in modo corretto l’id del controllo.
Se si esegue un run della pagina in modalità debug si può notare che il vero id del controllo è MyId_DropDownList1 e dato che questa volta siamo direttamente noi da codice che lo indichiamo per il trigger, il problema viene aggirato.
Un ulteriore considerazione
Talvolta accade che abilitando il partial rendering si generino errori javascript in linee che non esistono tipo 8.329.456 e che non è possibile debuggare. Questi errori sono quasi sempre generati da javascript incluso in modo non corretto nella pagina. Così come Microsoft stessa spiega nel punto 9 del documento Building Asp.NET2.0 web sites Using Web Standards non è possibile includere codice javascript nella pagina XHTML senza particolari accortezze, perché potrebbe alterare la struttura del documento. In sostanza la pagina html deve essere un documento XML valido, ma se nel javascript si utilizzano segni come < e > la validità del documento XML cade. A questo punto, dato che è impossibile utilizzare le sequenze di escape < & perché altrimenti il codice javascript non funzionerebbe, la soluzione è includere tutto in una sezione CDATA. In sostanza Microsoft consiglia di inserire uno script in questo modo
Talvolta nemmeno questo funziona e gli errori javascript continuano a presentarsi, un approccio più conservativo è invece il seguente
Includendo tutti gli script della pagina in apposite sezioni CDATA si è certi che la struttura XML del documento verrà preservata e ATLAS non genererà strani errori durante il PartialRendering.
Conclusioni
Atlas è sicuramente uno dei prodotti più interessanti per ASP.NET 2.0; è gratuito, è Microsoft e promette grandi funzionalità. Nonostante questo non bisogna mai dimenticare che è ancora un prodotto in beta ed è quindi inevitabile incontrare nello sviluppo qualche piccolo ostacolo, che però può sempre essere superato con un po’ di pazienza e una buona sessione di debugging.