CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM

INTRODUZIONE Nel capitolo 5, dedicato all ambiente di sviluppo, si è descritto come implementare un progetto Web tramite lo strumento di sviluppo Microsoft Visual Studio 2010. Un progetto web (o sito web) non è nient altro che un insieme di file pubblicati su un server web e resi disponibili alla comunità tramite un browser. I file solitamente sono pagine HTML ma anche immagini, fogli di stile, video e file musicali. Le pagine HTML sono i file più importanti tramite le quali gli utenti possono visualizzare/scaricare i contenuti in modo semplice ed intuitivo. Le pagine HTML sono scritte nel linguaggio HTML e formattate tramite i fogli di stile (si rimanda ai Capitoli 6-7-8-9 per una descrizione più dettagliata degli argomenti). I problemi nascono quando si devono progettare pagine di una certa complessità ma in particolare pagine che devono essere diverse a seconda delle richieste dell utente. Ad esempio se una persona desidera prendere un volo aereo per andare a Praga da Torino effettuando la prenotazione online dovrà prima collegarsi al sito internet della compagnia aerea e, dopo aver inserito le indicazioni sul viaggio in questione, ottenere in risposta le informazioni necessarie che gli consentiranno di effettuarlo(numero di voli disponibili, orario di partenza, prezzo del biglietto, servizi offerti e così via). Solitamente la pagina che l utente compila è una pagina STATICA scritta nel linguaggio HTML uguale per tutti i visitatori in cui è possibile inserire i dati caratteristici della richiesta; la risposta, però, dovrà corrispondere ad una pagina DINAMICA che conterrà informazioni diverse dipendenti dalle diverse richieste degli utenti. Addirittura potrebbe anche essere diversa nel tempo a parità di richieste effettuate: si pensi al caso in cui i posti, nel mentre, si siano esauriti. Ovviamente non è logico pensare di poter creare tante pagine HTML quante possono essere le possibili risposte; infatti, non esiste alcun file HTML contenente i dati richiesti; la pagina viene generata automaticamente sulla base della richiesta dell utente, magari prelevando i dati da un database e quindi costruendo al volo il codice HTML necessario perché il client possa visualizzare la risposta. Lo sviluppatore realizza solo un modello di pagina da inviare in risposta specificando le parti che dovranno rimane fisse e le parti, invece, che dovranno essere variabili; solamente nel momento effettivo di spedizione della risposta, le pari variabili, verranno completate con i dati mancanti. Questo è in effetti l approccio utilizzato dagli sviluppatori per programmare in ambito web ma il solo linguaggio HTML, con i Tag precedentemente studiati, non è in grado di realizzarlo; Ecco perché si deve ricorrere necessariamente allo studio di una nuova tecnologia che, nel caso specifico, possa estendere le funzionalità base dell HTML in visualizzazione con dei costrutti che ne permettono anche la programmazione. Questa nuova tecnologia si chiama ASP.NET. 1

CARATTERISTICHE DI ASP.NET ASP.NET prevede Tag speciali che, insieme ai tipici Tag del linguaggio HTML, consentono di risolvere i problemi legati alla scrittura di pagine web dinamiche. Il file che contiene il codice di una pagina ASP.NET ha estensione.aspx. L ambiente di sviluppo MSVS (Microsoft Visual Studio) supporta tale linguaggio fornendo un editor avanzato per la scrittura semplice e produttiva di pagine ASP.NET. Il paradigma di funzionamento di Internet si basa sul modello client/server, dove per client si intende un qualsiasi browser Internet e per server il computer su cui è installato il server web che restituisce al client le pagine web richieste. Com è stato in precedenza detto, alla richiesta di una pagina con estensione.htm (o.html) da parte del client, il server web verifica l esistenza della pagina e la spedisce così com è (senza aggiunte o modifiche) al client, dopodiché la connessione viene chiusa e il processo ha termine. Il server web, in questo caso, ignora totalmente ciò che accade sul client e resta in attesa di una nuova richiesta. Nel caso in cui il client richiede una pagina contenente codice ASP il server web esamina tutto il codice, interpretandolo in ogni sua parte, prende eventuali iniziative (per esempio, elabora la richiesta di collegamento a un server di database da cui prelevare i dati, esegue calcoli o qualsiasi altra cosa venga richiesta dal codice), impacchetta le informazioni elaborate in formato HTML, che è l unico interpretabile dal client, e le invia al client. Il client, dal canto suo, riceve la pagina così processata e la visualizza. Anche in questo caso il server termina il suo lavoro, una volta spedita la pagina al client. A differenza di altre tecnologie (PHP su tutte) ASP.NET si basa sul modello orientato agli eventi (event-driven model). Modello orientato agli eventi significa che il server web resta in ascolto di messaggi da parte del client, in modo da poter intraprendere adeguate azioni al verificarsi di un nuovo evento. Un esempio di evento, il più semplice, è quello del clic su un pulsante della pagina; il server web, quando si fa clic sul pulsante, sa che deve eseguire la parte di codice inserita nel relativo gestore di evento. Questa caratteristica è tipica di un applicazione Windows, in cui il PC rispondendo agli eventi generati dal programma consente l interazione dell applicazione con l utente. In una pagina ASP.NET possono essere inseriti controlli (Button, Textbox, Label, Checkbox, ecc..) proprio come in un applicazione Windows. Si rimanda al Capitolo 4 Iterfaccia utente ed in particolare al paragrafo oggetti standard che formano l interfaccia grafica per una descrizione più dettagliata degli oggetti in questione. Tali controlli, di norma, generano eventi che sono gestiti dal server web. Un interfaccia così costruita è molto simile nel funzionamento a quella del Form di una classica applicazione Windows, che però è eseguita localmente dall elaboratore (che ha quindi funzioni di server); spostando questo discorso su un applicazione web ASP.NET, la pagina è definita Web Form, con riferimento alla costruzione di un interfaccia utente per un applicazione web. Un altra importante caratteristica della tecnologia ASP.NET è la capacità di generare dinamicamente codici HTML in funzione del tipo di browser che ha richiesto la pagina, cercando così di rendere compatibile lo standard HTML con tutti i browser. Anche se, come già detto in precedenza, il miglior modo per rendere il layout delle pagine web indipendente dal browser utilizzato è senz altro l utilizzo dei Fogli di Stile (CSS) ampiamente descritti nel Capitolo 7. 2

