L'interazione tra linguaggi lato server e linguaggi lato client è fondamentale per rispondere all'esigenza di un'esperienza utente efficace, ma per gli sviluppatori non è sempre semplice integrare il codice in modo semplice ed elegante, a volte per colpa delle stesse tecnologie che ha a disposizione.
Ad esempio, in passato gli sviluppatori erano costretti ad inserire (sotto forma di stringhe) le funzioni JavaScript nel codice ASP, questo per poter passare alle funzioni client-side valori di variabili ottenuti "lato-server". Non era possibile far interagire dinamicamente JavaScript e ASP.
Grazie all'ausilio di ASP.NET è possibile usare funzioni JavaScript all'interno di pagine ASP.NET. I metodi per farlo sono diversi. In questo articolo ne vedremo alcuni di livello base in dettaglio esaminando esempi pratici.
Assegnare una funzione JavaScript ad un Controllo Server
In questo primo esempio assegnamo una funzione JavaScript ad un Server Control Server. Come prima cosa inseriamo una semplice Textbox all'interno di una Web Form.
Listato 1. Inseriamo una Textbox
<form runat="server">
<INPUT type="Text" value="Textbox" runat="server" id="Textbox1">
</form>
Otteniamo la classica casella di testo con la quale poter interagire tramite uno script Server-Side.
Poniamoci l'obiettivo di modificare l'attributo value per visualizzare l'ora attuale come testo della casella. Scriviamo allora la nostra funzione nel Page_Load, ovvero il metodo eseguito sul caricamento della pagina.
Listato 2. Modifica della Textbox sul caricamento della pagina
VB.NET
<script language="VB" runat="server">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Textbox1.Value = DateTime.Now.ToString()
End Sub
</script>
C#
<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Textbox1.Value = DateTime.Now.ToString();
}
</script>
Il risultato finale sarà quello di avere una casella di testo che visualizza l'ora corrente. Così facendo, però, stiamo prelevando l'ora dal server web e non dal client, quindi se il nostro Server é in Italia ma l'utente che visualizza la pagina é in America, la nostra pagina fornirà un'informazione inutile.
Per sopperire a questo problema la cosa più semplice é quella di fornire all'utente l'ora locale prelevandola proprio dal suo Browser; per fare ciò dobbiamo avvalerci di una funzione JavaScript da eseguire sull'evento "load" del nostro <body>. Cancelliamo la funzione scritta prima e proviamo questa nuova strada.
Listato 3. Funzione JavaScript per mostrare l'ora.
<script language="JavaScript" type="text/JavaScript">
<!--
function loadHour(){
// qui va una funzione per ottenere l'oggetto
// della casella di testo
var textbox = document.forms[0]['Textbox1'];
// modifica del valore lato.client
textbox.value=Date();
}
//-->
</script>
...
<body onLoad="loadHour();">
...
Questo é il metodo più semplice per far interagire JavaScript con ASP.NET, nel caso specifico la funzione che carica l'ora locale nella casella di testo viene assegnata all'evento load della pagina.
Eseguire funzioni JavaScript tramite ASP.NET
In questo esempio abbiamo una funzione JavaScript che da eseguire al caricamento della pagina. Una semplice funzione che mostra un messaggio di benvenuto all'utente.
Listato 4. Funzione JavaScript invia messaggio saluto.
<script language="JavaScript" type="text/JavaScript">
<!--
function saluta(){
alert('Buongiorno, benvenuto su HTML.it');
}
//-->
</script>
...
<body onLoad="saluta();">
...
In questo caso ogni volta che verrà caricata la pagina l'utente sarà costretto a visualizzare questo messaggio di benvenuto. La cosa potrebbe risultare quantomeno fastidiosa. Per risolvere il problema possiamo avvalerci dell'oggetto Session che resta attivo per tutta la durata della visita dell'utente ed é unico per ogni utente.
Creiamo una variabile booleana con nome "salutato" che ci indicherà se l'utente sta navigando la pagina per la prima volta, se é già passato per questa pagina, la variabile di sessione avrà valore true.
Inoltre la classe Page possiede una collezione Attributes tramite la quale possiamo assegnare funzioni JavaScript per determinati eventi di determinati controlli.
Listato 5. Controllo nell'evento Page_Load.
VB.NET
<script language="VB" runat="server">
'Evento Load della pagina ASP.NET
Public Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
'Se la sessione non é presente saluto l'utente
If Not Session("salutato") = true
Body1.Attributes.Add("onLoad","saluta();")
'Imposto la Sessione a true
Session("salutato") = true
End If
End Sub
</script>
C#
<script runat="server">
// Evento load della Web Form
private void Page_Load(object sender, System.EventArgs e)
{
// Se la variabile di sessione non esiste
// e quindi non è impostata a "true"
if (!(Session("salutato") == true)) {
// saluta l'utente
Body1.Attributes.Add("onLoad", "saluta();");
// e imposta la variabile di sessione
Session("salutato") = true;
}
}
</script>
<body id="Body1" runat="server">
...
In questo caso quando l'utente apre la pagina per la prima volta, la variabile di sessione "salutato" non esiste, quindi la funzione JavaScript viene assegnata al Load della pagina ed eseguita. Quando l'utente preme aggiorna la pagina (ad esempio con F5), la variabile di sessione é presente e quindi la funzione JavaScript non viene assegnata al load della pagina. Se proviamo a visualizzare il codice HTML prodotto dal Browser alla prima visita e alle successive notiamo questa differenza nel tag <body>:
Listato 6. Differenze di codice nella pagina
Prima Visita
<body id="Body1" onLoad="saluta();">
Seconda Visita
<body id="Body1">
Il risultato appare più professionale del precedente. Con un linguaggio lato Client (JavaScript) preleviamo l'informazione di nostro interesse e tramite ASP.NET decidiamo dinamicamente se far eseguire la funzione Client o no.
Con questa modalità possiamo assegnare funzioni JavaScript ai nostri controlli Server dinamicamente senza dover trasformare codice JavaScript in codice Server-Side. Inoltre possiamo assegnare la stessa funzione JavaScript a più controlli contemporaneamente. Infine possiamo assegnare più funzioni JavaScript ad un singolo evento.
Listato 7. Assegnazione di più funzioni
Body1.Attributes.Add("onLoad", "saluta(); loadHour();")
Un Pulsante con Effetto RollOver
Una delle caratteristiche più sgradevoli e poco configurabili dei controlli Server è la gestione della parte grafica. Il pulsante di invio delle pagine ASP.NET viene visualizzato dai browser con una grafica standard che poco si adatta a particolari effetti grafici. Una soluzione può essere quella di creare un pulsante con un programma di grafica in 2 versioni, una per lo stato "normale" ed una per lo stato "over".
Per inserire il pulsante nella Web Form usiamo un controllo Server di tipo <asp:ImageButton>.
Listato 8. Tag per ImageButton
<asp:ImageButton ID="Button1" runat="server" ImageUrl="ImageButton_normal.gif" />
Adesso dobbiamo gestire l'evento onmouseover che si scatena al passaggio del mouse sul pulsante. Vogliamo che quando l'utente si trova con il mouse sopra il pulsante, venga visualizzata l'immagine dello stato "over". Creiamo una funzione JavaScript che carica l'immagine "over".
Listato 9. Funzione JavaScript per sostituire l'immagine
<script language="JavaScript" type="text/JavaScript">
<!--
function cambiaImmagine(nome, immagine){
nome.src = immagine;
}
//-->
</script>
Questa funzione riceve due parametri: nome é il controllo Server al quale vogliamo sostituire l'immagine e immagine è il percorso fisico dell'immagine che vogliamo visualizzare.
Nel Page_Load della nostra pagina assegnamo la funzione JavaScript agli eventi onmouseover e onmouseout del nostro controllo sostituendo l'immagine in base allo stato, in questo modo:
Listato 10. Assegnazione dinamica funzioni JavaScript
VB.NET
<script language="vb" runat="server">
Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
'Assegna la funzione JavaScript agli eventi del controllo Server
Button1.Attributes.Add("onmouseover","cambiaImmagine(this,'ImageButton_over.gif');")
Button1.Attributes.Add("onmouseout","cambiaImmagine(this,'ImageButton_normal.gif');")
End Sub
</script>
C#
<script language="vb" runat="server">
private void Page_Load(object sender, EventArgs e)
{
// Assegna la funzione JavaScript agli eventi del controllo Server
Button1.Attributes.Add("onmouseover", "cambiaImmagine(this,'ImageButton_over.gif');");
Button1.Attributes.Add("onmouseout", "cambiaImmagine(this,'ImageButton_normal.gif');");
}
</script>
Abbiamo creato una funzione JavaScript decisamente adattabile, che possiamo utilizzare tranquillamente per tutti i controlli di tipo ImageButton presenti nella pagina.
Assegnare il focus a Controlli Server ASP.NET
Nelle versioni ASP.NET 1 e 1.1 non esistono metodi o proprietà che ci consentono di assegnare dinamicamente il focus ad un determinato controllo. Possiamo semplicemente usare la proprietà TabStop per indicare se il controllo riceve il focus e la proprietà TabIndex per indicarne l'ordine di focus. In passato il tutto veniva risolto da una semplice funzione JavaScript da eseguire sul caricamento della pagina che indicava quale dovesse essere il controllo che doveva ricevere il focus.
Listato 11. Assegnazione funzione di Focus a evento Load del Body
<body onload="document.forms[0]['TextBox1'].focus();" >
In questo modo al caricamento della pagina il controllo con id uguale a "Texbox1" riceve il focus e l'utente può subito immettere del testo senza dover prima selezionare il controllo con il mouse. In questo caso però non siamo in grado di gestire questa funzione dinamicamente e stabilire se assegnare il focus a questo o a quel controllo. Anche qui l'ausilio di JavaScript insieme as ASP.NET ci consente di svolgere il tutto dinamicamente.
Listato 12. Assegnazione funzione di focus tramite ASP.NET.
<!-- Trasforma il Body in un server control -->
<body id="Body1" runat="server">
<!-- assegna il focus in Page_Load -->
VB.NET
<script language="vb" runat="server">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Assegna il focus al controllo desiderato
Body.Attributes("onLoad") = "document.forms[0]['TextBox2'].focus();"
End Sub
</script>
C#
<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
// Assegna il focus al controllo desiderato
Body.Attributes("onLoad") = "document.forms[0]['TextBox2'].focus();";
}
</script>
In questo modo stabiliamo nello strato di "Business-Logic" (ASP.NET) della pagina quale deve essere il controllo a ricevere il focus e non lasciamo la cosa allo strato di presentazione (JavaScript).
Pensiamo ad un form di inserimento dati con é una casella di testo che per essere valida deve contenere un determinato tipo di dati. Una volta inviata la pagina se questo controllo non contiene i dati corretti, possiamo riproporre la pagina con il focus impostato direttamente su quel controllo.
Una TextBox in maiuscolo
Spesso ci troviamo a dover modificare a runtime, magari dopo un POST, i contenuti di una casella di testo per poterli adattare a determinati parametri di ricerca o semplicemente per standardizzare i contenuti del Database. Un metodo da utilizzare puó essere quello di intervenire tramite i CSS e modificare la proprietá text-transform per modificare l'aspetto del testo.
Un'altra scappatoia é quella di intercettare l'evento KeyUp del controllo e modificarne i contenuti tramite una funzione JavaScript. In questo modo l'utente é libero di scrivere nella casella di testo ma noi siamo sicuri che il suo testo sará tutto in maiuscolo, perché ogni volta che lui rilascia un pulsante della tastiera, noi preleviamo il suo valore e lo trasformiamo in un valore "UpperCase".
Scriviamo la funzione JavaScript che ci consente di modificare
il valore della TextBox e la assegnamo tramite ASP.NET all'evento KeyUp del
controllo.
Listato 13. Delegato per evento KeyUp.
VB.NET
<script language="vb" runat="server">
Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
Ricerca.Attributes.Add("onKeyUp","this.value=this.value.toUpperCase()")
End If
End Sub
</script>
C#
<script runat="server">
private void Page_Load(object sender, EventArgs e)
{
if (!(Page.IsPostBack))
Ricerca.Attributes.Add("onKeyUp", "this.value=this.value.toUpperCase()");
}
</script>
Inserire codice JavaScript da file esterni tipo .Js
Fino adesso abbiamo visto come creare e successivamente inglobare funzioni JavaScript all'interno di controlli Server. Ma non sempre é possibile. Pensiamo a grosse funzioni usate per l'identificazione del Browser o per la validazione di interi form o magari per la gestione di complessi menu.
ASP.NET mette a disposizione, tramite la classe Page, il metodo RegisterClientScriptBlock che puó essere usato sia per registrare una singola funzione JavaScript passata come parametro, sia un intero file ".js".
Listato 14. Inserimento di singola funzione.
Page.RegisterClientScriptBlock("<script language=JavaScript>function AlertHello() { alert('Hello ASP.NET'); }</script>")
Listato 15. Inserimento di file Js.
Page.RegisterClientScritBlock("MyScript","<script
language=JavaScript src='MyJavaScriptFile.js'>")
Concludendo in questo articolo abbiamo visto alcune semplici tecniche di base da utilizzare per poter fare interagire JavaScript con ASP.NET, senza dover riscrivere righe e righe di codice e senza dover effettuare il porting di funzioni JavaScript in ASP.NET.
