Inserire codice Javascript all'interno di pagine ASP.NET
Senz'altro vi starete chiedendo come mai, malgrado le grandi potenzialita' offerte da ASP.Net, ci si debba ancora preoccupare di utilizzare codice Javascript all'interno delle pagine generate da ASP.Net e se ha ancora senso usare Javascript al posto di altre tecniche piu' evolute.
La risposta e' SI, Javascript e' ancora vivo e vegeto e conserva un grande vantaggio rispetto ad ASP.NET: gira nel browser client mentre ASP.Net si trova sul server, quindi non solo permette di eliminare inutili round-trips verso il server, ma sopratutto girando nel browser dell'utente permette di dare alla vostra applicazione quella reattivita' che il controllo lato server non e' in grado di darvi.
Non per ultimo ASP.Net stessa fa uso di Javascript, ad esempio quando fate uso di controlli validators all'interno della vostra pagina, viene automaticamente generato del codice Javascript anche se, in questo caso ASP.Net permette di effettuare la validazione anche dal lato server (non dimentichiamoci che l'utente potrebbe avere inibito l'esecuzione degli script all'interno del proprio browser)
L'inserimento del codice di scripting avviene attraverso i metodi RegisterOnSubmitStatement , RegisterClientScriptBlock, RegisterStartupScript e RegisterArrayDeclaration della classe Page.
Analizzeremo i metodi sopra elencati con un semplice esempio:
Create un nuovo progetto ASP.Net e nella pagina WebForm1 mettete 2 buttons (Button1 e Button2).
Inserire questa riga nell'evento Load della Page
Me.RegisterOnSubmitStatement("submit", "return confirm ('sei sicuro di volere inviare i dati?');")
Lanciate il programma e provate a premere uno qualsiasi dei pulsanti presenti nella pagina, vedrete la box di richiesta apparire.
Il metodo RegisterOnSubmitStatement permette di eseguire del codice Javascript quando il form viene inviato al server, il che in pratica si traduce (lo vedete dando un occhiata al codice HTML della pagina generata da ASP.Net) nell'associazione del vostro codice all'evento OnSubmit del form presente nella pagina.
Il primo parametro e' un identificativo dello script mentre il secondo e' l'inline code dello script stesso.
Questo metodo aggiunge il codice inline quindi non potete utilizzare blocchi <script> </script> come secondo parametro.
Per inserire blocchi di codice piu' 'sostanziosi' e' possibile usare i metodi RegisterClientScriptBlock e RegisterStartupScript, i due si differenziano per la posizione dove lo script viene inserito all'interno della pagina.
Il primo inserisce il codice al termine del tag di apertura del Form il secondo subito prima della relativa tag di chiusura.
La differenza e' notevole, se avete codice Javascript che deve accedere ai vari elementi presenti nella pagina dovete essere sicuri che i controlli siano presenti prima che lo script possa accedervi e quindi dovere per forza utilizzare RegisterStartupScript in quando il codice viene generato in una posizione tale che sicuramente tutti i controlli sono gia stati renderizzati.
Come il metodo visto in precedenza i due metodi accettano un ID dello script e il codice Javascript contenuto all'interno di una stringa, per la costruzione del codice esistono vari metodi, quello comune e' quello di inserire le varie righe che compongono lo script in un oggetto StringBuilder e passare il metodo ToString come secondo parametro dei due metodi RegisterXXX, questo pero' non solo e' scomodo ma sopratutto non vi permette di riutilizzare il codice.
Fortunatamente e' possibile utilizzare l'attributo src per far si che il codice venga caricato da un file esterno cosi che potete raggruppare tutte le vostre funzioni in un file .js.
Vediamo un esempio:
Nel vostro progetto ASP.Net create una directory scripts (che conterra' tutti i files .js) e, da Solution Explorer aggiungete un JScript file chiamandolo library.js, al suo interno scrivete questa funzione:
function showInfo(msg) {
alert (msg);
}
A questo punto inseriamo il nostro file library.js nella pagina ASP.Net utilizzando RegisterClientScriptBlock attraverso questa riga nella Page_Load
Dim sPath As String = Page.TemplateSourceDirectory & "/scripts/library.js"
Me.RegisterClientScriptBlock("side", "<script src='" & sPath & "'></script>")
Provate ad eseguire il progetto e vedrete il tag script nel codice HTML della pagina.
Ovviamente dobbiamo trovare il modo di eseguire la funzione che abbiamo incluso, per far questo la associeremo all'evento OnClick del primo pulsante in modo da vedere anche come e' possibile associare dei client scripts ai vari controlli presenti nella pagina.
Aggiungete questa riga al codice presente nella Page_Load
Button1.Attributes.Add("onClick", "showInfo('Testo pulsante:" & Button1.Text & "')")
Come vedete per aggiungere l'evento OnClick utilizziamo la collezione Attributes del controllo ed inoltre notate che possiamo interagire con lo script passandogli dei parametri che recuperiamo direttamente dalla pagina ASP.Net (in questo caso stiamo banalmente utilizzando il nome del pulsante)
Premete Button1 per vedere il risultato.
Utilizzeremo ora RegisterStartupScript per aprire una pagina popup all'avvio della nostra applicazione.
Aggiungete un nuovo WebForm al progetto, chiamatelo Test.aspx e aggiungete questo codice alle righe gia' presenti nell'evento Load della Pagina.
Me.RegisterStartupScript("test", "<script language='javascript'>window.open('test.aspx','tes t','width=200,height=200,top=200,left=200') </script>")
Questa volta abbiamo racchiuso tutto lo script in una stringa, premete F5 e guardate il risultato.
Nel caso dobbiate far uso di array all'interno dei vostri scripts, ASP.Net mette a disposizione il metodo RegisterArrayDeclaration che vi permette di dichiarare un array ed i relativi valori, il nome dell'array viene passato come primo parametro, il secondo e' invece una stringa contente i valori dei vari elementi separati da virgola.
Breve esempio:
Aggiungete questa riga di codice a quelle che avete scritto precedentemente nell Page_Load
Me.RegisterArrayDeclaration("myarray", "'uno','due'")
inoltre aggiungete questa funzione al file library.cs
function displayArray()
{
alert ('Valore del primo elemento:' + myarray[0]);
}
per finire associate la funzione displayArray() al Button2 con questa riga di codice
Button2.Attributes.Add("onClick", "displayArray()")
Lanciate la pagina e premete Button2 per verificare come da script potete accedere al valore del primo elemento dell'array che avete appena definito.
Per completezza segnalo che la classe Page espone anche il metodo RegisterHiddenField che vi permette di creare un hidden field ed relativo valore iniziale.
Ecco un esempio di come creare un campo hidden 'myHiddenField' con valore iniziale '1'
Me.RegisterHiddenField("myHiddenField", "1")
Ecco l'estratto della pagina HTML generata
<input type="hidden" name="myHiddenField" value="1" />
<input type="hidden" name="__VIEWSTATE"
come potete vedere il campo hidden viene posto immediatamente prima dell'hidden field della gestione del ViewState.
Controllo della generazione degli script
Tutti gli esempi che vi ho presentato vengono eseguiti nell'evento load della pagina, questo vuol dire che il codice Javascript viene ricreato ad ogni postback, in caso di script 'corposi' questo potrebbe impattare sulle prestazioni della vostra applicazione, quindi potrebbe far comodo poter generare lo script solo se non gia' presente all'interno della pagina.
Questo e' possibile grazie alle funzioni IsStartupScriptRegistered e IsClientScriptBlockRegistered della classe Page.
A queste funzioni e' viene passato l'identificativo dello script che si vuole verificare e, se gia' presente nella pagina, la funzione ritorna True permettendo percio' di evitarne un inutile rigenerazione.
Alla luce di questo un esempio piu' corretto degli esempi citati in precendenza potrebbe essere:
If Not Me.IsStartupScriptRegistered("test") Then
Me.RegisterStartupScript("test", "<script language='javascript'>window.open('test.aspx','tes t','width=200,height=200,top=200,left=200') </script>")
End If
Tutti noi sappiamo quanto comodi siano gli script nelle pagine HTML ed ora (mi auguro) sapete anche come implementarli nelle vostre applicazioni ASP.Net, ricordatevi pero' che gli script possono essere disabilitati quindi tenetene conto quando progettate le vostre applicazioni prevedendo un controllo aggiuntivo sul lato server.