WEB FORM CAPITOLO 10 - TECNOLOGIA ASP.NET - WEB FORM I Web Form sono per la programmazione con ASP.NET equivalenti ai Form per le applicazioni Windows. I Web Form possono contenere tutti i controlli tipici di un applicazione Windows, la cui logica di gestione è però affidata al Server Web. Si rimanda al Capitolo 5 Ambiente di sviluppo ed in particolare al paragrafo Fase 1) Creazione di un progetto web per la descrizione di come creare un sito web con Visual Studio dopodiché, una volta creato, aggiungere, tramite la finestra Aggiungi nuovo elemento una Web Form. Inserire un nome valido per la pagina e lasciare spuntata la casella di selezione Inserisci codice in file separato. Alla pressione del mouse sul pulsante Aggiungi, la pagina è automaticamente inserita nel progetto Web. Tramite la finestra Esplora Soluzioni è possibile verificare tale inserimento e, in particolare, si noti che la pagina appena inserita è composta, in realtà, da due file distinti: uno con estensione.aspx il cui scopo è quello di contenere Tag Html e Tag ASP necessari per la descrizione dell interfaccia utente; e uno con estensione.aspx.vb il cui scopo è quello di contenere l eventuale codice VB (Visual Basic) in risposta agli eventi scatenati dall utente sull interfaccia. Uno degli aspetti più vantaggiosi introdotti dalla tecnologia ASP.NET è proprio quello della separazione tra il layout della pagina e il codice che la gestisce; in particolare, una volta terminata la progettazione del layout e inseriti tutti gli elementi necessari, questi ultimi potranno essere gestiti e manipolati dal codice residente in un file separato, detto file di code-behind. 3

La metodologia di modifica di tali file rimane invariata rispetto alla precedente attività di progettazione di pagine HTML, in particolare, facendo un doppio click sul nome del file, VS visualizza automaticamente il suo contenuto. A titolo di esempio si può provare ad aprire il file DEFAULT.ASPX che contiene il listato riportato di seguito: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html> Figura 10.1 o il file DEFAULT.ASPX.VB contenente il codice VB con il listato riportato di seguito: Partial Class _Default Inherits System.Web.UI.Page End Class Nel prossimo capitolo s illustrerà come progettare una Web Form con gli strumenti che l ambiente di sviluppo mette a disposizione; in particolare affronteremo la progettazione considerando separatamente due aspetti importantissimi: 1. l aspetto della progettazione dell interfaccia (Codice ASP.NET) 2. e l aspetto dell implementazione degli eventi scatenati dall utente nell utilizzo dell interfaccia (Codice VB.NET). PROGETTAZIONE DI UNA WEB FORM (INTERFACCIA) L interfaccia di una Web Form si ottiene utilizzando il linguaggio HTML con l aggiunta di nuovi Tag ASP per la gestione dell input e dell output. Come si può notare dal codice listato nella figura 10.1 il file con estensione.aspx, contenente la descrizione dell interfaccia utente, ha la stessa struttura di Tag di un file che contiene una pagina HTML standard con l aggiunta di alcuni altri Tag. Ad esempio, esiste uno speciale Tag <form> che si estende per l intero corpo della pagina (anche se questo non è un requisito) e contiene tutti gli altri Tag; l attributo runat= server in esso specificato qualifica il Form come elemento che deve essere elaborato dal motore ASP.NET sul server mentre l attributo ID ne assegna un nome univoco che ne permetterà l utilizzo da codice. Possiamo anticipatamente dire che questi due attributi dovranno sempre essere specificati quando si inseriscono nuovi Tag ASP nelle pagine; se si omettono il programma potrebbe non funzionare correttamente. La maggior parte dei Tag ASP implementano dei controlli che permettono di comunicare con l utente consentendo di prendere in input dei dati oppure di visualizzare in output dei risultati. Per semplificare la vita allo sviluppatore VS mette a disposizione una finestra dal nome Casella degli strumenti contenente tutti questi controlli in forma grafica che è possibile semplicemente trascinare nella 4

finestra di progettazione per il loro utilizzo. In automatico VS inserirà il Tag ASP corrispondente in forma testuale (Figura 10.2 parte sinistra). Ovviamente più controlli ASP si conoscono e più efficiente sarà l interfaccia utente che si andrà a realizzare. Bisogna dire, però, che qualsiasi interfaccia può essere realizzata anche solo tramite l utilizzo di tre soli semplici controlli ASP: il controllo LABEL, il controllo TEXTBOX e il controllo BUTTON. I controlli, una volta inseriti nell interfaccia, possono essere personalizzati con delle proprietà per modificarne aspetto e funzionalità. Le proprietà possono essere anche molte per ciascun controllo ma VS facilità il loro utilizzo tramite la finestra Proprietà solitamente presente nella parte destra in basso della videata (Figura 10.2 in basso a destra). Tale finestra è sensibile al contesto cioè visualizza le proprietà del solo controllo su cui il cursore è posizionato (nella figura 10.2 si può osservare come la finestra Proprietà visualizzi le proprietà dell oggetto txtnome mentre il cursore si trova in progettazione sul Tag ASP Textbox con nome txtnome). Per una descrizione più approfondita della modifica delle proprietà dei controlli vedere l Appendice 1 Definire l aspetto del controllo alla fine di questo paragrafo. Figura 10.2 I Tag in precedenza scritti visualizzeranno la seguente interfaccia: Figura 10.3 Che per il momento è priva di vita; cioè, l utente è nelle possibilità di scrivere qualcosa nella casella di testo visualizzata ma alla pressione del pulsante non succederà nulla poiché non è stato ancora scritto il codice associato al clic del pulsante. 5

In conclusione, la progettazione di un interfaccia utente è un attività alquanto semplice, una volta determinati i controlli da inserire nell interfaccia basta semplicemente selezionarli dalla Casella degli strumenti e trascinarli verso la finestra di progettazione. Una volta inseriti, i controlli possono essere personalizzati tramite la finestra delle proprietà; si consiglia altresì di assegnare sempre un nome valido alla proprietà ID per semplificare successiva fase di codifica. Si rimanda al Capitolo 4, paragrafo Oggetti standard che formano l interfaccia grafica, per un ripasso dei controlli più comunemente utilizzati nelle interfacce grafiche. PROGETTAZIONE DI UNA WEB FORM (Gestione degli eventi) I Web Forms forniscono il supporto alla gestione degli eventi esattamente come accade per le interfacce Windows. Di questi, alcuni sono generati sul client in risposta alle azioni dell utente, mentre altri rispondono a determinate fasi di gestione del controllo pagina, come ad esempio il caricamento in memoria. In ogni caso, l elaborazione dell evento ha sempre luogo sul server. In questo paragrafo descriveremo la gestione del tipo di evento più comune e cioè il click su un bottone. Nel prosieguo del testo completeremo la descrizione prendendo in considerazione anche gli eventi sollevati da altri tipi di controlli e gli eventi sollevati direttamente da ASP.NET durante il ciclo di elaborazione della pagina. In ASP.NET, la gestione dell evento click sul pulsante può essere realizzato semplicemente facendo un doppio clic sul pulsante nella finestra di progettazione; automaticamente verrà aperto il file del codice e creata una procedura che dovrà essere personalizzata dal programmatore con le azioni da compiere per la gestione di tale evento. Nel caso dell esempio precedente, facendo doppio clic sul pulsante cmdsaluto, si aprirà la finestra del codice con il seguente contenuto: Partial Class _Default Inherits System.Web.UI.Page Protected Sub cmdsaluto_click(byval sender As Object, ByVal e As System.EventArgs) Handles cmdsaluto.click End Sub End Class Si è voluto evidenziare il contenitore dell evento in cui bisogna scrivere il codice di risposta. Il linguaggio utilizzato è Visual Basic (che tratteremo in modo approfondito nel prossimo Capitolo) ma, senza entrare troppo nei particolari, l istruzione Sub identifica un contenitore di codice di nome cmdsaluto_click che viene eseguito tutte le volte che si verifica l evento (Handles in inglese) cmdsaluto.click (clic con il pulsante sinistro del mouse sul pulsante di nome cmdsaluto). Il contenitore termina con End Sub e di conseguenza anche l azione predisposta. Se nel contenitore scriviamo la seguente istruzione: Protected Sub cmdsaluto_click(byval sender As Object, ByVal e As System.EventArgs) Handles cmdsaluto.click lblrisultato.text = "Benvenuto " & txtnome.text End Sub Il risultato del nostro sito web sarà quello di dare il benvenuto alla persona che ci farà visita dopo aver inserito il proprio nome nella casella di testo e cliccato con il tasto sinistro del mouse sul pulsante Saluto ; nella figura successiva se ne fornisce un esempio di risultato. 6

Oltre ai controlli tipici dell interfaccia grafica in precedenza citati (Label, TextBox, Button) il Web fornisce una tecnica aggiuntiva per visualizzare in output dei risultati che mi sento di promuovere, in quanto molto interessante, che è quella di convertire in controllo server un Tag DIV (questa operazione la si può ottenere semplicemente aggiungendo al Tag DIV la proprietà runat= server e assegnando alla proprietà ID nome valido). Il vantaggio di tale tecnica è che si può creare anche un intera pagina dinamicamente da codice in modo molto intuitivo e semplice sfruttando appieno la sintassi del linguaggio HTML. Il Tag DIV dispone, una volta convertito in controllo server, di una proprietà INNERHTML con cui sarà possibile personalizzare il suo contenuto. Si fornisce di seguito un esempio per meglio comprendere il suo funzionamento. Codice ASP.NET <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>pagina di benvenuto</title> </head> <body> <form id="form1" runat="server"> <asp:button ID="cmdSaluta" runat="server" Text="Saluta" /> <div runat="server" id="area"> </form> </body> </html> </div> Codice VB.NET Partial Class Default2 Inherits System.Web.UI.Page Protected Sub cmdsaluta_click(byval sender As Object, ByVal e As System.EventArgs) Handles cmdsaluta.click Area.InnerHtml = "<strong>caro Utente,</strong><br/> Benvenuto nel nostro sito. <br/> " & _ "<em style='font-size:18pt'>oggi è una bella giornata<em> e ti offriamo " & _ "un sacco di prodotti scontati." End Sub End Class Alla pressione del pulsante Saluta verrà visualizzato il seguente risultato: Anche se a prima vista può sembrare difficile da comprendere l istruzione Area.InnerHtml=, ha l effetto di visualizzare all interno del Tag DIV di nome area il codice Html indicato. Attenzione: In VB.NET le stringhe sono delimitate da doppi apici e per andare a capo bisogna inserire il simbolo & seguito dal simbolo _. Per evitare di fare confusione tra i doppi apici di VB.NET e i doppi apici di HTML si preferisce utilizzare gli apici semplici in HTML in considerazione dell intercambiabilità degli stessi. 7

APPENDICE 1 : DEFINIRE L ASPETTO DEL CONTROLLO L aspetto di un controllo è rappresentato dalle sue caratteristiche visuali, come altezza, larghezza, colore, eccetera. Queste sono definite assegnando opportuni valori alle sue proprietà. Per modificare il valore di una proprietà si possono utilizzare differenti metodi: 1. In progettazione tramite la finestra proprietà, dopo essersi posizionati sul Tag del controllo con il cursore; Per impostare il colore del carattere di una Label di nome LblRisultato sul colore rosso, impostare la proprietà ForeColor nel seguente modo: 2. In Progettazione inserendo manualmente l attributo corrispondente alla proprietà da modificare nel Tag del controllo Per impostare il colore del carattere di una Label di nome LblRisultato sul colore rosso si imposta la proprietà ForeColor nel seguente modo: <asp:label ID="lblRisultato" runat="server" Text="" ForeColor= Red > 3. In esecuzione inserendo un istruzione nel codice Visual Basic usando la seguente sintassi: nome-controllo.nome-proprietà = valore Per impostare invece il colore del carattere di una Label di nome LblRisultato sul colore rosso si imposta la proprietà ForColor nel seguente modo: lblrisultato.forecolor = Drawing.Color.Red Oltre alle proprietà standard dei singoli oggetti è possibile associare uno stile CSS tramite la proprietà cssclass. 8