Sei sulla pagina 1di 99

Introduzione

 di Angelo Ranucci
 26 Maggio 2006

Come noto, il Framework .NET è una tecnologia composta da una infrastruttura di classi che
possono essere usate da diversi linguaggi di programmazione ad oggetti (ad esempio C#, VB.NET,
Visual C++ e J#) e per tutti i linguaggi il codice compilato risulta essere un codice cosiddetto
“bytecode” uguale per tutti. In .NET questo codice è chiamato MSIL (Microsoft Intermediate
Language). Il codice MSIL viene poi eseguito tramite una macchina virtuale detta CLR (Common
Language Runtime).

Questo comportamento ricorda molto java e la JVM (Java Virtual Machine), con la differenza che
oltre ad avere una potenziale portabilità su qualunque sistema operativo aggiunge la novità dello
sviluppo in qualunque linguaggio di programmazione ad oggetti.

Nella pratica il Framework .NET funziona principalmente con sistemi Windows, anche se ci sono
delle implementazioni come Mono per linux o Rotor per FreeBSD e Mac OS X che stanno
prendendo piede.

In questa grossa innovazione anche le ASP (Active Server Pages) hanno subito una seria
metamorfosi, tanto che ASP.NET ne conserva poco più che il nome.

Il Framework .NET”, nella sua seconda versione, la 2.0, include significativi miglioramenti per
ASP.NET, che ne è la parte orientata allo sviluppo di applicazioni web. Alcune caratteristiche come
il code-behind, che permette di trattare in file separati il design della pagina ed il codice lato server,
sono state ereditate e migliorate nella nuova versione, ma parecchie caratteristiche sono nuove di
zecca.

Con ASP.NET 2.0, infatti, sono stati introdotti nuovi controlli per rendere più semplice lo sviluppo
di pagine web dinamiche. Ad esempio si possono aggiungere menu di navigazione
dell’applicazione in modo semplificato.

Fra i nuovi controlli vale la pena sottolineare i data control, che rendono lo sviluppo visuale di
accesso ai dati più semplice e diminuiscono la necessità di scrivere codice a mano.

Altra novità sono le Web Part con le quali si possono realizzare applicazioni che permettono
all’utente dei gradi di personalizzazione della pagina direttamente online.

La realizzazione di “Master Page”, permette di costruire ed utilizzare un layout per tutte le


pagine dell’applicazione. L’uso dei Temi, fornisce poi, un modo per dare un aspetto consistente, a
livello di applicazione, ai controlli e ai testi presenti nell’applicazione.

Come nelle precedenti versioni, l’applicazione realizzata, può essere precompilata, onde produrre
un codice eseguibile, da portare sul server di produzione senza i sorgenti.

ASP.NET 2.0 produce codice compatibile con la maggior parte dei browser in circolazione. Per
default, l’output prodotto soddisfa i requisiti XHTML 1.1, ma si può anche usare un “filtro
dispositivo”, per rendere un particolare controllo compatibile con un browser specifico.
Il Framework .NET 2.0 fornisce inoltre, il supporto per la creazione di applicazioni compatibili con
la nuova generazione di processori a 64 bit. Applicazioni costruite apposta per i 64 bit, girano molto
più velocemente delle stesse costruite per i 32 bit.

Con questa guida cerchiamo di esaminare e comprendere il funzionamento delle novità introdotte
per sfruttarle al meglio nella creazione delle nostre applicazioni web.

L’evoluzione di ASP.NET
 di Angelo Ranucci
 26 Maggio 2006

Descriviamo più in dettaglio le novità introdotte da questa versione di ASP.NET rispetto alla
versione precedente, la 1.1. Molte di queste nuove caratteristiche saranno oggetto di studio nella
guida. I cambiamenti riguardano le seguenti aree:

1. Gestione delle applicazioni


2. Progettazione e sviluppo delle pagine
3. Controlli
4. Dati
5. Sicurezza

Gestione delle applicazioni

La configurazione del sito è stata migliorata ed include maggiori impostazioni.

Sono previste due cartelle speciali, “App_Code” e “App_Data”, rispettivamente per file già
compilati e per i file dei database. Precompilare il sito consente di rilevare in anticipo eventuali
errori e di proteggere la proprietà intellettuale sul codice. Il sito compilato infatti può essere portato
in ambiente di produzione (deployment) lasciando i sorgenti nel proprio ambiente di sviluppo.

Si può inoltre aggiungere un file XML, detto site map, che fornisce le informazioni necessarie per
implementare menu di navigazione. Il site map potrebbe essere usato anche dai motori di ricerca per
catturare i collegamenti presenti nel sito.

Progettazione e sviluppo delle pagine

L’introduzione delle “Master Page” consente di creare un layout coerente definendo un aspetto
comune per un insieme di pagine, mentre il contenuto può essere implementato nelle singole
pagine, in genere dinamicamente. Si possono inoltre, usare i Temi, che contengono un’insieme di
“control Skin” per definire proprietà di controlli, stili CSS e immagini da utilizzare.

Il modello di programmazione code-behind è ora può contenere le classi parziali, per includere solo
il codice strettamente necessario al funzionamento della pagina. Il risultato è una netta separazione
tra codice lato server ed XHTML lato client. ASP.NET 2.0, comunque continua a supportare il
modello a singolo file, che prevede codice lato server e lato client nello stesso file.

Con le Web Part si possono realizzare pagine modificabili dall’utente interagendo con il browser,
ad esempio l’utente potrebbe decidere di non visualizzare una Web Part dalla pagina che sta
visitando. Le modifiche dell’utente possono essere memorizzate e riutilizzate negli accessi
successivi

Si può gestire la cache del sito operando direttamente sul file di configurazione (web.config).

Sono state migliorate anche alcune funzionalità client side. Sono disponibili procedure guidate
(wizard) per controlli “multi page” e si può fare il post da una pagina all’altra senza seguire il
consueto processo di andata e ritorno dal server.

Controlli

Tra le novità più significative c’è l’introduzione di nuovi controlli per i dati:

 GridView, che è l’erede di DataGrid permette di visualizzare ed editare dati in tabelle nonché
ordinarli, senza scrivere una riga di codice.
 TreeView, che visualizza dati da file XML ed include molte opzioni per definirne l’apparenza e le
caratteristiche. Ad esempio la navigazione per le pagine del sito si può realizzare con i controlli
SiteMapPath e TreeView.

Altri nuovi controlli gestiti da ASP.NET, che in precedenza dovevano essere implementati
direttamente in HTML e gestiti con codice lato server ad hoc, sono ora disponibili e personalizzabili
come “FileUpload”, “ImageMap” e “HiddenField”.

I controlli già esistenti sono inoltre stati migliorati con l’inserimento di ulteriori caratteristiche.

Dati

Per collegare i dati ai controlli si può adesso usare il “Data Source Control” che incapsula
connessioni, query e parametri in un singolo controllo. Lo si può configurare con valori assunti da
altri controlli, parametri di sessione, cookies, querystring, in modo visuale o programmando a mano
ed impostando i parametri a piacimento.

I dati XML possono essere collegati sia al TreeView che al GridView a seconda che si vogliano
visualizzare in modo gerarchico o tradizionale. Le stringhe di connessione ai database, si possono
inserire in una sezione dedicata del web.config, questa non è una novità ma in ASP.NET 2.0 è la
norma.

Sicurezza

ASP.NET 2.0 fornisce supporto per l’autenticazione e l’autorizzazione degli utenti e per le
password dimenticate. I controlli introdotti sono:

 Login che serve a validare le credenziali dell’utente,


 PasswordRecovery che fornisce varie opzioni per aiutare gli utenti a ricordare una password
dimenticata o a sostituirla,
 LoginName per visualizzare informazioni dell’utente loggato,
 LoginStatus per presentare un pulsante di Login/Logout,
 LoginView che serve a mostrare contenuti a seconda delle autorizzazioni concesse all’utente.
ASP.NET 2.0 offre la possibilità di gestire i ruoli degli utenti. La gestione degli utenti e dei ruoli
usa un modello che separa le funzionalità dai dati a cui il modello attinge, che possono provenire da
database SQL Server, MS Access o altro (si può realizzare anche un database personalizzato).

Ambiente di sviluppo

Microsoft mette a disposizione gratuitamente un ambiente di sviluppo per ASP.NET 2.0: Visual
Web Developer Express Edition 2005, comunemente abbreviato in VDW. Il VWD è la parte di
Visual Studio dedicata allo sviluppo di applicazioni web.

In questa guida verrà fatto riferimento al VWD come ambiente di riferimento su cui sviluppare
perchè è accessibile a tutti, essendo gratuito, è piuttosto semplice da utilizzare, ed implementa classi
presenti in ASP.NET 2.0.

Si può sviluppare in ASP.NET anche usando altri ambienti come Macromedia Dreamweaver, o
addirittura un semplice editor di testo come “Blocco Note”, ma seguire le lezioni utilizzando VWD
è alla portata di chiunque abbia un minimo di dimestichezza con il computer, senza necessariamente
essere un informatico professionista.

A volte scenderemo a livello di codice per approfondire o capire alcune scelte, o per implementare
situazioni particolari, cercando comunque di non complicare troppo la vita a chi segue la guida.

Per testare un’applicazione ASP.NET, abbiamo bisogno di un web server e, per essere più precisi,
di un application server che sia in grado di riconoscere, compilare e eseguire il nostro codice.
Possiamo usare IIS (Internet Information Server) che è presente nella versione Professional di
Windows XP ed in Windows 2000 ma non nella versione Home di Windows XP. In ogni caso
VWD mette a disposizione un web server di prova che funziona con tutti i sistemi windows.

Richiesta per ASP.NET


 di Angelo Ranucci
 26 Maggio 2006

In questa lezione ripassiamo quello che succede in una tipica navigazione in internet. Un utente usa
un browser, che è un programma “client“, digita un indirizzo ed il client formula una richiesta e la
inoltra fino al destinatario che è un altro programma fatto apposta per servire la richiesta: un web
server.

Il web server interpreta la richiesta, compie delle elaborazioni e risponde inviando al client una
pagina web. La pagina web in genere è composta da codice HTML/XHTML da regole CSS e da
script che possono essere eseguiti direttamente dal client (tipicamente Javascript).

Sia il client sia il server possono trovarsi su un qualsiasi computer purchè tra loro possa essere
stabilita una connessione internet (HTTP). Spesso, soprattutto nella fase di test delle applicazioni
essi si trovano sulla medesima macchina. In questo caso in genere si dice che il server è sul nodo
locale (localhost).

Naturalmente per dare risposte il server deve essere attivo, per questo una macchina che ospita un
server web rimane accesa 24 ore su 24.
Abbiamo detto che il server prima di dare una risposta deve compiere una elaborazione. Nel caso si
tratti della richiesta di una semplice pagina HMTL presente sulla macchina del server (detta
“statica”), l’elaborazione consiste solo nel prelievo del file dalle cartelle locali.

Il client potrebbe richiedere anche una pagina che non è presente sulle cartelle locali ma che deve
essere generata dinamicamente. In questo caso la richiesta è per una risorsa che contiene un
programma (uno script lato server) fatto per “costruire” la pagina di risposta.

Questo script viene elaborato da un altro componente che è l’application server. Riepilogando
quando arriva una richiesta per una pagina dinamica, il server la manda all’application server che
risponde con la pagina HTML costruita ad hoc.

Nel nostro caso quando parliamo di “pagine dinamiche” ci riferiamo a pagine scritte in ASP.NET
che si riconoscono per l’estensione “.aspx”.

Il web server (per ASP ed ASP.NET tipicamente IIS: Internet Information Server) riconosce la
richiesta ASP.NET e la invia all’application server. Il motore di processamento ASP.NET si occupa
di compilare, se necessario, ed eseguire il codice della pagina che può essere scritto in uno dei
linguaggi del Framework .NET, in genere C# o VB.net.

Pagine orientate agli oggetti


 di Angelo Ranucci
 26 Maggio 2006

Il modello di programmazione ASP.NET, è leggermente differente rispetto a quello degli altri


linguaggi di scripting lato server.

Nei più noti linguaggi di scripting lato server, come JSP e PHP e nelle stesse vecchie ASP, il codice
lato server viene scritto all’interno della pagina, nei punti in cui è necessaria un’interazione con il
server.

Il web server in questi casi incontra il codice server side e si occupa di inviarlo all’applicazione che
lo può tradurre. Tutto il codice client side (HTML, JavaScript), invece, viene inviato al client senza
elaborazioni.

In ASP.NET il processo è completamente differente.

Quando una pagina è richiesta per la prima volta al server ASP.NET, viene compilata, e trasformata
in un class file scritto nel linguaggio MSIL. Il codice client side viene convertito in un insieme di
espressioni di tipo output.Write (in modo simile a quanto fanno i Java application server quando
convertono le pagine JSP nelle corrispondenti servlet).

Le classi compilate non necessitano di essere ricompilate quando vengono richieste una seconda
volta, vengono ricompilate solo se subiscono modifiche.
La pagina, in ASP.NET è un oggetto

Una pagina ASP.NET è detta “web form” ed il modello di programmazione è un modello basato
sui moduli. Si è cercato di giungere ad un simile modello per far si che, un’applicazione web
somigliasse il più possibile ad un’applicazione desktop a finestre.

Un’applicazione ASP.NET quindi consiste in un insieme di web form, ognuno dei quali contiene
oggetti. Sono oggetti ospitati ad esempio i pezzi di codice lato client (HTML), i controlli server ed
altri oggetti ereditati ad esempio tramite la direttiva Import.

Se confrontiamo la velocità di ASP.NET rispetto ad ASP, notiamo un rallentamento di prestazioni


quando la pagina deve essere compilata, cioè la prima volta che viene richiesta, ma un notevole
aumento di prestazioni a regime.

Inoltre, la classe compilata (assembly) viene scritta su disco e sopravvive in caso di reboot della
macchina server, cioè non serve ricompilarla.

La classe Page

Come già accennato, quando un client richiede una pagina con estensione .aspx, sul server, i
componenti che appartengono a quella pagina vengono compilati in un’unica unità. Questa unità è
una classe che eredita dalla classe Object.Control.TemplateControl.Page.

Per questa classe Page può essere creata un’istanza ogni volta che viene richiesta la pagina aspx.
L’oggetto risultante viene utilizzato per elaborare le richieste in arrivo e restituisce i dati al client
richiedente.

La classe Page fa poi da contenitore per tutti i componenti appartenenti ad una pagina che sono essi
stessi oggetti.

Non è lo scopo di questa guida esaminare dettagliatamente le classi del Framework .NET ma
evidenzieremo alcuni aspetti della classe Page.

Proprietà della classe Page

Citiamo alcune delle proprietà della classe Page:

 Application Per ogni applicazione web, vi è un’istanza di questo oggetto che è condivisa da tutti i
client che accedono all’applicazione.
 Cache Serve per archiviare dei dati che possono rimanere inalterati tra una richiesta di pagina
el’altra.
 EnableViewState Valore booleano che indica se i comandi server debbano o no mantenere il
proprio ViewState
 IsPostBack Indica se la pagina è caricata per la prima volta
 Request Consente di accedere alle informazioni sulla richiesta HTTP
 Response Consente di accedere e modificare la risposta HTTP
 Session Riferimento all’oggetto Session che gestisce la sessione corrente

Metodi della classe Page

Tra i metodi citiamo:


 DataBind Associa i dati
 FindControl Consente di trovare un comando nella pagina
 MapPath Recupera il percorso fisico di uno specifico percorso virtuale

Nella prossima lezione esaminiamo gli eventi generati in una sequenza di andata e ritorno dal server
per la classe Page.

Il concetto di postback
 di Angelo Ranucci
 26 Maggio 2006

Prima dell’arrivo di ASP.NET, era usuale l’elaborazione degli input degli utenti, mediante 2 pagine.
La prima pagina, era statica e conteneva un tag <form> che inviava (tramite l’attributo action) una
serie di campi ad seconda pagina, dinamica, la quale si occupava di elaborare i valori inviati.

Una seconda tecnica era quella di avere il form in una pagina dinamica che inviava informazioni a
se stessa. Nel form venivano usati dei campi nascosti (hidden) per passare alcune informazioni
relative allo stato della pagina. Grazie a questo meccanismo si poteva capire se la pagina fosse stata
richiesta per la prima volta o se avesse effettuato un post su se stessa, per poi agire di conseguenza.
Questa tecnica è chiamata post back.

Il post back è implementato in ASP.NET in modo invisibile al programmatore attraverso il


controllo server etichettato <form runat="server">.

Listato 1. Dichiarazione di un controllo form

<form runat=”server”>
…. vari controlli …
</form>

Questo equivale pressappoco a

Listato 2. Esempio di post back prima di ASP.NET

<form method=post action=”nostra_pagina.aspx” runat=”server”>


…. vari controlli …

<input type=”hidden” name=”isPostBack” value=”true”>


</form>

Il form server side è indispensabile per gestire i controlli server (dall’area di testo alla GridView) si
può omettere solo se non si prevede una interazione con la pagina.

L’attributo method predefinito è post e non get come in HTML, ed i valori sono disponibili ogni
volta nella collezione Request.Form come in ASP.
Con la stessa tecnica viene mantenuto lo stato di alcuni controlli grazie alla variabile ViewState. Il
ViewState è una variabile stringa, il cui valore, come si può notare nell’esempio, è codificato e
serve per ricostruire lo stato della pagina, in quanto le comunicazioni HTTP client-server sono prive
di stato.

Se leggiamo il sorgente di una pagina generata da un web form, notiamo la presenza del
ViewState:

Listato 3. Generazione del ViewState


<body>
<form name=”ctl00″ method=”post” action=”orizzontale_b.aspx” id=”ctl00″>
<div>
<input type=”hidden” name=”__VIEWSTATE” id=”__VIEWSTATE”
value=”/wEPDwUKLTc0MDEwNTM2MWRkrh4HGxooxoD8swfeDRec5C+Aedw=” />
</div>

La postback architecture ci da la possibilità di realizzare pagine HTML contenenti controlli con cui
l’utente può interagire. I controlli scatenano eventi ed è compito dello sviluppatore realizzare gli
opportuni gestori di eventi per gestire l’interazione.

Quando effettuiamo la richiesta di una web form, vengono sollevati gli eventi:

1. Page_Init generato quando la pagina viene inizializzata


2. Page_Load generato quando la pagina viene caricata
3. Control Event generato se un comando (ad esempio un pulsante) ha inviato la pagina al
server
4. Page_Unload generato quando la pagina viene scaricata dalla memoria

La differenza tra il Page_Init ed il Page_Load è che nel Page_Init il ViewState non è stato
ancora caricato, per cui i comandi mantengono i valori predefiniti anziché i valori impostati durante
il postback.

Per gestire l’evento Page_Load, si ricorre di frequente alla proprietà IsPostBack della classe Page.
Se IsPostBack è vera, ci troviamo in un contesto di postback, vale a dire che la pagina è stata
caricata una prima volta ed è stata poi inviata al server in seguito al verificarsi di un evento sul
client. Se IsPostBack è falsa, la pagina è stata caricata per la prima volta.

Impostare l’ambiente di test


 di Angelo Ranucci
 9 Giugno 2006

Abbiamo già detto che per far funzionare le nostre pagine ASP.NET abbiamo bisogno di una
piattaforma comprensiva di un server web e del Framework .NET.
In questa guida abbiamo fatto la scelta di usare il Visual Web Developer, che integra tutta la
piattaforma di test nell’ambiente di sviluppo, ma possiamo anche scegliere di lavorare
direttamente su IIS (Internet Information Server), il web server di Microsoft. IIS è disponibile con
la versione Professional di Windows XP e sulle versioni server di Windows. Non può essere invece
installato sulla versione Home, a meno di trucchi che non stiamo ad elencare.

Installare IIS su Windows XP Pro

Per verificare se IIS è installato sul nostro sistema possiamo verificare la presenza della cartella
C:inetpubwwwroot. Se non la troviamo e disponiamo della versione Professional di Windows XP,
possiamo andare in Pannello di Controllo, Installazione applicazioni, Installazione componenti di
Windows, selezionare Internet Information Server e procedere con l’installazione.

A questo punto abbiamo IIS installato e funzionante, cioè avviato (deve essere avviato perché è un
server e rimane lì in attesa di richieste).

Possiamo verificare il funzionamento di IIS aprendo il browser, ad esempio Internet Explorer, e


digitando localhost. Si dovrebbe aprire una pagina di presentazione che è stata messa nel sito web
locale di default la cui cartella fisica è appunto C:inetpubwwwroot.

Installare il Framework .NET 2.0

Non è detto che il web server sia già pronto a ricevere le richieste per ASP.NET 2.0, specie se
stiamo lavorando con Windows XP Professional e IIS 5.1 . È fondamentale l’installazione del
Framework .NET versione 2 che possiamo scaricare dal sito Microsoft

Una volta scaricato ed installato anche il Framework, è sufficiente creare una pagina nella cartella
C:inetpubwwwroot per testare il funzionamento del sistema. Per esempio possiamo creare la
pagina ciao_mondo.aspx e scrivere il più classico dei saluti.

Listato 5. Ciao Mondo!

<script language=”C#” runat=”server”>


public void Page_Load(object sender, EventArgs e) {
Response.Write(“Ciao Mondo!”);
}
</script>

Non ci resta che scrivere http://localhost/ciao_mondo.aspx nella barra degli indirizzi del
nostro browser.

Fin’ora ci siamo serviti del sito predefinito di IIS per fare le nostre prove e se intendiamo usare solo
un sito web nella nostra macchina locale, possiamo continuare ad usare questo sito di default, porre
lì i nostri file e testare la nostra applicazione.

Se invece abbiamo più di un sito web da gestire e vogliamo separare i file fisici nonché impostare
diversi file di configurazione (web.config) dobbiamo creare un nuovo sito web.
Se abbiamo a disposizione Windows server 2003, andiamo in ‘Pannello di controllo’ poi ‘Strumenti
di amministrazione’ ed apriamo ‘Internet Information Services (IIS) Manager’. Nella cartella ‘Siti
Web’ possiamo usare gli strumenti di creazione guidata messi a disposizione da IIS 6.

Se invece usiamo IIS 5.1 con Windows XP Pro, possiamo creare delle cartelle virtuali nel sito web
predefinito.

Come spiegato nella prima lezione, se non abbiamo a disposizione IIS, cioè se disponiamo della
sola versione Home di Windows XP, possiamo seguire questa guida scaricando il Visual Web
Developer (VWD) dal sito della Microsoft e testando le nostre applicazioni direttamente
dall’ambiente di sviluppo in quanto dotato di un suo web server.

Per semplificare e concentrarci sugli aspetti peculiari delle applicazioni Web, tutti gli esempi della
presente guida saranno costruiti con il VWD in quanto oltre ad essere un ambiente di sviluppo
gratuito è particolarmente semplice da utilizzare e ci evita i problemi connessi con l’impostazione di
un web server.

Applicazioni con Visual Web Developer


 di Angelo Ranucci
 9 Giugno 2006

Come accennato nelle precedenti lezioni, gli esempi presenti in questa guida possono essere
riprodotti e testati utilizzando un qualsiasi ambiente di sviluppo, ed un server web ASP.NET 2.0
come IIS con il .NET Framework 2.0. Per il resto della guida utilizzeremo il Visual Web Developer
2005 Express Edition con il linguaggio C#.

Convertire c# in vb.net

Se siamo abituati alla sintassi di VB.NET possiamo convertire il codice e lavorare tranquillamente
grazie ai molti convertitori che si trovano online. Ne citiamo un paio gratuiti: il translator di
AspAlliance.com e l’utility di www.ragingsmurf.com.

Visual Web Developer

Il VWD si può scaricare gratuitamente dal sito della Microsoft, a patto che si disponga del Service
Pack 2 per Windows XP o del Service Pack 4 per Windows 2000.

I requisiti hardware sono: processore da 1 GHz ed almeno 512 MB di RAM, per non avere
problemi di velocità. Se abbiamo meno memoria dobbiamo stare attenti a non aprire
contemporaneamente molte applicazioni.

L’installazione è semplice e non richiede spiegazioni. Insieme al VWD, verrà scaricato ed installato
anche il Framework 2.0 .NET che richiede la disinstallazione della precedente versione, se presente
nel nostro PC.
Il VWD fornisce vari modi per sviluppare applicazioni web. Si può sviluppare su una istanza locale
di IIS oppure si può lavorare su un host FTP, cioè un server remoto, dove caricare la nostra
applicazione.

Se lavoriamo in locale, possiamo salvare il sito in una cartella del nostro file system e testarlo con il
web server di prova di VWD. Questa soluzione è ottima per chi possiede la versione Home di
Windows XP che non è fornita del IIS. Per lavorare su di un server remoto si può anche usare il
protocollo HTTP ma bisogna disporre delle estensioni server di FrontPage.

Con ASP.NET 2.0 e VWD inoltre è stato migliorato il debug. Possiamo farlo partire su una pagina
qualsiasi, che può non essere la pagina iniziale dell’applicazione. Questo selezionando la pagina o
facendo partire il debug mentre la modifichiamo.

Creare un nuovo progetto web.

Aprire il VWD e scegliere dal menu File>Nuovo sito Web (o New Web Site). Appare la seguente
schermata:

Figura 1. Impostare un nuovo sito web

Si può decidere dove salvare il sito, in questo caso “File System”, cioè in locale, sul proprio hard
disk, e la cartella che può essere cambiata mediante il pulsante “Sfoglia”. In basso possiamo
scegliere il linguaggio di default del sito, in questo caso C#.

Finite le impostazioni diamo l’OK e ci troviamo nell’ambiente di lavoro.


Figura 2. Ambiente di lavoro di VWD

Nella parte destra, in alto, troviamo il pannello “Esplora Soluzioni” (Solution Explorer), che ci
indica la cartella principale del nostro sito (WebSite1).

Il VWD ha aggiunto una cartella App_Data che dovrebbe ospitare i file dei database, ed il file
Default.aspx che sarà la nostra Home Page, cioè la pagina a cui verrà indirizzato l’utente che
digita l’indirizzo del sito sul browser.

Collegato alla Defaul.aspx c’è il file che contiene il codice lato server Default.aspx.cs. Ha lo
stesso nome della pagina a cui appartiene con un’estensione che varia a seconda del linguaggio
utilizzato (cs per C#, vb per VB.NET).

Nel pannello centrale vediamo la Default.aspx aperta in modalità Origine (Source view), con le
linguette in basso possiamo passare alla modalità Progettazione (Design view).

In Design view si può vedere quello che si sta facendo in modo visuale, e si possono trascinare i
controlli presenti nella parte sinistra direttamente sulla pagina.

In Source view si possono vedere i tag html, head, body e form. Per dafault, nel nostro esempio, il
codice generato è XHTML come specificato nel DOCTYPE.

La prima riga è una direttiva che specifica il linguaggio utilizzato, dove si trova il codice, il nome
della classe da cui ereditare e l’AutoEventWireup, che impostato su true per default, significa che
viene generato automaticamente un evento al caricamento della pagina gestito dal metodo
Page_Load che troviamo già impostato nel file Default.aspx.cs che contiene il codice.
Aggiungere una nuova pagina.

Per aggiungere una nuova pagina al sito, si può cliccare con il pulsante destro del mouse sul nome
del sito, in Esplora Soluzioni, e scegliere Aggiungi nuovo elemento (Add New Item). Appare la
schermata:

Figura 3. Aggiungere un nuovo elemento

Questa volta si può scegliere se mettere o no il codice in un file separato, si può nominare la pagina,
scegliere il linguaggio ed il tipo di item. Web Form è la normale pagina dinamica con estensione
aspx.

Spuntando “Seleziona pagina master” (Select master page) si dice che quella pagina ha una Master
Page, di cui parleremo in seguito. Spuntiamo “Inserisci codice in file separato” (Place code in
separate file) e clicchiamo “Aggiungi” (Add). Al nostro sito sarà aggiunta la pagina
Default2.aspx con il relativo Default2.aspx.cs.

Web.config

Ogni applicazione ASP.NET dovrebbe avere un file di configurazione, chiamato Web.config. Il


VWD non lo genera automaticamente. Lo si può aggiungere, come sopra, aggiungendo un nuovo
elemento e scegliendo “File di configurazione Web” (Web Configuration File). Tuttavia se si tenta
di eseguire l’applicazione, il VWD dice che è necessario un web.config e chiede se lo deve
aggiungere all’applicazione, dicendo di si, questo viene aggiunto automaticamente, senza il nostro
intervento.

Classi partial

Esaminando i file con il codice, ad esempio Default2.aspx.cs, si nota la presenza di una definizione
di classe parziale:

Listato 6. Definizione di classe parziale


public partial class Default2 : System.Web.UI.Page

Questa è una nuova caratteristica di ASP.NET 2.0 . Definire le classi in modo parziale equivale a
dire che sono definite in più di un file fisico. Quando il compilatore trova una definizione di classe
partial va a cercare le altre definizioni della stessa classe partial, le mette insieme e compila il
tutto.

Le classi parziali facilitano il debugging e possono essere implementate da individui differenti


facenti parte dello stesso team di sviluppo, semplicemente concedendo le autorizzazioni a
modificare solo alcuni file e rendendo quindi più evidente la separazione tra logica di sviluppo e
interfaccia utente.

Impostare il ‘focus’ nei controlli


 di Angelo Ranucci
 9 Giugno 2006

Iniziamo ad esaminare le novità introdotte sui controlli con un semplice esempio. Vogliamo
realizzare una pagina in cui l’utente possa inserire lo stato civile e l’età. Se l’utente seleziona
“Sposato”, il cursore si posiziona su una casella di testo in cui scrivere il nome del coniuge. Se,
invece, l’utente seleziona “Single”, il cursore salta direttamente alla casella per l’inserimento
dell’età.

Proviamo a realizzare questa pagina con il VWD. Creiamo un nuovo sito sul “File System” e
chiamiamolo “Lezione7”, scegliamo il linguaggio C# e otteniamo la Default.aspx

In modalità Progettazione (Design view) scriviamo “Stato sociale:”, andiamo a capo e trasciniamo
dalla Standard Toolbox un RadioButtonList sulla nostra pagina. Clicchiamo con il destro sulla
freccia che appare passando sul componente.

Figura 1. Modificare le proprietà del componente

Appare un menu dal quale scegliamo “Modifica elementi” (Edit Items). Qui possiamo aggiungere
alcuni membri (members) alla collezione. Per esempio inseriamo “Celibe/Nubile” e
“Sposato/Sposata”.
Figura 2. Aggiungere membri alla collezione

Impostiamo la proprietà AutoPostBack=true spuntando “Attiva AutoPostBack” (Enable


AutoPostBack). Questa scelta permette di causare il PostBack senza necessità di un bottone di
“submit”. La selezione di una delle opzioni della lista provocherà il refresh della pagina.

Il metodo Focus()

Abbiamo detto che a seconda dello stato civile scelto il cursore dovrebbe andare su caselle di testo
differenti. Nella precedente versione di ASP.NET, per “mettere a fuoco” un controllo bisognava
scrivere del codice client-side (ad esempio JavaScript). In ASP.NET 2.0, questo processo è stato
semplificato e lo si può fare utilizzando il metodo Focus().

Aggiungiamo quindi le due TextBox: una con id="TextBox1" ed etichetta “Nome del Consorte”,
l’altra con id="TextBox2" ed etichetta “Età”.

Con un doppio click su un controllo, VWD ci permette di scrivere del codice (in modalità origine)
per gestire l’evento principale del controllo stesso. Clicchiamo quindi due volte sulla
RadioButtonList per implementare le nostre regole sul focus nella pagina del codice.

Si apre la pagina del codice con il cursore impostato all’interno del gestore di evento da
implementare: RadioButtonList1_SelectedIndexChanged. Qui inseriamo il nostro codice:

Listato 7. Gestore dell’evento

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)


{
// controlliamo il valore selezionato
if (RadioButtonList1.SelectedValue == “Celibe/Nubile”)
// si passa alla textbox dell’età
TextBox2.Focus();
else
// altrimenti al nome del consorte
TextBox1.Focus();
}

Salviamo i due file e testiamo l’applicazione premendo F5.

Figura 3. Aspetto dell’applicazione finita

Possiamo verificare che se spuntiamo Celibe/Nubile, il cursore si sposta sul campo di input Età, e se
spuntiamo Sposato/Sposata, il cursore si sposta sul campo di input Nome del Consorte.

Il focus in un controllo si può impostare anche utilizzando il metodo SetFocus() della classe
Page. La sintassi è semplice:

Sintassi di Page.SetFocus()

Page.SetFocus(NomeControllo)

È possibile scaricare il sorgente dell’esempio qui.

Validazione per gruppi


 di Angelo Ranucci
 9 Giugno 2006

In ASP.NET 2.0 si possono raggruppare insiemi di controlli da validare. Ogni gruppo viene validato
indipendentemente dagli altri. Questa è grossa novità in quanto nella precedente versione di
ASP.NET si poteva validare solo una pagina per volta. Per approfondire questa nuova caratteristica,
realizziamo una pagina con 2 componenti “Panel“, contenenti ciascuno una TextBox ed un Button.
Con il VWD, apriamo un nuovo progetto e chiamiamolo “Lezione8”. In Design view della
Default.aspx mettiamo il primo pannello, “Panel1”, con il logo di Google, la casella di testo ed il
bottone. Subito sotto il primo, posizioniamo il secondo pannello, “Panel2”, che contiene solo la
casella di testo ed il bottone.

Nel Panel2 inseriamo dei codici ISBN. La pagina dovrebbe svolgere alcuni compiti che non
precisiamo per i nostri scopi (ad esempio potrebbe visualizzare i dettagli di un libro).

Associamo alla casella di testo per l’ISBN un RequiredFieldValidator trascinando il controllo


dal gruppo di controlli Validation all’area di lavoro, sempre in Design view. Nella finestra
“Proprietà” del RequiredFieldValidator, impostiamo il controllo da validare e scriviamo il
messaggio di errore da visualizzare.

Ora possiamo dividere i controlli in 2 gruppi di validazione. Cominciamo col definire 2 gruppi,
SearchGroup e BooksGroup e su ogni controllo impostiamo il campo ValidationGroup, in questo
modo assegnamo ciascun controllo ad uno dei 2 gruppi. I controlli in cui non modifichiamo il
ValidationGroup, appartengono al default group e si comportano come nella precedente versione
di ASP.NET.

Passiamo in modalitù ‘Origine’ (Source view) ed osserviamo il codice prodotto:

Figura 1. Pannelli con gruppi di validazione separati

In definitiva abbiamo associato a RequiredFieldValidator1 ed a ButtonISBN il gruppo di


validazione “BooksGroup” ed a ButtonCerca il gruppo “SearchGroup”.

Prima di provare la nostra applicazione, sistemiamo il campo di ricerca di Google in modo che
funzioni. Con un doppio click su ButtonCerca in Design view, apriamo la pagina del codice ed
implementiamo il relativo gestore degli eventi come illustrato in figura:
Figura 2. Codice per l’evento Click su ButtonCerca

Testiamo ora la nostra pagina con F5.

Figura 3. L’applicazione in funzione

Inseriamo un nome nel campo di ricerca, ad esempio “pippo”, otteniamo:


Figura 4. Test della ricerca

Se clicchiamo su ‘Cerca ISBN’ senza inserire nulla nella casella di ricerca, appare il messaggio
d’errore. È corretto, perchè si attiva il ValidationGroup per cui è settato il validatore:

Figura 5. Test del validatore

In ASP.NET 2.0, i controlli di validazione supportano la proprietà SetFocusOnError in modo da


spostare il focus nel controllo che è stato validato in caso di non validazione.

È possibile scaricare il sorgente dell’esempio della presente lezione da qui.


Inserire script lato client
 di Angelo Ranucci
 9 Giugno 2006

Può capitare di dover inserire del codice JavaScript nei nostri controlli o nelle nostre pagine. Ad
esempio potremmo voler visualizzare un avviso (un alert) a sequito di periodo prolungato di
inattività dell’utente. Lo strumento che ASP.NET 2.0 ci fornisce per inserire codice lato client è la
proprietà ClientScript della classe Page.

Procediamo anche questa volta con un esempio: realizziamo una pagina che mostra la data di oggi e
l’ora di caricamento in un finstra alert, dove data e ora sono lette sul server web e non sul client.

Apriamo un nuovo progetto ed andiamo in Design view della pagina Default.aspx. Facciamo
doppio click sulla pagina, che equivale ad un doppio click sul form contenuto nella pagina. Nella
parte codice, viene scritto un gestore di evento, il Page_Load, e qui cominciamo ad implementare
la nostra applicazione.

Definiamo una variabile stringa, ‘script’ e vi inseriamo il codice JavaScript: alert('Data ed ora
del server: ' + ...).

Per completare la stringa leggiamo sul server data ed ora usando DateTime.Now, quindi
colleghiamo tutto.

Listato 8. Creazione del codice lato client

string Script_1 = “alert(‘Data ed ora del server: ” + DateTime.Now + “‘);”;

Dobbiamo adesso registrare lo script lato client ed utilizziamo il metodo


RegisterClientScriptBlock. Il codice di Page_Load diventa:

Listato 9. Codice lato client in Page_Load

string Script_1 = “alert(‘Data ed ora del server: ” + DateTime.Now + “‘);”;


string MyKey = “KeyScript_1”;
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), MyKey, Script_1, true);

Al metodo RegisterClientScriptBlock() abbiamo fornito i parametri necessari al suo corretto


funzionamento che sono:

 il tipo dell’oggetto che lo chiama, che nel nostro caso è la pagina chiamante e la possiamo
identificare con la parola chiave this,
 una stringa con una chiave che identifica lo script: possiamo metterci un nome inventato,
 una stringa con il contenuto dello script,
 un valore booleano che se impostato a true indica che lo script va racchiuso tra <script> e
</script>; altrimenti inserisce lo script così com’è.

Non ci resta che provare l’applicazione premendo F5. Se tutto va bene otteniamo una finestra con il
seguente messaggio:
Figura 1. Output della pagina

Diamo pure l’OK ed ispezioniamo il file HTML visualizzando il sorgente con l’editor di testi.

Figura 2. Codice generato dall’applicazione

Notiamo la presenza del VIEWSTATE, che abbiamo introdotto nella lezione sul postback, e dello
script lato client che è stato inserito all’interno della nostra pagina.

Inserire un JavaScript esterno

A volte occorre inserire nel codice lato client uno script contenuto in un file esterno. Supponiamo
per esempio di voler inserire il file “descrizione.js”. In questo caso usiamo il metodo
RegisterClientScriptInclude().

Listato 10. Includere un JavaScript esterno con ASP.NET

Page.ClientScript.RegisterClientScriptInclude(this.GetType(), “Chiave”, “~descrizione.js”);

L’output in questo caso sarebbe:

Risultato dell’inclusione

<script src=”~/descrizione.js” type=”text/JavaScript”></script>

Potete scaricare il sorgente dell’esempio della presente lezione da qui.


Scambio di dati tra Web Form
 di Angelo Ranucci
 16 Giugno 2006

In ASP.NET 2.0 è possibile passare valori da una pagina all’altra in modo molto semplice
utilizzando PostBackUrl, mentre nelle precedenti versioni di ASP.NET l’unica possibilità era
quella di usare Server.Transfer.Nell’esempio di questa lezione, esamineremo differenze tra i due
metodi per rendere più evidente l’utilità di PostBackUrl.

Apriamo un nuovo progetto ed inseriamo una CheckBoxList e 2 pulsanti nella pagina di default.

Aggiungiamo una nuova pagina con ‘Aggiungi nuovo elemento’ sulla barra ‘Esplora soluzioni’ e
chiamiamola ‘Pagina2.aspx’.

Nella Default.aspx, impostiamo la proprietà PostBackUrl del primo pulsante a ‘Pagina2.aspx’. Poi
passiamo all’implementazione del gestore dell’evento OnClick lato server del secondo pulsante in
cui richiamiamo Server.Transfer(). In definitiva otteniamo:

Figura 1. Pagina iniziale

In cui la Default.aspx è la seguente:

Listato 11. CheckBoxList e bottoni nella Default.aspx

<asp:CheckBoxList ID=”CheckBoxList1″ runat=”server”>


<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Medium</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>Extra-Large</asp:ListItem>
</asp:CheckBoxList>

<asp:Button ID=”ButtonPost” runat=”server” PostBackUrl=”~/Pagina2.aspx” Text=”Post to Pagina


2″ />
<br />
<asp:Button ID=”ButtonTransfer” runat=”server” Text=”Transfer to Pagina 2″
OnClick=”ButtonTransfer_Click” />

e la Default.aspx.cs è la seguente:

Listato 12. Richiamare Server.Transfer() dal click sul bottone

protected void ButtonTransfer_Click(object sender, EventArgs e)


{
Server.Transfer(“Pagina2.aspx”);
}

Abbiamo inserito il gestore dell’evento click sul pulsante ButtonTransfer, che realizza il
Server.Transfer, come specificato sopra ora definiamo una proprietà di sola lettura chiamata
‘SeverSide’, di tipo CheckBoxList, che ci fornisce la nostra lista, ‘CheckBoxList1’, presente
all’interno della pagina. Questo per ottenere dati fortemente tipati.

Listato 13. Definire una proprietà di sola lettura per la pagina

public CheckBoxList ServerSide { get { return CheckBoxList1; } }

Passiamo ora a costruire la seconda pagina, ‘Pagina2.aspx’ ed implementiamo alcune righe di


codice al suo interno. Precisamente, aggiungiamo la direttiva:

Listato 14. Definire la pagina di provenienza

<%@ PreviousPageType VirtualPath=”~/Default.aspx” %>

ed inseriamo un pulsante di PostBack con la proprietà PostBackUrl impostata a ‘Default.aspx’. Nel


codice (Pagina2.aspx.cs) implementiamo il gestore dell’evento OnLoad, il Page_Load, nel seguente
modo:

Listato 15. Verificare il tipo di trasferimento

// se abbiamo una pagina di provenienza if (PreviousPage != null) // verifichiamo un postback


incrociato if (PreviousPage.IsCrossPagePostBack) Response.Write(“Questo è un cross-post”);
else Response.Write(“Questo è un Server.Transfer”); Response.Write(“<br /> Hai
selezionato: “); // cerchiamo quale for (int i = 0; i < PreviousPage.ServerSide.Items.Count; i++) if
(PreviousPage.ServerSide.Items[i].Selected)
Response.Write(PreviousPage.ServerSide.Items[i].ToString());

Il codice è di facile interpretazione: sfruttiamo la proprietà IsCrossPagePostBack per capire se è un


PostBack e la definizione della proprietà ServerSide di tipo CheckBoxList per visualizzare gli item
selezionati.

Proviamo l’applicazione selezionando nella lista il valore ‘Medium’ e cliccando prima sul pulsante
per il ‘post’ e poi sul pulsante per il ‘transfer’. Riportiamo i risultati nelle figure.
Figura 2. Risultato del cross-post

Invece selezionando Medium e, facendo il Transfer, si ottiene:

Figura 3. Risultato del Transfer

Finalmente emerge la differenza tra due metodi. Nel caso di cross-post, avviene il trasferimento
completo alla nuova pagina, mentre nel caso di Server.Transfer, l’URL della pagina rimane lo
stesso, come si può notare nella barra degli indirizzi del browser.

Facendo di nuovo il PostBack, le precedenti selezioni vengono cancellate, ciò significa che viene
cancellato il riferimento all’oggetto nella proprietà PreviousPage.

Potete sviluppare, per esercizio, un caso più complicato, in cui ci sono 2 pagine che chiamano la
stessa pagina. La pagina chiamata deve avere un pulsante che faccia il PostBack alla pagina
chiamante, che naturalmente non è sempre la stessa.

Per lo sviluppo dell’esercizio, occorre considerare che non conviene utilizzare una direttiva simila a
quella utilizzata nell’esempio: <%@ PreviousPageType ..., in quanto non sappiamo a priori quale
sarà la pagina chiamante.
Si può, però, utilizzare il metodo FindControl() per rintracciare il controllo nella pagina
chiamante. Precisamente, si può utilizzare PreviousPage.AppRelativeVirtualPath per
individuare la pagina chiamante e PreviousPage.FindControl("identificatore-controllo")
per individuare il controllo nella pagina chiamante.

È possibile scaricare il sorgente dell’esempio qui.

Form su più pagine


 di Angelo Ranucci
 16 Giugno 2006

Un modo semplice di trattare form con molti campi è quello di far navigare l’utente fra più pagine
con un percorso che varia a seconda delle sue risposte. Un’alternativa fornita da ASP.NET, è
l’utilizzo dei Panel: si possono usare più pannelli, ciascuno con un sottoinsieme del form, da
visualizzare a seconda delle risposte dell’utente.

Con ASP.NET 2.0, si può utilizzare un nuovo controllo, il MultiView, che semplifica il lavoro e
serve a visualizzare gruppi di controlli e nasconderne altri, a seconda delle esigenze.

Vediamo un esempio. Realizziamo un’applicazione che contiene un Multiview e 3 viste (View) al


suo interno. Ciascuna vista raccoglierà alcuni elementi al suo interno.

Nel VWD, aggiungiamo un nuovo progetto e chiamiamolo Lezione11. Se non è già aperta, apriamo
la finestra delle barre degli strumetni (Toolbox) con Crtl+Alt+X.

NOTA: Nel corso di questa guida, consideriamo come configurazione standard del VWD il mettere
il codice lato server su un file a parte. Ne spiegheremo i motivi più avanti, nella prima lezione sui
dati. Il linguaggio scelto è sempre C#, essendo il più recente ed anche consigliato dalla casa madre.

Torniamo al nostro esempio. Dal gruppo di controlli ‘Standard’, troviamo il nostro Multiview. Se
siamo in Design view, basta un doppio click su di esso per portarlo all’interno della nostra pagina.

Posizioniamo il cursore all’interno del nuovo controllo e clicchiamo due volte View control,
inseriamo così una prima vista all’interno del Multiview. Ancora 2 doppi click sul View control per
posizionare un totale di 3 viste.

Lavorare sulle View.

Per questo esempio proviamo a realizzare la registrazione di un nuovo utente sul sito.

 Nella prima View mettiamo: Registrazione con Nome e Cognome.


 Nella seconda View, la data di nascita con la possibilità di cliccare sul calendario,
 nella terza View i ringraziamenti per la registrazione avvenuta con un pulsante di conferma con fine
registrazione ed un pulsante di Cancella.
Figura 1. Aspetto della Default.aspx

Gli eventi

Vogliamo ora realizzare un gestore di eventi unico per tutti i pulsanti presenti nel Multiview Con un
doppio click su uno dei pulsanti, si passa alla parte codice e possiamo implementare il gestore
dell’evento Click di quel pulsante. Vediamo come modificare il gestore in modo che gestisca tutti i
pulsanti:
Figura 2. Gestire tutti i pulsanti

Si tratta di assegnare a tutti i pulsanti lo stesso gestore e di capire nel codice quale sia il pulsante
premuto. Quindi andiamo sulle proprietà di ciascun pulsante e assegnamo a Eventi (Events) il
gestore Tutti_Button_Click.

Impostiamo ora la proprietà ActiveViewIndex del nostro MultiView a 0, in modo che venga
visualizzato il primo View al caricamento della pagina.

Test

A questo punto siamo pronti per testare la nostra applicazione. Premiamo F5. Accettiamo se
necessario la generazione del web.config e vediamo il risultato:

Figura 3. Inserimento di nome e cognome

Figura 4. Inserimento della data


Figura 5. Conferma

Figura 6. Fine della registrazione

Il MultiView necessita l’implementazione di pulsanti par passare da una View all’altra, ma c’è un
altro controllo che ha in se, già presente, un menu di navigazione tra le varie schermate: Wizard.
Lo si può trovare nella barra degli strumenti ‘Standard’ del VWD, come il MultiView, ed ha, già
implementato, un menu di navigazione diviso in Step.

I lettori più volenterosi possono, per esercizio, realizzare un esempio con il controllo Wizard.

Potete scaricare il sorgente dell’esempio della presente lezione da qui.

Creare una Master Page


 di Angelo Ranucci
 16 Giugno 2006

Una delle importanti novità introdotte da ASP.NET 2.0 è la possibilità di usare le Master Page per
dare un aspetto uniforme al proprio sito.

Il problema di dare un look unico al sito senza dover riscrivere lo stesso codice in tutte le pagine,
vanno di pari passo e sono stati risolti in passato, con l’ausilio dei Frame, degli Iframe e, in
ASP.NET, con i Web User Control, controlli Web costruiti dall’utente.

I Frame e gli Iframe presentano non possono essere più utilizzati con XHTML 1.1 se non
utilizzando direttive meno restrittive (XHTML 1.0 Frameset) o facendo lavorare il proprio browser
in Quirks Mode, cioè non inserendo il DOCTYPE.

I Web User control invece, oltre a richiedere uno sforzo maggiore in fase di implementazione,
presentano lo svantaggio di dover ridisegnare il layout di ogni singola pagina che li contiene quando
applichiamo modifiche.

Le Master Page invece, sono più simili ad un approccio a modelli (Templates), in cui una modifica
sul modello generale si riperquote su tutto il sito.

Vediamo con un semplice esempio come costruire una Master Page che includa un’intestazione
comune a tutte le pagine ed un menù di navigazione.
Apriamo un nuovo progetto e chiamiamolo ‘Lezione12’. Aggiungiamo un elemento cliccando col
tasto destro su Esplora Soluzioni (Solution Explorer) e selezioniamo Master Page. Lasciamo il
nome proposto per default: ‘MasterPage.master’.

Figura 1. Aggiungere una Master Page

Editando la nostra MasterPage.Master in Design view, vediamo una pagina web vuota che contiene
un solo controllo: un ContentPlaceHolder.

Figura 2. Il ContentPlaceHolder

Possiamo popolare la nostra Master Page con immagini, link e controlli, trascinando questi dalla
finestra degli strumenti all’area di lavoro.

Realizziamo dunque l’intestazione del sito HTML.it, prendiamo i due loghi:


Figura 3. Scritta del logo

Figura 4. Logo

Aggiungiamo una nuova cartella (o folder) al nostro sito, cliccando col destro su Esplora Soluzioni
(Solution Explorer), la chiamiamo ‘Immagini’ e la popoliamo con i due loghi.

Trasciniamo un Panel dalla barra ‘Standard’, sopra il ContentPlaceHolder, poi trasciniamo i due
loghi dalla cartella Immagini all’interno del Panel. Ora impostiamo il ‘blu’ come colore di sfondo
tra le proprietò del Panel. Questo pannello rappresenta l’intestazione

Aggiungiamo un nuovo Panel nel ContentPlaceHolder e creiamo un menù di navigazione.


Assegnamo anche a questo il colore di sfondo ‘bru’ ed impostiamo una altezza di 20 pixel.
Inseriamo dei LinkButton al suo interno con dei collegamenti ad esempio ad ASP, ASP.NET,
ASP.NET 2.0 …

Sotto il ContentPlaceHolder mettiamo delle informazioni sul Copyright.

La nostra Master Page dovrebbe apparire così:

Figura 5. Aspetto della Master Page

Il cui codice sorgente è:

Listato 16. Codice generato dal VWD


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Panel ID=”Panel1″ runat=”server” Width=”100%” BackColor=”Blue”>
<img src=”Immagini/logo1.gif” alt=”Logo HTML.it” />
<img src=”Immagini/logo.gif” alt=”Logo HTML.it” />
</asp:Panel>
<asp:Panel ID=”Panel2″ runat=”server” Height=”20px” Width=”100%” BackColor=”Black”>
<asp:LinkButton ID=”LinkButton1″ runat=”server” Width=”100px” BorderWidth=”0px”
ForeColor=”White”>ASP</asp:LinkButton>
<asp:LinkButton ID=”LinkButton2″ runat=”server” Width=”100px” BorderWidth=”0px”
ForeColor=”White”>ASP.NET</asp:LinkButton>
<asp:LinkButton ID=”LinkButton3″ runat=”server” Width=”100px” BorderWidth=”0px”
ForeColor=”White”>ASP.NET 2.0</asp:LinkButton>
</asp:Panel>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
<br />
Copyright © HTML.it. All Rights Reserved.</div>
</form>
</body>
</html>

La nostra Master Page è pronta per essere utilizzata con una almeno una pagina di contenuti che
realizzeremo nelle prossime lezioni.

Il progetto realizzato in questa lezione può essere scaricato da qui.

Master Page annidate


 di Angelo Ranucci
 16 Giugno 2006

Nidificare una Master Page all’interno un’altra può essere utile quando si vuole trattare in modo
particolare una specifica area del sito.

Riprendendo l’esempio della lezione precedente, vogliamo aggiungere alla sezione ‘ASP.NET 2.0’,
un menu di navigazione con i collegamenti agli articoli scritti su ASP.NET 2.0 e che non sia visibile
nelle altre sezioni, riguardanti ad esempio ASP o ASP.NET.

Possiamo riprendere l’esempio della lezione precedente. Aggiungiamo una nuova Master Page al
progetto. Questa seconda Master Page deve essere costituita da una parte di sinistra, che rappresenta
un menu e da una parte di destra, che rappresenta il contenuto della pagina. Il suo contenuto, che
deve essere innestato nel ContentPlaceHolder della prima Master Page, sarà costituito da un insieme
di link, nella parte di sinistra, e da un ContentPlaceHolder nella parte di destra, che servirà da
contenuto per le pagine del sito.

Nel caso delle Master Page nidificate, dobbiamo lavorare in modalità ‘Origine’ (Source view), in
quanto il VWD, non ne supporta ancora la modifica visuale.

Quella che stiamo costruendo è una pagina di contenuti. Questa pagina definisce un contenuto
(Content) che sarà innestato nel pagina Master di riferimento. Un contenuto trova alloggio in
ContentPlaceHolder, questo controllo ha il compito di “tenere il posto” a contenuti che possono
variare dinamicamente.

Una pagina di solo contenuto non è descritta come un Web form e non possiede i tag per la
definizione della pagina HTML, questi ultimi si trovano già nella pagina ospite.

Trattandosi di una pagina Master, usiamo la direttiva Master al posto di Page, nella quale
specifichiamo l’attributo MasterPageFile ovvero il riferimento alla Master Page di livello
superiore nonchè gli attributi tipici di una pagina

Listato 15. Definizione della direttiva Master

<%@ Master MasterPageFile=”~/MasterPage.master” Language=”C#” AutoEventWireup=”true”


CodeFile=”MasterPage2.master.cs” Inherits=”MasterPage2″%>

Infine tutto il contenuto viene definito in una regione compresa nel tag di controllo Content nel
quale indichiamo il al PlaceHolder che riceve il contenuto nell’attributo ContentPlaceHolderID.
Nel nostro caso indichiamo ‘ContentPlaceHolder1’.

Listato 16. Definire una regione ‘contenuto’

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>


<!– Il contenuto lo definiamo qui –>
</asp:Content>

All’interno di ‘Content1’ possiamo ora costruire il menu con una tabella con una riga e due colonne
oppure con due tag <div> opportunamente impostati con l’aiuto dei CSS.

Optiamo per questa seconda soluzione ed impostiamo un insieme di link di dimostrazione nella
parte di sinistra con sfondo nero. Nella parte di destra mettiamo un nuovo ContentPlaceHolder
dal nome ‘ContentPlaceHolder2’ pronto ad ospitare le pagine del sito.

A questo punto, abbiamo bisogno di una pagina di contenuti. Usiamo la Default.aspx, per farlo
trasformiamola in una pagina di contenuto nel seguente modo:

Listato 17. Esempio di pagina di contenuto vuota

<%@ Page Language=”C#” MasterPageFile=”~/MasterPage2.master” AutoEventWireup=”true”


CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder2″ runat=”Server”>


</asp:Content>
Questa volta, trattandosi di una pagina di contenuto semplice e non di una pagina Master,
manteniamo la direttiva Page. Per il resto ci comportiamo come fatto in precedenza. Il PlaceHolder
indicato è quello della seconda pagina Master.

Per trasformare un Web Form in una pagina di contenuti, basta mettere il MasterPageFile nella
direttiva Page e cancellare tutto il resto. Lasciare cioè solo la direttiva Page. Poi, lavorando il
Source view, basta mettere il controllo Content, come fatto sopra.

Lavorando invece in Design view, basta cliccare sulla freccia, presente in alto a destra sul controllo
Content, e scegliere Create Custom Content dalla piccola finestra che si apre:

Figura 1. Menu contestuale del contenuto

Riepilogando il ‘Content1’ della ‘Default.aspx’ va a riempire il ‘ContentPlaceHolder2’ della


‘MasterPage2.master’ il cui ‘Content1’ va a riempire il ‘ContentPlaceHolder1’ della
‘MasterPage.master’.

Non ci rimane che riempire il Content della Default.aspx con del testo a piacere e fare un test:

Figura 2. Risultato finale

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.

Modifiche runtime alle Master Page


 di Angelo Ranucci
 16 Giugno 2006

Nella lezione precedente, abbiamo visto che una pagina di contenuti è un Web Form, con una
direttiva Page ed un controllo Content, senza gli usuali tag HTML come <html>, <head> e
<body>.

Il controllo Content può contenere tutti i tag HTML che in genere popolano l’elemento <body>
nelle comuni pagine HTML e qualunque controllo ASP.NET

In questa lezione esaminiamo il caso in cui, il caricamento di una pagina di contenuti, richiede la
modifica della Master Page ad essa associata.

Possimo riprendere il progetto della lezione precedente in cui abbiamo realizzato 2 Master Page
nidificate. Abbiamo visto che in quel caso il VWD non supporta il Visual Editing. Ora, per
semplificarci la vita e lavorare anche in Design view, uniamo le 2 Master Page in una sola, ad
esempio la prima, e le associamo il contenuto presente in Default.aspx.

Quindi, lavorando in modalità origine (Source view), copiamo il tag <div> contenente il menu della
MasterPage2.master ed incolliamolo nella MasterPage.master. Nel file Default.aspx, invece,
modifichiamo la direttiva Page impostando la nuova pagina master
(MasterPageFile="~/MasterPage.master") e modificando il ContentPlaceHolderID del
controllo Content in ContentPlaceHolder1.

Possiamo poi eliminare da Esplora Soluzioni (Solution Explorer) gli elementi ‘MasterPage2.master’
e ‘MasterPage2.master.cs’, per rendere ancora più chiaro il nostro progetto.

Nella nostra Master Page, abbiamo messo un’informazione relativa al Copyright. Per fare in modo
che l’informazione del Copyright compaia in fondo alla pagina e non segua il flusso del contenuto,
possiamo utilizzare i CSS in questo modo:

CSS per il Copyright

<div style=”width: 100%; padding-bottom: 20px;


padding-top: 20px; text-align: center;”>
Copyright © HTML.it. All Rights Reserved.
</div>

Arriviamo quindi all’argomento centrale della lezione. Supponiamo di avere una pagina che
richieda la presenza di un logo. Ad esempio, se abbiamo una pagina su MSDN, vogliamo che,
aprendola, sia visualizzato un logo nell’intestazione.

Poiché l’intestazione è sulla Master Page, che contiene già due loghi, dobbiamo fare in modo che
quando la pagina su MSDN viene aperta, essa possa modificare qualcosa all’interno della Master
Page che la contiene. Precisamente, deve sostituire il primo logo con quello di MSDN.

Realizziamo innanzitutto una nuova pagina di contenuti: la pagina contenente informazioni su


MSDN.

Cliccando con il pulsante destro del mouse sul nome del progetto, in Esplora Soluzioni (Solution
Explorer), aggiungiamo un nuovo elemento (item) Web Form, spuntiamo Place code in separate file
e Select master page e chiamiamo la pagina MSDN.aspx. Il VWD ci propone una Master Page da
selezionare. Scegliamo il file ‘MasterPage.master’.

Figura 1. Selezione della Master Page

Aggiungiamo un contenuto alla MSDN.aspx, scrivendo un testo qualunque all’interno del suo
controllo Content. Poi torniamo nel menu verticale definito nella pagina master e aggiungiamo un
link alla ‘MSDN.aspx’ ed uno alla ‘Default.aspx’.

Ora che abbiamo sistemato tutte le pagine, spostiamoci nella modalità ‘Origine’ del file
‘MSDN.aspx’. Qui inseriamo una direttiva MasterType che conterrà un riferimento alla pagina
master che possibile modificare, vediamo come:

Rendere una Master Page modificabile dal contenuto

<%@ MasterType VirtualPath=”~/MasterPage.master” %>

La direttiva MasterType, va inserita subito sotto la direttiva Page.

Modifichiamo ora il codice della pagina master nel file ‘MasterPage.master.cs’. Qui aggiungiamo
un metodo a scopo didattico, per modificare, ad esempio, il colore del pannello inestazione a
seconda se la pagina di contenuti lo richieda oppure no.

Omettiamo il metodo Page_Load, per aumentare la leggibilità del codice, e scriviamo:

Listato 20. Metodo per il colore di sfondo della Master Page

public partial class MasterPage : System.Web.UI.MasterPage {

public void impostaColorePI(Color colore) {


Panel1.BackColor = colore;
}
}

Il metodo deve essere definito pubblico affinché possa essere utilizzato dalla pagina dei contenuti.

Spostiamoci nel file di codice della ‘MSDN.aspx’, cioè ‘MSDN.aspx.cs’ e programmiamo il


metodo Page_Load affinché imposti il colore del pannello dell’intestazione, definisca il titolo della
pagina (risultante) e sostituisca il primo logo con quello di MSDN:

Listato 21. Modifica del contenuto della Master Page

protected void Page_Load(object sender, EventArgs e) {


Master.impostaColorePI(System.Drawing.Color.Gray);
Master.Page.Header.Title = “MSDN”;
Image masterPrimoLogo = (Image)Master.FindControl(“PrimoLogo”);
if (masterPrimoLogo != null)
masterPrimoLogo.ImageUrl = “Immagini/imgMSDN.jpg”;
}

Il Page_Load() quindi chiama, usando la proprietà Master, il metodo impostaColorePI() che è


definito all’interno della Master Page, imposta il titolo e, usando il metodo FindControl(), trova
l’immagine da sostituire e la sostituisce.

Affinchè il tutto funzioni, dobbiamo usare il controllo Image per i loghi del pannello
dell’intestazione, all’interno della MasterPage.master:

Listato 22. Inserire un controllo Image

<asp:Panel ID=”Panel1″ runat=”server” Width=”100%” BackColor=”Blue”>


<asp:Image ID=”PrimoLogo” runat=”server” ImageUrl=”Immagini/logo1.gif”
AlternateText=”Logo HTML.it” />
<asp:Image ID=”SecondoLogo” runat=”server” ImageUrl=”Immagini/logo.gif”
AlternateText=”Logo HTML.it” />
</asp:Panel>

Finalmente possiamo testare la nostra applicazione, premiamo ‘F5’:

Figura 2. Lanciamo l’applicazione

Se clicchiamo ora su MSDN:


Figura 3. La pagina modificata

Possiamo notare la variazione del primo logo nonché del colore di sfondo nel pannello
dell’intestazione e l’impostazione del titolo della pagina.

Per concludere esistono due modi per modificare il contenuto di una Master Page da una pagina
di contenuti,

 chiamare un metodo pubblico che deve essere stato prima implementato nella Master Page.
 usare il metodo FindControl() per localizzare il controllo da modificare e poi sfuttare i
metodi e le proprietà esposti da quel controllo.

Tra i due è consigliabile usare il primo in quanto è molto più efficiente, in ogni caso dobbiamo
ricordare che per agire sulla Master Page da una pagina di contenuti, bisogna comunque usare il
riferimento Master definito con l’attributo VirtualPath della direttiva MasterType.

L’applicazione sviluppata in questa lezione può essere scaricata da qui.

Creare una Mappa del sito


 di Angelo Ranucci
 23 Giugno 2006

Per consentire agli utenti di navigare agevolmente nel sito, cioè di passare da una pagina all’altra
senza troppi sforzi, occorre implementare un menu di navigazione. ASP.NET 2.0 propone quattro
nuovi controlli per realizzare menu: il SiteMapDataSource, il SiteMapPath, il Menu ed il
TreeView.
Il SiteMapDataSource è un controllo appartenente alla serie di controlli per i dati e lo possiamo
trovare nel VWD all’interno dell’area della barra strumenti dedicata ai dati. Questo controllo fa da
ponte tra una sorgente di dati, di tipo Site Map, ed un controllo di visualizzazione. Per capire come
funziona dobbiamo tenere presente un’architettura a tre strati: una sorgente di dati, un controllo per
estrarli ed un controllo per visualizzarli.

Gli altri tre controlli, il SiteMapPath, il Menu ed il TreeView sono controlli di visualizzazione e
servono per implementare rispettivamente un percorso (Path), un menu ed un menu con una
struttura gerarchica. Questi controlli li troviamo nella area “navigazione” della barra degli strumenti
del VWD.

In questo esempio usiamo come sorgente di dati il file XML che rappresenta la Site Map e
cerchiamo di realizzare un menu di navigazione in cui l’utente possa aver sempre presense la
propria posizione ed abbia la possibilità di tornare indietro.

Apriamo un nuovo progetto ed usiamo una Master Page in cui posizionare un SiteMapPath.

Per sistemare velocemente la Default.aspx originata automaticamente dal VWD quando si apre un
nuovo progetto, cancelliamola, aggiungiamo la Master Page e poi aggiungiamo un Web Form
avente per Master Page la pagina master appena creata. La nuova Default.aspx diventa così una
pagina di contenuti.

Creiamo innanzitutto il file della mappa del sito che ci servirà come sorgente di dati. Aggiungiamo
un nuovo elemento da “Esplora soluzioni” con il tasto destro sul nostro progetto e selezioniamo
“Mappa del sito”.

Figura 1. Inserire una Mappa del sito (Site Map)

Otteniamo un modello di file già predisposto e gestito dal VWD.

Listato 23. Modello di Site Map

<?xml version=”1.0″ encoding=”utf-8″ ?>


<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0″ >
<siteMapNode url=”” title=”” description=””>
<siteMapNode url=”” title=”” description=”” />
<siteMapNode url=”” title=”” description=”” />
</siteMapNode>
</siteMap>

Ogni <siteMapNode> rappresenta una pagina del nostro sito, per popolare la mappa del sito
teniamo presente che ogni nodo può contenere i seguenti attributi:

 url: l’indirizzo della pagina


 title: il testo da visualizzare nel menu
 description: la scritta visualizzata al passaggio del mouse
 roles: contiene il ruolo o i ruoli per i quali il nodo deve essere visualizzato

Prendendo spunto dall’esempio sviluppato nella lezione precedente, immaginiamo di voler


realizzare uno spazio web, contenente la Guida ASP.NET 2.0 con i capitoli, le lezioni ed un suo
menu di navigazione.

Inseriamo il primo nodo e lo chiamiamo “Guida ASP.NET 2.0”, contenente l’introduzione alla
guida, e poi i nodi figli con i capitoli e quindi, altri nodi figli in gerarchia, contenenti le lezioni.
Senza realizzare la struttura completa, che richiede molto tempo, ai fini di questa lezione,
limitiamoci ad inserire solo alcune pagine.

Listato 24. Mappa gerarchica della guida

<?xml version=”1.0″ encoding=”utf-8″ ?>


<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0″ >
<siteMapNode url=”Default.aspx” title=”Guida ASP.NET 2.0″ description=”Introduzione ad
ASP.NET 2.0″>

<siteMapNode url=”Concetti.aspx” title=”Concetti” description=”Una infrastruttura di


componenti (controlli), eventi, eccezioni”>
<siteMapNode url=”Pagina.aspx” title=”Pagina” description=”La pagina come oggetto” />
<siteMapNode url=”PostBack.aspx” title=”PostBack” description=”Il concetto di PostBack” />
</siteMapNode>

<siteMapNode url=”PrimiEsempi.aspx” title=”Primi esempi” description=”Primi esempi”>


<siteMapNode url=”Focus.aspx” title=”Focus” description=”Settare il focus nei vari controlli” />
<siteMapNode url=”Validazione.aspx” title=”Validazione” description=”Definire gruppi di
validazione di dati in input” />
<siteMapNode url=”ClientScripts.aspx” title=”Client scripts” description=”Inserire client scripts”
/>
</siteMapNode>

</siteMapNode>
</siteMap>

Realizziamo con il VWD le pagine inserite nella Mappa del sito, mettendo in ogni pagina solo il
titolo e la descrizione, e ricordando che devono essere pagine di contenuti, ovvero con un
riferiemento cioè ad una pagina master che poi implementeremo.
Aggiungiamo al progetto una nuova cartella e chiamiamola Immagini e ci inseriamo i loghi usati
nella precedente lezione. Costruiamo quindi l’intestazione della nostra Master Page come nella
precedente lezione, con i due loghi di HTML.it.

Al di sotto del pannello dei loghi mettiamo il controllo SiteMapPath trascinandolo con il mouse
dalla barra degli strumenti, con due Horizontal Rule (<hr>), una sopra ed una sotto. Andiamo sulla
pagina PostBack.aspx (che è tra quelle che abbiamo creato) e premendo F5 otteniamo:

Figura 2. Risultato finale

Il SiteMapPath, per default, legge il contenuto del Web.sitemap e mostra il percorso di navigazione
della pagina visualizzata. Per migliorare il look del SiteMapPath, si possono utilizzare i CSS oppure
si può prendere un modello già pronto presente nel pannello Attività del SiteMapPath.

Figura 3. Attività del SiteMapPath

Ruoli

Spendiamo due parole sui ruoli. Nel file Web.sitemap, abbiamo visto che c’è un attributo roles
che si può spostare in ogni nodo. Questo attributo serve ad autorizzare un’utente a vedere quel
nodo, cioè il collegamento nel menu quella pagina.

Per fare in modo che il SiteMapDataSource possa nascondere un nodo ad un utente, che non abbia
la necessaria autorizzazione, bisogna abilitare il security trimming nel Web.config ed impostare il
ruolo nel nodo da nascondere della Mappa del sito, ad esempio roles="amministratore". Infine
impostare la sezione <authorization> del Web.config per il location path da nascondere.

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.
Il controllo TreeView
 di Angelo Ranucci
 23 Giugno 2006

In questa lezione utilizziamo i risultati a cui siamo arrivati nella lezione precedente e mostreremo
come realizzare un menu di navigazione ad albero usando il il controllo TreeView di ASP.NET 2.0

Operiamo sulla nostra Master Page al fine di mettere il menu ad albero nella parte sinistra della
pagina. Per fare questo possiamo inserire una tabella di una riga e due colonne in modo da mettere
nella cella di sinistra il menu e nella cella di destra il contenuto. Un esempio di realizzazione è il
seguente:

Listato 25. Separare menu e contenuto

<table>
<tr>
<td style=”border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid;
border-bottom: gray thin solid; padding-right: 10px; padding-left: 10px; padding-bottom: 10px;
padding-top: 10px;”>
<asp:TreeView ID=”TreeView1″ runat=”server” BackColor=”White”
DataSourceID=”SiteMapDataSource1″
ImageSet=”WindowsHelp” BorderColor=”Gray”>
<ParentNodeStyle Font-Bold=”False” />
<SelectedNodeStyle Font-Underline=”False” HorizontalPadding=”0px” VerticalPadding=”0px”
BackColor=”#B5B5B5″ />
<NodeStyle Font-Names=”Tahoma” Font-Size=”8pt” ForeColor=”Black”
HorizontalPadding=”5px”
NodeSpacing=”0px” VerticalPadding=”1px” />
<HoverNodeStyle Font-Underline=”True” ForeColor=”#6666AA” />
</asp:TreeView>
<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” />
</td>
<td valign=”top” style=”padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-
top: 10px;”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</td>
</tr>
</table>

Il codice mostrato sopra è visibile può essere realizzato in modo visuale trascinando nell’area di
lavoro prima una tabella, poi il TreeView. La tabella va impostata con una riga e due colonne. Il
ContentPlaceHolder va trascinato nella cella di destra ed il TreeView nella cella di sinistra ed
impostato nel seguente modo:
Figura 1. Inserire il TreeView in modo visuale

Nelle Attività di TreeView (TreeView Tasks) bisogna scegliere una “nuova origine dati” (New data
source).

Figura 2. Selezionare una origine per i dati

Scegliamo quindi SiteMap e diamo l’OK.

Possiamo poi formattare a piacere il TreeView con una delle possibilità di visualizzazione
preinstallate, scegliendo la formattazione automatica tra le Attività di TreeView ed usare i CSS per
altre opzioni di visualizzazione.

Vediamo il risultato premendo F5:


Figura 3. Risultato Finale

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.

Databinding da codice per il TreeView


 di Angelo Ranucci
 23 Giugno 2006

Il popolamento del TreeView può essere realizzato o in modo statico impostando il “binding” al
Site Map o in modo dinamico mediante del codice scritto ad hoc ma sempre lato server.

Questa scelta può essere fatta se si ha a che fare con un sito che cambia frequentemente oppure se si
vuole realizzare un File Browser per l’applicazione. Realizziamo per esempio un File Browser per
la nostra applicazione.

Con il VWD apriamo un nuovo progetto. Nella Default.aspx, trasciniamo un TreeView e, nella sua
finestra delle Attività di TreeView, spuntiamo “Mostra Righe”.

Personalizziamo le icone del nostro albero di esplorazione. In “Esplora Soluzioni”, aggiungiamo


una cartella “Immagini” e poniamo al suo interno le icone per i documenti e le cartelle aperte e
chiuse:

Icona Cartella aperta

Icona cartella chiusa


Icona documento

Ritorniamo alla finestra delle Attività di TreeView e selezioniamo “Personalizza immagini linea”.
Appare la maschera del generatore di immagini linea

Figura 1. Generatore immagini linea per TreeView

Impostiamo come CollapseImage la cartellachiusa.gif e come ExpandImage la cartellaaperta.gif:


Figura 2. Impostare icone personalizzate

Clicchiamo su “OK”. Se il VWD ci chiede se vogliamo creare la cartella “TreeLineImages” che al


momento non esiste, rispondiamo “sì”. Questa cartella contiene una insieme di immagini che
servono al TreeView nella sua corrente impostazione.

Andiamo adesso nella pagina del codice della Default.aspx (la Default.aspx.cs), includiamo il
namespace System.IO ed implementiamo un metodo ricorsivo per ottenere le cartelle e le
sottocartelle del sito:

Listato 26. Creare l’albero delle cartelle

public void ottieniSottoCartelle(string path, TreeNode node)


{
string[] cartelle = Directory.GetDirectories(path);
if (cartelle.Length != 0)
{
// per ogni sottocartella, aggiungi al TreeViw e
// chiama ricorsivamente te stesso
foreach (string cartella in cartelle)
{
// aggiungi il path relativo al TreeView
TreeNode newNode = new TreeNode(cartella.Substring(cartella.LastIndexOf(“\”) + 1));
newNode.ToolTip = cartella;
node.ChildNodes.Add(newNode);
// trova le sue sottocartelle
ottieniSottoCartelle(cartella, newNode);
// trova i file
ottieniFiles(cartella, newNode, 1);
// chiudi il nodo corrente
newNode.CollapseAll();
}
}
}

ed un metodo per ottenere i file:

Listato 27. Ottenere i file nelle cartelle

public void ottieniFiles(string path, TreeNode node, int i)


{
string[] files = Directory.GetFiles(path);
if (files.Length == 0 && node.ChildNodes.Count == 0)
{
TreeNode newNode = new TreeNode(“Directory is empty”);
node.ChildNodes.Add(newNode);
}
else
{
foreach (string file in files)
{
// aggiungi il file al TreeView
TreeNode newNode = new TreeNode(file.Substring(path.Length + i));
newNode.ToolTip = file;
newNode.ImageUrl = “Immagini/doc.gif”;
node.ChildNodes.Add(newNode);
}
}
}

Implementiamo il gestore dell’evento Page_Load nel seguente modo:

Listato 28. Page_load per caricare il TreeView

protected void Page_Load(object sender, EventArgs e)


{
if (!Page.IsPostBack)
{
TreeView1.Nodes.Add(new TreeNode(Request.PhysicalApplicationPath));
ottieniSottoCartelle(Request.PhysicalApplicationPath, TreeView1.Nodes[0]);
ottieniFiles(Request.PhysicalApplicationPath, TreeView1.Nodes[0], 0);
}
}

Commentiamo brevemente il codice scritto: il primo metodo scritto, ottieniSottoCartelle(),


serve a trovare le cartelle e le sottocartelle presenti nella nostra applicazione, è ricorsivo perché al
suo interno c’è una chiamata a se stesso e prende come parametri il percorso dell’applicazione ed il
primo nodo del TreeView; il secondo metodo, ottieniFiles(), serve a trovare i file presenti nelle
cartelle e prende come parametri il path della cartella, il nodo del TreeView ed un intero che può
essere zero od uno a seconda che ci si trovi nella cartella principale dell’applicazione oppure no.

Testiamo l’applicazione con F5 ed otteniamo:


Figura 3. Risultato finale

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.

Il controllo Menu
 di Angelo Ranucci
 23 Giugno 2006

Nelle lezioni precedenti abbiamo visto come realizzare un menu ad albero utilizzando il controllo
TreeView unitamente ad una Mappa del sito. In questa lezione vedremo come realizzare un menu a
comparsa, cioè un Drop-Down menu, in cui i sottomenu vengono aperti ad esempio al passaggio del
mouse.

Utilizziamo l’esempio con la SiteMap, le varie pagine e la Master Page, che modificheremo nel
corso di questa lezione, inserendo il controllo Menu in una posizione opportuna.

Apriamo la Master Page in modalità visuale ed eliminiamo il controllo SiteMapPath compreso tra
le due linee orizzontali. Inseriamo al suo posto il controllo Menu, che è presente nell’area
“Esplorazione” della barra degli strumenti.

Selezioniamo la sorgente dati da “Attività di Menu” cliccando nella freccina in alto a destra, e
scegliamo SiteMapDataSource1 che avevamo realizzato per il controllo TreeView.
Figura 1. Selezione della fonte di dati

Selezioniamo poi “Formattazione automatica” e clicchiamo su “A colori”:

Figura 2. Formattazione a colori

Clicchiamo su “Applica” e testiamo l’applicazione con F5.


Figura 3. Risultato finale

Nel controllo Menu possiamo modificare l’orientamento da Verticale ad Orizzontale ed altre


caratteristiche di stile agendo opportunamente sulle Proprietà.

Nell’esempio abbiamo utilizzato la Mappa del sito come fonte dei dati ma possiamo anche
impostare a mano gli elementi utilizzando l’Editor DataBindings Menu presente nelle Attività di
Menu:

Figura 4. Editor DataBindings Menu


Possiamo inoltre aggiungere a mano gli elementi operando direttamente sul codice.

I sorgenti del progetto realizzato nel corso di questa lezione possono essere scaricati da qui.

Introduzione alle Web Part


 di Angelo Ranucci
 23 Giugno 2006

Un portale nel linguaggio comune, prima dell’avvento del web, aveva il significato di porta
d’accesso ad un edificio imponente, un edificio importante sia dal punto di vista artistico sia
funzionale.

Nel gergo del web, questo termine sta indicare una porta d’accesso a molte informazioni e servizi,
ma qualcosa di più elaborato di una semplice home page con un indice. Un portale dovrebbe
contenere informazioni modularizzate in un insieme di viste che possono essere personalizzate
dall’utente.

Ad esempio, un utente potrebbe voler vedere sul portale a cui è registrato, una finestra con i prezzi
delle azioni che ha in portafoglio.

Ci sono già dei software specializzati per realizzare siti di questo tipo, ad esempio Microsoft Share
Point ed i cosiddetti CMS. In ASP.NET 2.0, la tecnologia delle Web Part è stata progettata apposta
per realizzare siti web predisposti ad essere essere personalizzati dagli utenti senza che lo
sviluppatore debba riscrivere codice.

La tecnologia delle Web Part in ASP.NET 2.0 è realizzata con una serie di controlli messi a
disposizione dello sviluppatore che si trovano nella sezione WebParts della barra degli strumenti.
Figura 1. Strumenti per le Web Part

Per utilizzare la tecnologia delle Web Part, in ASP.NET 2.0 possiamo trascinare i controlli
visualizzati nella WebParts Toolbox nella nostra area di lavoro considerando però alcune regole.

 Ogni pagina che usa le Web Part deve contenere una singola istanza del controllo
WebPartManager. Il WebPartManager si occupa di collegare gli altri controlli, di reagire
agli eventi e di chiamare i metodi di ciascuna Web Part.
 Per permettere agli utenti di modificare le Web Part presenti nella pagina, cioè di passare
dalla visualizzazione all’edit, bisogna mettere nella pagina un controllo WebPartPageMenu.
 Tutti gli altri controlli riguardanti le Web Part, vanno invece messe all’interno di zone.

È anche possibile mettere una Web Part direttamente su una pagina ASP.NET ma generalmente si
preferisce inserire un controllo WebPartZone definendo un layout per tutte le Web Part che
contiene. Una pagina ASP.NET può contenere tante WebPartZone.

Attualmente è in corso lo studio di interfacce per collegare le Web Part alle usuali applicazioni di
Microsoft Office.

Aggiungere Web Part all’applicazione


 di Angelo Ranucci
 30 Giugno 2006

In questa lezione vedremo come aggiungere le Web Part in un ipotetico portale, partendo dalle
considerazioni fatte nella lezione precedente.
Dobbiamo anzitutto tenere presente che per usare le Web Part in un portale, gli utenti devono
essere autenticati ed avere l’autorizzazione ad accedere alle nostre pagine.

Come vedremo nelle lezioni dedicate alla sicurezza, per autenticare gli utenti, abbiamo bisogno
dell’autenticazione di tipo Forms, adatta alla rete internet, al contrario dell’autenticazione di tipo
Windows, che fra l’altro è di default in ASP.NET, che è utile per autorizzare l’accesso alla nostra
macchina.

Un utente non autenticato che cerca di personalizzare una pagina usando le Web Part, provoca un
errore in fase di runtime.

Cominciamo a lavorare su un esempio. Immaginiamo di voler realizzare un portale mediante


l’aggiunta di Web Part. Apriamo un nuovo progetto e lavoriamo sulla modalità visuale della nostra
Default.aspx.

Il modo più semplice per aggiungere Web Part è trascinare i controlli esistenti dalla barra degli
srumenti alla nostra area di lavoro. Per i più esperti si può realizzare un controllo da zero e poi
trascinarlo sulla pagina.

Limitiamoci, per ora, alla situazione più semplice e ricordiamo, da quanto detto nella precedente
lezione, che, affinché il tutto funzioni, dobbiamo prima inserire un WebPartManager. Dopo averlo
inserito, inseriamo una tabella con una riga e tre colonne e posizioniamo, all’interno di ogni sua
cella, una WebPartZone.

Una WebPartZone serve da aggancio per le Web Part al suo interno e può definire il layout e
l’apparenza di ciascuna di esse.

Figura 1. Inserire le WebPartZone

Nella WebPartZone1, mettiamo un controllo Calendar e formattiamolo a piacere.

Impostiamo l’attributo title del controllo Calendar. Il VWD ci risponde con un Warning in quanto
il Calendar non supporta un attributo title, ma poiché tale attributo è stato inserito un una
WebPartZone, è avvolto nell’involucro del controllo GenericWebPart in cui può essere usato e
quindi funziona:
Figura 2. Inserire l’attributo title in Calendar

Se inseriamo più di un controllo in una stessa WebPartZone, ogni controllo sarà trattato come una
singola WebPart con i suoi pulsanti minimizza e chiudi. Un’alternativa può essere quella di
raggruppare i vari controlli per mezzo di un PlaceHolder o di un Panel.

Possiamo a questo punto testare la nostra Web Part premendo F5.

Figura 3. Visualizzazione della web part con MSIE

Notiamo la presenza dei pulsanti Minimize e Close di cui possiamo testarne il funzionamento.
Notiamo anche, ed è importante tenerne conto se si sviluppa per un pubblico eterogeneo, che la
visualizzazione dei comandi cambia se non si usa Internet Explorer.
Figura 4. Visualizzazione della web part con Firefox

Realizzare un controllo utente

Facciamo ora un piccolo passo avanti, e realizziamo un nostro controllo web partendo da zero. Un
controllo utente, può contenere uno o più controlli server conosciuti e può anche essere utilizzato
per impacchetare molti controlli in uno solo.

Per creare un nuovo controllo, clicchiamo col pulsante destro sul nome del progetto in Esplora
Soluzioni, aggiungiamo un nuovo elemento e selezioniamo “Controllo Utente Web”. Lo chiamiamo
“Google.ascx”

Figura 5. Creare un controllo utente

Nella lezione 9 abbiamo già realizzato un pannello con un campo di testo in input che utilizzava il
motore di ricerca Google per cercare le parole inserite sul web. Vogliamo adesso trasformare quel
pannello in un controllo utente da poter trascinare in una WebPartZone.

Aggiungiamo una cartella Immagini al nostro sito ed inseriamoci il logo di Google della Lezione 9.
Costruiamo la casella di ricerca come abbiamo già fatto in precedenza ma lavorando in Google.ascx
ed in Google.ascx.cs. Trasciniamo poi il controllo Google.ascx da Esplora Soluzioni alla
WebPartZone2:
Figura 6. Inserire il controllo utente

Notiamo che il nostro controllo non ha un titolo. Lo possiamo aggiungere agendo sul codice
HTML, come abbiamo già fatto per la WebPartZone1.

Testando con F5 otteniamo:

Figura 7. Risultato finale

Effettuando il test, anche se non siamo autenticati, l’applicazione si ricorda di “come lasciamo le
Web Part”. Se ad esempio le chiudiamo ed usciamo, la volta successiva saranno chiuse. Per
resettare completamente l’applicazione bisogna cancellare il file di log presente nella cartella
App_Data (ASPNETDB.MDF, aspnetdb_log.LDF).

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Visualizzare dati in tabelle


 di Angelo Ranucci
 30 Giugno 2006

L’accesso ai dati è l’aspetto più importante che occorre considerare quando si vuole realizzare
un’applicazione web. ASP.NET 2.0 mette a disposizione dello sviluppatore, diversi controlli di
accesso ai dati.

1. GridView
2. DataList
3. DetailsView
4. FormView
5. Repeater
6. SqlDataSource
7. AccessDataSource
8. ObjectDataSOurce
9. XmlDataSource
10. SiteMapDataSource
11. ReportViewer

Nel corso di questa lezione, esamineremo i controlli GridView e SqlDataSource, e vedremo come
lo sviluppatore possa interagire con un database, in modo molto semplice, solo utilizzando alcuni
controlli già pronti e senza dover scrivere righe di codice.

Il controllo GridView ha sostituito il DataGrid della precedente versione di ASP.NET, ma, chi
volesse utilizzare il vecchio DataGrid, lo può fare perché è ancora supportato.

Per prima cosa, dobbiamo procurarci un’istanza di database, contenente dei dati di esempio da
utilizzare. A tal proposito, scarichiamo dal sito della Microsoft, il database di esempio Pubs.

Se non lo abbiamo ancora fatto possiamo scaricare SQL Server 2005 Express Edition che è la
versione free di Microsoft SQL Server che è un Sistema di Gestione di Database Relazionale (in
inglese RDBMS, Relational Data Base Management System). Questa versione funziona con
Windows XP Service Pack 2 o con l’ultimo Service Pack disponibile per Windows 2000.

Una volta scaricato SQL Server, lo si deve installare. L’installazione, a differenza del vecchio
MSDE, non necessita di spiegazioni perché molto semplice. In genere, installando il VWD, si ha
l’opzione per installare anche SQL Server 2005 Express Edition.

Per installare i database di esempio invece, ci sono degli script già pronti che dovremmo avere già
scaricati, ma se non li abbiamo, li possiamo scaricare gratuitamente dal sito della Microsoft.
Possiamo provare questo collegamento, ma non è detto che rimanga lo stesso con il passare del
tempo.

Figura 1. Pagina di download degli esempi


Dopo aver scaricato il file SQL2000SampleDb.msi, lo mandiamo in esecuzione e verranno estratti i
file e gli script nella cartella SQL Server 2000 Sample Databases sul disco di sistema (C:).

Figura 2. Cartella degli esempi

La figura riporta i file estratti. Possiamo installare gli esempi utilizzando gli script instnwnd.sql e
instpubs.sql, oppure utilizzare i file già pronti, quelli con estensione MDF. Senza ulteriori
installazioni, utilizziamo quindi il file PUBS.MDF.

Al solito apriamo un nuovo progetto, scegliendo come al solito di separare il codice. Ciò al fine di
rimanere ancorati il più possibile ai concetti di programmazione ad oggetti, senza tuttavia alterare la
complessità dell’applicazione. Ricordiamo che chi volesse inserire il codice lato server all’interno
della pagina, può farlo e seguire lo stesso la lezione.

L’accesso ai dati

A questo punto, come promesso, vediamo come accedere ad un database per visualizzarne dei dati,
senza scrivere una riga di codice. Passiamo in modalità visuale della pagina Default.aspx ed
apriamo la sezione “Dati” della barra degli strumenti.

Trasciniamo nell’area di lavoro il controllo SqlDataSource. Cliccando sulla freccia in alto si apre
“Configura origine dati…”, procediamo.

Scegliamo “Nuova connessione …”, appare la maschera “Aggiungi connessione”, lasciamo


impostato “Usa autenticazione Windows” clicchiamo su “Modifica” alla voce “origine dati” e
selezioniamo “File di database di SQL Server”, tornati alla maschera precedente cerchiamo il file
PUBS.MDF con il pulsante “Sfoglia” e finalmente diamo l’ok.

Appare un resoconto con la stringa di connessione generata, cliccando su Avanti, il programma ci


chiede se vogliamo salvare la stringa di connessione nel file di configurazione del sito, il
web.config, con il nome PUBSConnectionString, accettiamo e procediamo.

A questo punto ci viene proposta la costruzione guidata di una query Select sulla tabella authors,
clickiamo su * per selezionare tutte le colonne, il VWD ci propone il comando che verrà codificato:

Listato 26. Risultato della creazione guidata della query


Select (SELECT * FROM [authors])

Cliccando su “Avanti” ci viene data la possibilità di fare un test sulla nostra Query. Proviamo. Se ci
appare una tabella con i dati, il test è andato bene, quindi abbiamo finito.

Abbiamo così configurato la sorgente dati SQL per fare una select sul database Pubs. Il VWD, ha
aggiunto alla nostra applicazione il file di configurazione web.config che conterrà la nostra stringa
di connessione al database, nonché altre informazioni di default.

Ricapitolando l’SqlDataSource è un controllo che ci consente di interagire con i dati in modo


visuale, ma non ci da la possibilità di inserire informazioni su come visualizzare questi dati. In un
certo senso, è una via di mezzo tra i dati e la loro visualizzazione. Per funzionare correttamente, ha
bisogno di sapere dove si trovano i dati (stringa di connessione) ed il comando o i comandi SQL da
implementare.

Trasciniamo adesso il GridView sulla nostra pagina. Si apre il menu con le Attività di GridView,
dove tra le origini dati proposte possiamo selezionare SqlDataSource1, che abbiamo appena
creato. Ora possiamo testare l’applicazione ed ottenere il risultato come in figura

Figura 3. Pagina con il risultato

Naturalmente, con pochi click, possiamo formattare la tabella a piacimento.

Passiamo alla visualizzazione del codice dove ci si rende conto che quanto prodotto in modo
visuale può essere naturalmente fatto a mano con un editor di testo e poi testato con IIS.

Listato 27. Codice della pagina generata automaticamente

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs”


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>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$
ConnectionStrings:PUBSConnectionString %>”
SelectCommand=”SELECT * FROM [authors]”></asp:SqlDataSource>

</div>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False”
BackColor=”White”
BorderColor=”White” BorderStyle=”Ridge” BorderWidth=”2px” CellPadding=”3″
CellSpacing=”1″
DataKeyNames=”au_id” DataSourceID=”SqlDataSource1″ GridLines=”None”>
<FooterStyle BackColor=”#C6C3C6″ ForeColor=”Black” />
<Columns>
<asp:BoundField DataField=”au_id” HeaderText=”au_id” ReadOnly=”True”
SortExpression=”au_id” />
<asp:BoundField DataField=”au_lname” HeaderText=”au_lname” SortExpression=”au_lname” />
<asp:BoundField DataField=”au_fname” HeaderText=”au_fname” SortExpression=”au_fname” />
<asp:BoundField DataField=”phone” HeaderText=”phone” SortExpression=”phone” />
<asp:BoundField DataField=”address” HeaderText=”address” SortExpression=”address” />
<asp:BoundField DataField=”city” HeaderText=”city” SortExpression=”city” />
<asp:BoundField DataField=”state” HeaderText=”state” SortExpression=”state” />
<asp:BoundField DataField=”zip” HeaderText=”zip” SortExpression=”zip” />
<asp:CheckBoxField DataField=”contract” HeaderText=”contract” SortExpression=”contract” />
</Columns>
<RowStyle BackColor=”#DEDFDE” ForeColor=”Black” />
<SelectedRowStyle BackColor=”#9471DE” Font-Bold=”True” ForeColor=”White” />
<PagerStyle BackColor=”#C6C3C6″ ForeColor=”Black” HorizontalAlign=”Right” />
<HeaderStyle BackColor=”#4A3C8C” Font-Bold=”True” ForeColor=”#E7E7FF” />
</asp:GridView>
</form>
</body>
</html>

Notiamo la presenza del comando Select nel controllo SqlDataSource e l’informazione relativa
alla stringa di connessione che viene letta dal Web.config.

Listato 28. Definizione della stringa di connessione nel web.config

<configuration>
<appSettings/>
<connectionStrings>
<add name=”PUBSConnectionString” connectionString=”Data
Source=.SQLEXPRESS;AttachDbFilename=”C:SQL Server 2000 Sample
DatabasesPUBS.MDF”;Integrated Security=True;Connect Timeout=30;User Instance=True”
providerName=”System.Data.SqlClient”/>
</connectionStrings>
<system.web>


Tornando al codice nella pagina, possiamo notare come è costruito il controllo GridView. C’è un
attributo relativo al Datasource a cui è collegato, il DataSourceID, i campi da visualizzare ed alcune
caratteristiche di visualizzazione.

Query con filtro

Supponiamo ora di voler visualizzare solo gli autori di un certo stato e di volerlo fare usando una
nuova pagina identica alla attuale.

Possiamo ottenere una pagina clone copiando il file Default.aspx in Default_s.aspx ad esempio.
Ora dobbiamo ricordare di rinominare anche il file del codice (Default.aspx.cs in Default_s.aspx.cs)
in cui dobbiamo ridefinire anche il nome della classe della pagina. Quindi modifichiamo il nome
della partial class in _Default_s ad esempio. Dobbiamo ricordare ancora che sulla nuova pagina il
riferimento alla classe da cui eredita l’oggetto della pagina deve essere modificato. Quindi
all’interno della Default_s.aspx dobbiamo porre CodeFile=”Default_s.aspx.cs”
Inherits=”_Default_s”.

Ritorniamo allo sviluppo visuale, abbiamo già la nostra pagina che visualizza la tabella authors.
Nella Default_s.aspx, trasciniamo un controllo DropDownList sopra il GridView.

Selezioniamo Attiva AutoPostBack dalle attività del componente per fare in modo che un
cambiamento della DropDownList provochi una sequenza di andata e ritorno dal server.
Assegnamo alla DropDownList una nuova origine dati di tipo Database e lasciamo il nome
SqlDataSource2. Ci viene chiesto di scegliere una stringa di connessione e selezioniamo
PUBSConnectionString.

Costruiamo una query Select sulla tabella “state” e spuntiamo la checkbox “Restituisci solo righe
univoche”.

Listato 29. Costruzione della guida

SELECT DISTINCT [state] FROM [authors]

Prendiamo adesso l’SqlDataSource1 per riconfigurarlo in modo da ottenere il risultato filtrato.


Arriviamo alla costruzione della query e clicchiamo su WHERE e poniamo Colonna = state,
Origine = Control, ID controllo = DropDownList1. Clicchiamo su Aggiungi e poi su ok. Dovremmo
avere realizzato la seguente query.

Listato 30. Query con filtro generata automaticamente

SELECT * FROM [authors] WHERE ([state] = @state)

Clicchiamo su Avanti, Test Query, mettiamo un valore, ad esempio CA ed osserviamo il risultato.


Se OK clicchiamo su Fine. Se ci viene chiesto di modificare la GridView diciamo di no.

Finalmente premiamo F5, proviamo a selezionare “UT” ed osserviamo il risultato:


Figura 4. Griglia dati con filtro

Altra cosa che possiamo ottenere con un click nel controllo GridView è l’abilitazione
dell’ordinamento delle colonne della tabella in fase di runtime. Bisogna impostare Enable Sorting
nelle proprietà.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Ordinamento e paginazione
 di Angelo Ranucci
 30 Giugno 2006

La GridView che abbiamo esaminato nel corso della precedente lezione, visualizza i record di un
dataset in una singola pagina, secondo la sua impostazione predefinita. Nel caso in cui i record da
visualizzare siano tanti, è possibile visualizzarli in più pagine, dando all’utente la possibilità di
navigare tra una pagina a l’altra. Si può inoltre stabilire un ordinamento in modo da facilitare
l’utente nel trovare ciò che gli interessa.

In ASP.NET 2.0, con il VWD, si può fare tutto questo semplicemente spuntando una Checkbox.
Costruiamo un esempio partendo dall’applicazione realizzata nella lezione precedente.

Apriamo un nuovo progetto posizioniamo una GridView nell’area di lavoro ed apriamo il menu
delle “Attività di GridView”.

Figura 1. Attività di GridView

Abbiamo la possibilità di spuntare le caselle:

 Attiva paging che serve a visualizzare i record in più pagine,


 Attiva ordinamento, che serve a permettere all’utente di ordinare i record,
 Attiva selezione, che serve a permettere all’utente di selezionare il record.

L’opzione Attiva selezione è utile ad esempio se occorre selezionare una riga della tabella di dati,
per mostrare i dettagli in un altra GridView. Se la griglia è configurata per consentire la selezione di
una riga, la selezione della riga provoca il verificarsi di un evento SelectedIndexChanged che poi
andrà gestito in modo opportuno.

Per il nostro esempio, spuntiamo tutte e tre le caselle. Facciamo un test e proviamo a navigare tra le
pagine, a selezionare una riga ed ad ordinare i record ad esempio per “au-lname”, cliccando
sull’intestazione della colonna.

Figura 2. Esempio di paginazione, ordinamento e selezione

In ASP.NET 2.0 inoltre, c’è la possibilità di realizzare un ordinamento ed una impaginazione lato
client. Basta impostare la proprietà EnableSortingAndPagingCallbacks a True nelle Proprietà
del controllo GridView:

Figura 3. Abilitare ordinamento e impaginazione lato client

In questo modo, un aggiornamento della pagina non provoca l’usuale sequenza di andata e ritorno
dal server ma lavora sui dati già scaricati.

Per testare questa possibilità, dobbiamo togliere disabilitare la selezione (togliamo la spunta da
Attiva selezione) altrimenti riceviamo un errore, come è lecito aspettarsi, in quanto, il lancio
dell’evento generato dalla selezione, non potrebbe essere gestito.

Se vogliamo personalizzare i numeri di pagina o aggiungere dei simboli possiamo agire nelle
proprietà raggruppate sotto la voce “PagerSettings”, nel gruppo “Paging” della finestra Proprietà
Figura 4. Personalizzare la paginazione

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Modifica e cancellazione
 di Angelo Ranucci
 30 Giugno 2006

In questa lezione vediamo come il controllo GridView possa essere utilizzato in modo molto
semplice per modificare o cancellare record memorizzati in un database.

Per queste operazioni, GridView si rivela più semplice da utilizzare del vecchio DataGrid, in quanto
il tutto può essere realizzato in modo visuale senza interventi sul codice.

Osserveremo però che, se non vogliamo allontanarci da questa semplicità di utilizzo, per effettuare
l’inserimento di un record in una tabella di database occorre utilizzare un altro controllo, il
DetailsView. Realizziamo un esempio partendo dal progetto che abbiamo realizzato nella
precedente lezione.

Prendiamo la Default_s.aspx, e visualizzando il sorgente controlliamo qual’è il DataSource


associato alla GridView.

Listato 31. Dichiarazione della GridView

<asp:GridView
ID=”GridView1″
runat=”server”
AutoGenerateColumns=”False”
DataKeyNames=”au_id”
DataSourceID=”SqlDataSource1″
GridLines=”None”
AllowSorting=”True”>
L’origine dati risulta essere SqlDataSource1. Configuriamo ora il controllo SqlDataSource1 in
modo che supporti l’edit e la cancellazione di record. In modalità visuale andiamo tra le Attività di
SqlDataSource e configuriamo l’origine dati.

Arriviamo alla finestra per la costruzione delle query e spuntiamo prima l’opzione Specificare le
colonne di una tabella o vista, e poi l’asterisco per impostare una Select su tutti i campi ed il
WHERE… per selezionare lo stato come fatto in precedenza. Quindi clicchiamo “Avanzate…”.
Appare una nuova finestra.

Figura 1. Opzioni per costruire comandi Update e Delete

Qui spuntiamo le due opzioni. La prima serve per generare le istruzioni SQL per fare
aggiornamento, cancellazione e inserimento, e la seconda per evitare conflitti nell’aggiornamento
dei record.

Clicchiamo su “Ok” poi “Avanti” e “Fine”. Se ci viene chiesto di apportare modifiche alla
GridView rifiutiamo.

Tra le Attività di GridView appaiono due nuove caselle che ci permettono di abilitare la griglia alla
modifica e alla cancellazione. Le spuntiamo entrambe e siamo pronti per testare la nostra
applicazione
Figura 2. Attività di GridView con modifica e cancellazione

Siamo pronti per testare la nostra applicazione, salviamo e proviamo:

Figura 3. Risultato finale

Spendiamo due parole sull’opzione “Usa concorrenza ottimistica“. Selezionando questa opzione,
l’SqlDataSource controlla se è avvenuto un cambiamento nella tabella da quando essa è stata editata
per il nostro aggiornamento. Ciò per evitare che un utente aggiorni la tabella coprendo le modifiche
fatte da un altro potenziale utente che nel frattempo l’ha aggiornata. Se si verifica che il record
originale è stato modificato durante il nostro edit, il successivo aggiornamento non avrà luogo.

Proviamo a visualizzare il codice generato andando in modalità “Origine”.

Listato 32. Definizione dell’origine dati con modifica e cancellazione

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$


ConnectionStrings:PUBSConnectionString %>”
SelectCommand=”SELECT * FROM [authors] WHERE ([state] = @state)”

ConflictDetection=”CompareAllValues”

DeleteCommand=”DELETE FROM [authors] WHERE [au_id] = @original_au_id AND


[au_lname] = @original_au_lname AND [au_fname] = @original_au_fname AND [phone] =
@original_phone AND [address] = @original_address AND [city] = @original_city AND [state] =
@original_state AND [zip] = @original_zip AND [contract] = @original_contract”
InsertCommand=”INSERT INTO [authors] ([au_id], [au_lname], [au_fname], [phone], [address],
[city], [state], [zip], [contract]) VALUES (@au_id, @au_lname, @au_fname, @phone, @address,
@city, @state, @zip, @contract)”

UpdateCommand=”UPDATE [authors] SET [au_lname] = @au_lname, [au_fname] = @au_fname,


[phone] = @phone, [address] = @address, [city] = @city, [state] = @state, [zip] = @zip, [contract]
= @contract WHERE [au_id] = @original_au_id AND [au_lname] = @original_au_lname AND
[au_fname] = @original_au_fname AND [phone] = @original_phone AND [address] =
@original_address AND [city] = @original_city AND [state] = @original_state AND [zip] =
@original_zip AND [contract] = @original_contract”
>

<SelectParameters>
<asp:ControlParameter ControlID=”DropDownList1″ Name=”state”
PropertyName=”SelectedValue”
Type=”String” />
</SelectParameters>

<DeleteParameters>
<asp:Parameter Name=”original_au_id” Type=”String” />
<asp:Parameter Name=”original_au_lname” Type=”String” />
<asp:Parameter Name=”original_au_fname” Type=”String” />
<asp:Parameter Name=”original_phone” Type=”String” />
<asp:Parameter Name=”original_address” Type=”String” />
<asp:Parameter Name=”original_city” Type=”String” />
<asp:Parameter Name=”original_state” Type=”String” />
<asp:Parameter Name=”original_zip” Type=”String” />
<asp:Parameter Name=”original_contract” Type=”Boolean” />
</DeleteParameters>

<UpdateParameters>
<asp:Parameter Name=”au_lname” Type=”String” />

<asp:Parameter Name=”original_au_id” Type=”String” />

</UpdateParameters>

<InsertParameters>
<asp:Parameter Name=”au_id” Type=”String” />

</InsertParameters>
</asp:SqlDataSource>

Notiamo la presenza degli attributi DeleteCommand, InserCommand ed UpdateCommand, con i


relativi parametri. L’UpdateCommand ad esempio controlla se ci sono stati aggiornamenti al record
originale e l’aggiornamento avviene solo se ciò non è avvenuto. Per tenere traccia dei record
originali, li immagazzina con nome preceduto dalla stringa “original_”.

Notiamo inoltre la presenza dell’attributo ConflictDetection che serve ad implementare la


strategia “First-One Wins” (il primo che arriva vince) per la risoluzione di eventuali conflitti
nell’accesso ai dati.

Un’altra cosa che si può fare è catturare l’errore che si verifica se la procedura di aggiornamento
non ha successo. Infatti, ad ogni aggiornamento possiamo gestire un evento
GridView1_RowUpdated implementando il delegato nel seguente modo:

Listato 33. Verificare l’aggiornamento sull’evento RowUpdated


protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e)
{
if (e.Exception != null)
{
Response.Write(“Il record non è stato aggiornato!”);
e.ExceptionHandled = true;
}
else
Response.Write(“Record aggiornato con successo!”);
}

Naturalmente, affinché l’evento venga gestito, all’interno del GridView1 dobbiamo inserire
OnRowUpdated="GridView1_RowUpdated"

Testiamo e verifichiamo:

Figura 4. Risultato con verifica dell’aggiornamento

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Dettaglio dei record e inserimento


 di Angelo Ranucci
 30 Giugno 2006

Come abbiamo accennato nella precedente lezione, per implementare l’inserimento di record in
un database in modo visuale, occorre utilizzare il controllo DetailsView in quanto la GridView
non lo permette.

Il controllo DetailsView serve per visualizzare dettagliatamente il contenuto dei campi di un


singolo record di una tabella di un database ed eventualmente operare una modifica, un inserimento
o la cancellazione del record.

Il DetailsView, che nel VWD si può trovare nell’area Dati della barra degli strumenti, può essere
inoltre usato in coppia con il GridView per implementare una visualizzazione Master/Detail.

Realizziamo un esempio di visualizzazione Master/Detail in cui si possono effettuare tutte le usuali


operazioni sui dati, cioè visualizzazione, edit, aggiornamento, cancellazione ed inserimento.

A tale scopo, apriamo un nuovo progetto nel VWD ed inseriamo sull’area di lavoro di Default.aspx
una tabella 1×2, cioè una riga e due colonne partendo ad esempio dal menu Layout>Inserisci tabella
ed impostando le caratteristiche della tabella come in figura
Figura 1. Definire una tabella di layout

Dalla Data Toolbox, trasciniamo un GridView nella prima cella ed un DetailsView nella seconda:

Figura 2. Inserire i controlli

Dobbiamo poi impostare un SqlDataSource per ognuno di essi. Per fare questo possiamo partire
dalle Attività di GridView ed inserire una nuova origine dati, selezionare poi Database, che va bene
per tutti i database SQL supportati da ADO.NET, e lasciare l’ID predefinito, andare avanti a creare
connessione con il file PUBS.MDF come abbiamo già fatto in precedenza. Scegliamo poi di salvare
la connessione PUBSConnectionString nel Web.config.

Specifichiamo i campi id, au_lname e au_fname della tabella “authors”.


Figura 3. Scegliere i campi della Select

Verifichiamo che il comando Select sia impostato bene, andiamo avanti, testiamo la query ed
abbiamo finito.

Per associare l’origine dati al DetailsView ripetiamo il procedimento usato per la GridView a
partire dal menu Attività di DetailsView. Creiamo quindi un nuovo SqlDataSource usando la
stessa stringa di connessione. Quando arriviamo a scegliere i campi per la query però, selezioniamo
l’asterisco, ovvero tutti i campi.

Impostiamo anche la clausola WHERE. Selezioniamo la colonna au_id, origine “Control” e id del
controllo GridView1, in modo che i dettagli mostrino il record scelto nel GridView.

Figura 4. Impostazione della clausola WHERE


Clicchiamo quindi su Aggiungi ed andiamo avanti senza testare fino alla fine.

Se abbiamo lasciato i nomi predefiniti per i due SqlDataSource, abbiamo la GridView che prende i
dati da SqlDataSource1 e il DetailsView che usa SqlDataSource2. La stringa di connessione è
comune e condivisa nel Web.config.

Abilitiamo la selezione dal menu delle Attività di GridView.

Nelle Attività di DetailsView, non abbiamo la possibilità di abilitare la modifica, l’aggiornamento,


l’inserimento e la cancellazione. Questo perché il DetailsView lavora insieme ad un Data Source.
Quindi impostiamo l’SqlDataSource2 in modo da poter svolgere le operazioni volute.

Nelle Attività di SqlDataSource di SqlDataSource2 clicchiamo su “Configura origine dati…”


andiamo avanti, clicchiamo su “Avanzate…” e spuntiamo le opzioni nella finestra che si apre, come
abbiamo visto nelle lezioni precedenti. Quindi clicchiamo su “Avanti” e “Fine”.

Figura 5. Opzioni avanzate per la generazione di query

Ora nelle Attività di DetailsView abbiamo la possibilità di selezionare le opzioni “Attiva


inserimento”, “Attiva modifica”, “Attiva cancellazione” e “Attiva eliminazione”, facciamolo.

Siamo già pronti per testare la nostra applicazione ma se vogliamo possiamo agire per formattare la
visualizzazione dei dati a piacimento, scegliendo “Formattazione Automatica…” nelle Attività dei
nostri controlli di visualizzazione. Testiamo quindi la nostra applicazione premento F5.

Figura 6. Risultato finale


Se le caselle di visualizzazione dei campi dei record sono troppo strette ed i valori contenuti vanno
su più righe, possiamo allargare i controlli trascinando il lato destro verso destra fino ad ottenere
una larghezza accettabile.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Caching dipendente
 di Angelo Ranucci
 7 Luglio 2006

Nella precedente lezione abbiamo visto che cosa significa Cache del controllo Data Source ed
abbiamo sviluppato un esempio, verificando il Caching per il controllo SqlDataSource. Abbiamo
impostato gli attributi CacheDuration ed EnableCaching direttamente sul codice e non ci siamo
per nulla preoccupati della pianificazione della scadenza della cache, implicitamente accettando
l’impostazione predefinita CacheExpirationPolicy="Absolute".

Assegnare il valore Absolute all’attributo CacheExpirationPolicy significa che cache termina dopo
il numero di secondi specificato nella CacheDuration, cominciando a contare da quando la pagina, o
meglio i dati in essa contenuti, vengono caricati.

Un altro modo di pianificare la scadenza della Cache è CacheExpirationPolicy="Sliding" Il


funzionamento di questa strategia di gestione della cache è quello di resettare la validità della cache
non appena viene fatta una richiesta, ed è utile quando il numero di oggetti a cui applicare il caching
è elevato. In questo modo, vengono mantenuti in memoria solo gli oggetti usati più di frequente.

Una politica di caching più logica è quella di invalidare la cache di database quando viene scoperto
un cambiamento.

Un esempio tipico è il monitoraggio dei prezzi di un titolo azionario. Se mettiamo, ad esempio una
CacheDuration di 1 minuto, se avvengono fluttuazioni di prezzo, ci verranno monitorate ogni
minuto, ma se non avvengono, il prezzo non verrà aggiornato e viene meno la necessità di rileggere
i dati. In questi casi è meglio che la duration della cache sia dipendente dai cambiamenti che si
verificano nel database.

Avendo a disposizione SQL Server 2005 ed ASP.NET 2.0, l’implementazione della cache usando la
dipendenza è piuttosto semplice.

Non occorre agire sul Web.config e non occorre preparare il database alla notifica dei cambiamenti
con l’utility aspnet_regsql.exe.

L’unica cosa da fare è, oltre che stabilire una durata, abilitare l’SqlDataSource mediante l’aggiunta
degli attributi:

SqlCacheDependency=”CommandNotification”
EnableCaching=”True”
Se però abbiamo a che fare con un database realizzato con una delle precedenti versioni di SQL
Server, dobbiamo abilitare il database alla notifica dei cambiamenti. Questo può essere fatto
mediante l’utility aspnet_regsql.exe, oppure mediante l’utilizzo opportuno della classe
SqlCacheDependencyAdmin.

Quest’ultimo è il metodo più elegante e flessibile per risolvere il nostro problema, cerchiamo di
implementarlo.

Cominciamo a realizzare la nostra applicazione. Partendo da Esplora Database, connettiamoci al file


PUBS.MDF. Apriamo poi la cartella “Tabelle” e trasciniamo la tabella “authors” sulla nostra area di
lavoro.

Il VWD costruisce automaticamente una GridView con il suo SqlDataSource. Nell’SqlDataSource


impostiamo una cache di 30 secondi, con la dipendenza.

Listato 35. Parametri per il caching con dipendenza

CacheDuration=”30000″
EnableCaching=”True”
SqlCacheDependency=”pubs:authors”

Mettiamo poi una label per visualizzare il tempo in ore, minuti e secondi, in cui avviene un
cambiamento alla tabella di database visualizzata.

Quindi, per monitorare un cambiamento, utilizziamo l’evento Selecting del controllo


SqlDataSource. L’evento Selecting viene lanciato prima che parta la query del controllo e di solito è
usato per validare i parametri in gioco.

Per implementare un gestore dell’evento Selecting, clicchiamo due volte sul controllo
SqlDataSource. Il VWD automaticamente passa nella parte codice e propone un gestore dell’evento
vuoto, da implementare.

Scriviamo dunque il nostro gestore in cui utilizziamo la data e l’ora del server per impostare il testo
della Label.

Listato 36. Delegato per l’evento Selecting del data source

protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)


{
dateTimeLabel.Text = System.DateTime.Now.ToString();
Cache[“LastRetrieval”] = System.DateTime.Now.ToString();
}

Implementiamo ora il metodo che serve ad abilitare il database pubs alla notifica dei cambiamenti:

Listato 37. Abilitare il database alla notifica dei cambiamenti

public void EnableNotification(string tableName, string connStr)


{
bool mustEnable = true;
try
{
string[] tablesEnabled =
SqlCacheDependencyAdmin.GetTablesEnabledForNotifications(connStr);
if (tablesEnabled.Length > 0)
{
Response.Write(“<b>Tables Enabled For Notification</b><br />”);
foreach (string table in tablesEnabled)
{
Response.Write(table + “<br />”);
if (table.ToString().Equals(tableName))
{
mustEnable = false;
}
}
}
}
catch (Exception e)
{
mustEnable = true;
}
if (mustEnable)
{
SqlCacheDependencyAdmin.EnableNotifications(connStr);
SqlCacheDependencyAdmin.EnableTableForNotifications(connStr, tableName);
Response.Write(tableName + “<br />”);
}
}

Ricordiamoci di inserire la direttiva using System.Web.Caching; in Default.aspx.cs ed infine


di richiamare il medodo in Page_Load.

Listato 38. Modifica in Page_Load

protected void Page_Load(object sender, EventArgs e)


{
EnableNotification(“authors”, SqlDataSource1.ConnectionString);
}

Nel Web.config dobbiamo poi aggiungere le informazioni riguardanti la dipendenza della cache:

Listato 39. Modifiche al Web.config


<system.web>

<caching>
<sqlCacheDependency enabled=”true” pollTime=”30000″>
<databases>
<add name=”pubs” connectionStringName=”PUBSConnectionString” />
</databases>
</sqlCacheDependency>
</caching>
</system.web>

Per testare l’applicazione possiamo usare lo stesso procedimento visto nella precedente lezione.
Cioè, far partire l’applicazione, operare un cambiamento al database, editando i dati della tabella
authors mediante Esplora database, e verificare che il cambiamento sui dati che visualizziamo,
avviene dopo 30 secondi, in parallelo alla data e ora visualizzata.

Figura 1. Risultato finale

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Connessione ad un documento XML


 di Angelo Ranucci
 7 Luglio 2006

Per connettersi ad un documento XML e leggere i dati in esso contenuti, si può usare il controllo
XmlDataSource. Tale controllo, che va bene in coppia con un DataList o un TreeView, consente
di non dilungarsi troppo nella scrittura del codice. In questa lezione vedremo come sfruttare questi
controlli per realizzare un lettore di documenti RSS.

Un documento RSS è un file XML che contiene un certo numero di elementi (item) che
rappresentano notizie. Gli elementi <item> sono contenuti dal tag <channel> che, oltre ad essi
contiene 3 elementi obbligatori <title>, <descriprion> e <link>.

Listato 40. Struttura di un RSS

<channel>
<title><!– Il titolo del canale –></title>
<description><!– Una breve descrizione –></description>
<link><!– la URL del canale –></link>
<!– qui vanno altri elementi opzionali –>
<item>
<title><!– titolo dell’elemento (della notizia) –></title>
<description><!– una breve descrizione –></description>
<link><!– la URL –></link>
</item>
</channel>

Ci possono essere anche altri elementi come <image>, <item>, <textinput>, <language>,
<copyright>, <managingEditor>, <pubDate> e <category>.

Per realizzare il nostro esempio possiamo utilizzare uno dei feed RSS messi a disposizione da
HTML.it. In particolare usiamo l’RSS delle guide di HTML.it all’indirizzo
https://www.html.it/rss/guide.xml

Partiamo al solito aprendo un nuovo progetto. Nella Default.aspx aggiungiamo una TextBox ed
un Button, impostiamone gli ID, oltre che il testo del Button, in modo che abbiano dei nomi
significativi. Allarghiamo opportunamente la TextBox in quanto dovrà contentere una URL.

Aggiungiamo quindi un controllo DataList, trascinandolo dalla sezione Dati della barra degli
strumenti e dalle Attività di DataList selezioniamo <Nuova origine dati...> . Nella finestra che
appare, selezioniamo “XML File”.

Figura 1. Selezionare un XmlDataSource

Nella finestra successiva inseriamo l’URL del file RSS preso dal collegamento di sopra
(https://www.html.it/rss/guide.xml) e nel campo “Espressione XPath” mettiamo il percorso interno
al documento XML degli item che ci interessa visualizzare.
Il percorso XPath si scrive in modo simile a quello di una cartella in un file system. Infatti in
entrambe i casi si tratta di indicare una posizione su una struttura gerarchica (ad albero).
Considerando come nodo radice l’elemento <rss> possiamo scrivere: rss/channel/item

Figura 2. Configurare l’origine dati

In modalità “Origine” della Default.aspx, inseriamo la definizione dell’ItemTemplate per il


controllo DataList aggiungendo le fonti di dati del documento XML. Ovvero descriviamo il
modello per ciascun elemento della lista delle notizie dell’RSS.

Listato 41. Definizione dell’ItemTemplate

<asp:DataList ID=”DataList1″ runat=”server” DataSourceID=”XmlDataSource1″>


<ItemTemplate>
<strong><%#XPath(“title”)%></strong><br />
<em><%#XPath(“description”)%></em>
<%#XPath(“pubDate”)%><br /> <a href='<%#XPath(“link”)%>’>Link</a><br />
<br />
</ItemTemplate>
</asp:DataList>

Testiamo la nostra applicazione premendo F5. Otteniamo il nostro RSS di default.


Figura 3. Visualizzazione dell’RSS di default

Fin’ora ci siamo limitati a visualizzare un RSS predefinito e non abbiamo ancora implementato la
possibilità di visualizzarne uno inserendo una URL nella casella di testo.

Per implementare anche questa caratteristica clicchiamo due volte sul bottone “Visualizza l’RSS” e
scriviamo il metodo delegato a gestire l’evento OnClick, in cui assegnamo all’origine dati la URL
digitata nella casella di testo.

Listato 42. Assegnare una nuova URL all’XmlDataSource

protected void visualizzaRSS_Click(object sender, EventArgs e)


{
XmlDataSource1.DataFile = url.Text;
}

Salviamo e testiamo di nuovo, mettendo un URL come ad esempio quello in figura, e premendo il
pulsante.
Figura 4. Risultato finale

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

I controlli per l’autenticazione


 di Angelo Ranucci
 14 Luglio 2006

I nuovi controlli di ASP.NET 2.0 sulla sicurezza, semplificano la vita agli sviluppatori consentendo
ad esempio di implementare il login degli utenti, la registrazione sul sito, il cambiamento della
password, ed altro ancora. Questi compiti, che prima richiedevano la scrittura di codice, adesso
possono essere svolti semplicemente trascinando i relativi controlli dalla barra degli strumenti
all’area di lavoro.

Ad alimentare questi nuovi controlli, ci pensano le nuove API Membership. Una API è indica un
insieme di procedure e strumenti specifici, disponibili al programmatore, per svolgere un
determinato compito evitando di scrivere tutte le funzioni dal nulla.

Vediamo quindi come realizzare una pagina di login con i nuovi controlli messi a disposizione da
ASP.NET 2.0 e presenti nella Login Toolbox del VWD.

Al solito apriamo un nuovo progetto e trasciniamo un controllo LoginView nella Default.aspx.

Figura 1. Inserire un controllo LoginView


Il controllo LoginView fa da contenitore per altri controlli e mostra le informazioni circa lo stato
dell’utente collegato. Ci informa se l’utente ha già effettuato il login, cioè se ha già effettuato una
autenticazione oppure no.

Inseriamo un messaggio di benvenuto sopra al controllo ed al suo interno nella visualizzazione


“AnonymousTemplate” che troviamo tra le “Attività di LoginView”. Questo messaggio verrà
mostrato infatti quando l’utente è ancora anonimo ovvero quando non ha effettuato il login.

Figura 2. Inserire un messaggio per utenti anonimi

Al posto della parola Login, inseriamo un controllo LoginStatus che indicherà lo stato dell’utente
e darà la possibilità, clickando, di andare alla pagina di Login. Modifichiamo la proprietà
“LoginText” in visualizzazione “non connesso”.

Selezionando LoggedInTemplate nelle Attività di LoginView, scriviamo il messaggio da


visualizzare quando l’utente è autenticato, cioè ha effettuato il login. Possiamo inserire un controllo
LoginName per visualizzare il nome dell’utente autenticato, ed un controllo LoginStatus, che
consenta di fare il Logout, anche qui modifichiamo il testo con la proprietà “LogoutText” in
visualizzazione “Connesso”.

Figura 3. Inserire un messaggio per utenti loggati

A questo punto dobbiamo realizzare la pagina di Login, che chiamiamo Login.aspx. Quindi
aggiungiamo la nuova pagina al progetto e, in modalità visuale, trasciniamo in Login.aspx un
controllo Login.

Figura 4. Inserire un controllo Login

Abbiamo così realizzato l’interfaccia utente per il Login. Qui l’utente dovrebbe inserire le sue
credenziali e se queste sono giuste dovrebbe essere reindirizzato in una pagina del sito protetta.
Stiamo implementando quella che si dice autenticazione di tipo “Forms”. Questo tipo di
autenticazione non effettua automaticamente il criptaggio delle credenziali che vengono inserite,
cosa che andrebbe fatta per evitare intercettazioni furtive.

Se vogliamo chiamare la pagina di login in un altro modo, ad esempio Autenticazione.aspx,


dobbiamo impostare opportunamente il Web.config, in quanto il nome Login.aspx è accettato di
default e non necessita di configurazioni particolari. Vediamo cosa aggiungere al Web.config nel
caso che la pagina di login si chiami Autenticazione.aspx.

Listato 43. Modificare il nome della pagina di login in Web.Config

<authentication mode=”Forms”>
<forms
name=”.ASPXAUTH”
loginUrl=”Autenticazione.aspx”
protection=”Validation”
timeout=”999999″ />
</authentication>

La modalità <authentication mode="Forms"> si usa per applicazioni web a differenza della


<authentication mode="Windows"> che richiederebbe la creazione di un account utente su una
macchina Windows.

Fra gli attributi dell’elemento <forms> notiamo:

 name che indica il nome del cookie HTTP usato per l’autenticazione;
 loginUrl che specifica la pagina usata come pagina di login;
 protection che indica se i cookies sono criptati ed il livello di protezione;
 timeout che specifica, in minuti, il tempo dopo il quale il cookie viene cancellato.

Quindi, se non lo abbiamo già fatto, aggiungiamo il Web.config alla nostra applicazione, cliccando
con il pulsante destro sul nome del progetto in Esplora Soluzioni e aggiungendo un nuovo elemento
di tipo File di configurazione Web.

Nel Web.config, sostituiamo <authentication mode="Windows">, che è la scelta predefinita, con


<authentication mode="Forms">.

Nella finestra delle Proprietà del controllo Login, possiamo anche impostare la proprietà
DestinationPageUrl ad una pagina del nostro sito, ad esempio “DestinationPage.aspx”, che nel
nostro caso va creata. Questa pagina è quella a cui verrà indirizzato il potenziale utente che si
autentifica.

Ora possiamo pronti per testare la nostra applicazione.


Figura 5. Pagina iniziale con accesso anonimo

Proviamo ad effettuare il Login inventando un nome, ad esempio “pippo” ed una password:

Figura 6. Pagina di login

Otteniamo:
Figura 7. Login fallito

Il che è giusto perché l’utente “pippo” non esiste. Nella prossima lezione vedremo come inserire
degli utenti.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Aggiungere utenti
 di Angelo Ranucci
 14 Luglio 2006

Il modello di sicurezza usato da ASP.NET 2.0, conosciuto come Membership Provider Model
consente una elevata flessibilità nella scelta delle caratteristiche da aggiungere alle proprie
applicazioni.

Il Membership Provider Model è un modello a 4 strati. Al livello più alto troviamo i controlli
server, che in parte abbiamo già visto nella precedente lezione e che, nel VWD, si trovano nell’area
“Accesso” della barra degli strumenti.

Al terzo livello troviamo le Membership API, in cui ci sono due classi: la classe Membership, che si
occupa di compiti come aggiungere e cancellare utenti, e la classe MembershipUser, che si occupa
della gestione delle informazioni utente come la password o delle domande per recuperare password
smarrite.

Le Membership API usano i Membership Provider, posti al secondo livello, che servono a salvare
o comunque a mantenere le informazioni, su di un supporto per immagazzinare i dati. Il
Membership Provider di default nel VWD è l’SQL Express 2005 Membership Provider. Il ruolo del
Membership Provider è quindi quello di fare da ponte tra le Membership API e i supporti di
immagazzinamento dei dati, cioè i database, in modo che, lo sviluppatore non debba scrivere codice
a basso livello.

Se lo sviluppatore vuole immagazzinare i suoi dati in un formato diverso, ad esempio in un


documento XML, può scrivere un proprio Membership Provider ad hoc.
Al primo livello troviamo i sistemi di immagazzinamento dei dati tra cui quello di default che è un
database SQL Server.

In questa lezione vedremo come aggiungere gli utenti al sito utilizzando lo Strumento
Amministrazione sito Web, WAT, che una novità di ASP.NET 2.0.

La cosa che ci dobbiamo aspettare, dal discorso appena fatto, è la memorizzazione delle
informazioni su di un database, onde poterle mantenere nel tempo. Di default, il database viene
messo nella cartella App_Data ed è un database SQL Server 2005 Express.

Partiamo dall’applicazione realizzata nella lezione precedente e aggiungiamo un nuovo utente al


nostro sito. Per farlo lanciamo il WAT nel VWD: dal menu Sito Web>Configurazione di ASP.NET.

Figura 1. Strumento Amministrazione sito Web

L’icona dello strumento di amministrazione è presente anche in Esplora Soluzioni, vi si accede


anche dalle Attività di LoginView alla voce “Amministra sito web”.

Una volta lanciata l’amministrazione del sito, clicchiamo su “Protezione” e poi su “Crea utente”, e
riemiamo il form per inserire le informazioni relative al nuovo utente.
Figura 2. Inserire un nuovo utente

Cliccando sul pulsante “Crea utente”, può succedere che la password inserita non vada bene, come
in questo caso:

Figura 3. Password troppo semplice

Anche se non citato esplicitamente, affinché la password vada bene deve essere di almeno 7
caratteri e contenere almeno un carattere non alfanumerico, questo vuol dire che un numero non va
bene, ma un carattere come ‘@’ può andar bene. Riproviamo, e creiamo gli utenti Paperino e Pippo,
utilizzando ad esempio questi dati:

Utente 1 ------------------------

Nome: Paperino
Password: paperino@
e-mail: paperino@yahoo.com
Domanda: Chi è il più fortunato?
Risposta: Gastone
----------------------------------

Utente 2 ------------------------

Nome: Pippo
Password: pipposki@
e-mail: pippo@yahoo.com
Domanda: Chi è il più furbo?
Risposta: Topolino
----------------------------------

La lista degli utenti creati la si può vedere nella sezione Home>Protezine>Gestisci utenti

Figura 4. Gestione utenti

Da qui si possono modificare le informazioni sugli utenti.

Proviamo adesso a testare la nostra applicazione. Clicchiamo su “Login” ed inseriamo un account


valido.

Figura 5. Inserimento dell’account

Clicchiamo sul pulsante “Accedi”.

Figura 6. Accesso consentito

Possiamo anche provare che, accedendo direttamente alla Login.aspx, si viene indirizzati, dopo
l’autenticazione, alla pagina DestinationPage.aspx.
Infine notiamo che in Esplora Soluzioni, all’interno della cartella App_Data è presente il file di
database ASPNETDB.MDF. Se visualizziamo le tabelle presenti in questo file con Esplora Database
possiamo accedere alle informazioni sugli utenti.

Figura 7. Visualizzare le informazioni degli utenti

Si vede chiaramente che le password sono trattate in modo da non poter essere riconosciute.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Aree protette nell’applicazione


 di Angelo Ranucci
 14 Luglio 2006

Nella lezione precedente abbiamo visto come aggiungere utenti alla nostra applicazione. Se
vogliamo che utenti con specifiche credenziali possano accedere a delle pagine del sito protette,
dobbiamo configurare la nostra applicazione creando delle aree con accesso riservato solo agli
utenti autenticati.

Il modo più semplice per restringere l’accesso ad alcune pagine, è raggrupparle all’interno di una
cartella, ed applicare poi le restrizioni a tutta la cartella.

Per restringere l’accesso ad una cartella del sito, possiamo inserire al suo interno un file di
configurazione particolare, oppure agire sul file di configurazione dell’intero sito, posto nella
cartella principale (root) dell’applicazione, aggiungendo un opportuno elemento <location>.

Per realizzare un esempio, sfruttiamo quanto realizzato nella lezione predecente. La prima cosa da
fare è creare una nuova cartella all’interno della cartella principale del sito. Quindi, con in Esplora
Soluzioni, aggiungiamo una cartella dal nome “Iscritti”. Nella cartella “Iscritti” aggiungiamo

 un Web Form che chiamiamo DefaultIscritti.aspx. Questa è la pagina alla quale


restringiamo l’accesso. Al suo interno possiamo scrivere un messaggio come “Pagina
disponibile solo agli Iscritti!”
 un file di configurazione
Figura 1. Creare l’area protetta

Nel nuovo Web.Config aggiungiamo un elemento <authorization> all’interno di <system.web>

Listato 44. Restringere l’accesso ai soli autorizzati

<authorization>
<deny users=”?”/>
</authorization>

Col tag <deny> indichiamo che vogliamo negare l’accesso e specifichiamo che vogliamo negarlo
agli utenti (attributo users) che sono anonimi (punto interrogativo), ovvero non autenticati.

Se avessimo usato invece del punto interrogativo l’asterisco che ha il significato di “tutti gli utenti”,
avremmo negato l’accesso a chiunque.

Invece di usare l’elemento <deny> (nega), potevamo usare l’elemento <allow> (consenti) e
specificare esplicitamente gli utenti con diritto di accesso alla cartella protetta.

A questo punto siamo pronti per effettuare un test. Poniamoci nella situazione di voler entrare nella
pagina protetta, la DefaultIscritti.aspx. Per farlo apriamola come per modificarla e premiamo
F5. In questo modo, il Web Server cercherà di accedere subito a quella pagina senza andare alla
Default.aspx.

Figura 2. Pagina di login

Naturalmente ci viene richiesta l’autenticazione e l’applicazione ci reindirizza alla pagina di Login.


Inseriamo le nostre credenziali, e queste sono giuste, l’applicazione ci dovrebbe reindirizzare alla
pagina richiesta in precedenza, la DefaultIscritti.aspx. Proviamo inserendo:

Nome utente: Paperino


Password: paperino@

Otteniamo la nostra pagina protetta:


Figura 3. Accesso alla pagina protetta

Se invece di avere un Web.config per ogni cartella protetta preferiamo averne uno solo, dobbiamo
impostare le restrizioni nel file di configurazione della cartella principale del sito, inserendo in
quello un elemento <location>, con il percorso della cartella da proteggere:

Listato 45. Cartella protetta con un solo Web.config

</system.web>

<location path=”Iscritti”>
<system.web>
<authorization>
<deny users=”?”/>
</authorization>
</system.web>
</location>

</configuration>

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Recuperare le password
 di Angelo Ranucci
 19 Luglio 2006

Può succedere che un utente dimentichi la propria password, in realtà questo accade molto spesso,
per cui c’è necessità di un metodo automatico per recuperare la password di un utente e fargliela
avere.

Un modo per svolgere questo compito è quello di usare una domanda di sicurezza, alla quale solo
l’utente sa rispondere e spedire password all’indirizzo e-mail fornito durante la registrazione. Anche
la domanda e la relativa risposta vengono fornite dall’utente in fase di registrazione.
In ASP.NET 2.0, possiamo ottenere questo procedimento utilizzando il controllo
PasswordRecovery. Realizziamo quindi un esempio in cui usiamo questo controllo partendo dal
progetto realizzato nella lezione precedente.

Modifichiamo la pagina Login.aspx in modalità visuale e trasciniamo in essa un controllo


PasswordRecovery

Figura 1. Inserire un controllo PasswordRecovery

Inviare la password via e-mail

Dobbiamo adesso configurare la nostra applicazione affinché possa inviare delle e-mail. Apriamo
quindi lo strumento di amministrazione applicazioni (WAT) ed andiamo alla sezione
“Configurazione Applicazione”. Clicchiamo su “Configura impostazioni posta SMTP”.

Poi forniamo i parametri relativi al server SMTP che vogliamo usare. Naturalmente possiamo usare
sia un server locale sia i parametri di un server remoto, ad esempio quelli che usiamo con il client
della posta elettronica.
Figura 2. Impostare i parametri per l’SMTP

Salviamo le impostazioni e notiamo che nel Web.config è stato aggiunto un elemento


<system.net>.

Listato 46. Modifiche al web config

<system.net>
<mailSettings>
<smtp from=”redazione@html.it”>
<network host=”smtp.mioserver.it” password=”tootoooe” userName=”ranux” />
</smtp>
</mailSettings>
</system.net>

Creiamo poi un account utente che conosciamo e che, nel test che faremo, riceverà la password
tramite e-mail.

In caso di errore

In alcuni casi potremmo ottenere un messaggio di errore:

Compilation Error
Description: An error occurred during the compilation of a resource required to
service this request. Please review the following specific error details and
modify your source code appropriately.

Compiler Error Message: CS0246: The type or namespace name 'MailSettingsSection'


could not be found (are you missing a using directive or an assembly reference?)
Source Error:

Line 45:
Line 46: Configuration config = OpenWebConfiguration(appPath);
Line 47: MailSettingsSection netSmtpMailSection = (MailSettingsSection)
config.GetSection("system.net/mailSettings");
Line 48:
Line 49: ServerNameTextBox.Text = netSmtpMailSection.Smtp.Network.Host;

Source File:
c:WINDOWSMicrosoft.NETFrameworkv2.0.50215ASP.NETWebAdminFilesAppConfigSmtpSettin
gs.aspx Line: 47

Se accade è sufficiente Dobbiamo operare questi cambiamenti nel file

c:WINDOWSMicrosoft.NETFrameworkv2.0.50215ASP.NETWebAdminFilesAppConfigSmtpSettin
gs.aspx

Alle linee 47 e 102, togliere la riga:

MailSettingsSection netSmtpMailSection = (MailSettingsSection)


config.GetSection(“system.net/mailSettings”);

e sostituirla con:

MailSettingsSectionGroup netSmtpMailSection = (MailSettingsSectionGroup)


config.GetSectionGroup(“system.net/mailSettings”);

Inviare la password in chiaro

Come abbiamo notato nella precedente lezione, la password immagazzinata nel database è
codificata in modo da non poter essere letta da chi visualizza i dati o da potenziali hacker.

Questo va bene per motivi di sicurezza ma a noi serve spedire la password in chiaro. Dobbiamo fare
in modo, quindi, che le password vengano memorizzate nel database senza subire alterazioni. In
questo caso agiamo sul Web.config inserendo l’elemento <membership>

Listato 47. Memorizzare le password in chiaro

<membership defaultProvider=”SqlProvider” userIsOnlineTimeWindow=”20″>


<providers>
<add name=”SqlProvider”
type=”System.Web.Security.SqlMembershipProvider”
connectionStringName=”LocalSqlServer”
enablePasswordRetrieval=”true”
enablePasswordReset=”false”
requiresQuestionAndAnswer=”true”
passwordFormat=”Clear”
applicationName=”Lezione31″ />
</providers>
</membership>

</system.web>

Dopo che abbiamo operato questa modifica, aggiungiamo un nuovo utente con il WAT. Questo
nuovo utente deve avere un’e-mail funzionante. Non usiamo gli utenti creati in precedenza poiché
hanno delle e-mail inventate che non ci permettono di verificare l’invio delle password.
Verifichiamo che la password sia memorizzata così come viene scritta, esaminando il contenuto del
database con il Esplora Database.

Siamo adesso pronti per effettuare il nostro test. clicchiamo sulla Default.aspx e premiamo F5.
Quindi clicchiamo su Login. Immaginiamo di aver dimenticato la password e mettiamo il nome
utente nello spazio apposito:

Figura 3. Inserimento del nome utente

Clicchiamo su “Invia” e rispondiamo alla domanda:

Figura 4. Risposta alla domanda di sicurezza

Otteniamo:
Figura 5. E-mail inviata

Verifichiamo sul browser della posta che l’e-mail è arrivata con la nostra password:

Figura 6. E-mail arrivata a destinazione

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Temi e Skin
 di Angelo Ranucci
 19 Luglio 2006

L’interfaccia utente è molto importante per le applicazioni web. Una buona interfaccia dovrebbe
essere amichevole, vale a dire di facile utilizzo anche per chi visita il sito per la prima volta e
dovrebbe essere piacevole, accattivante.

La pianificazione e l’architettura che assicurano una netta distinzione tra le problematiche connesse
con l’interfaccia utente (UI) e la logica di funzionamento dell’applicazione sono questioni, a volte,
di non semplice realizzazione.

ASP.NET 2.0 ci viene incontro con l’introduzione di Temi e Skin che servono a dare un look
armonioso e uniforme ai controlli server ASP.NET utilizzati nell’applicazione. Come al solito
realizziamo un esempio per capire di che cosa si tratta.

Apriamo un nuovo progetto ed iniziamo inserendo nella pagina Default.aspx, in modo visuale,
una Label, un Calendar ed un Button, trascinandoli sull’area di lavoro dalla casella degli
strumenti.

Modifichiamo il testo della Label inserendo una scritta che abbia a che fare con il calendario, ad
esempio: “Seleziona la data del tuo compleanno:”. Nel Button scriviamo “Invio”.
In Esplora Soluzioni clicchiamo con il destro sul nome del progetto in Esplora Soluzioni poi
clicchiamo su “Aggiungi una cartella ASP.NET” e su Tema. La cartella creata farà da contenitore
per i temi della nostra applicazione.

Rinominiamo il tema creato automaticamente e gli diamo il nome “Classico”.

Quindi all’interno della cartella App_Themes, abbiamo la cartella Classico che farà da contenitore
per gli skin del tema “Classico”. Il nome della cartella deve coincidere con il nome del tema.

Aggiungiamo ora tre file di interfaccia (skin) nella cartella “Classico”. Al solito con un click destro
del mouse su di essa, scegliamo “Aggiungi nuovo elemento>File di interfaccia”. Diamo al primo il
nome di “Button.skin”, al secondo il nome di “Calendar.skin” ed al terzo, il nome di “Label.skin”.
Nel nostro Esplora Soluzioni è adesso visibile il tema contenente i tre skin.

Figura 1. Il tema Classico con i tre file skin

I file “.skin” devono essere popolati con del codice scritto a mano e non in modalità visuale. La
cosa che conviene fare è disegnare i controlli in modalità visuale usando una pagina
temporanea e poi fare un taglia-incolla del codice prodotto dal Web Form al file “.skin” avendo
l’accortezza di togliere l’ID del controllo.

Usiamo questo escamotage per i tre file “.skin” disegnando a piacere il bottone, il calendario e
l’etichetta. Riportiamo qui un esempio del codice prodotto:

Listato 48. Codice di “Button.skin”

<asp:Button runat=”server” BackColor=”Navy”


Font-Bold=”True” Font-Names=”Comic Sans MS”
ForeColor=”White” Width=”330px” />

Listato 49. Codice di “Label.skin”

<asp:Label runat=”server” Font-Bold=”True”


Font-Names=”Comic Sans MS”
ForeColor=”White” BackColor=”Navy”
BorderColor=”Black” BorderWidth=”2px”
Width=”325px”>
</asp:Label>

Listato 50. Codice di “Calendar.skin”


<asp:Calendar runat=”server” BackColor=”White”
BorderColor=”Black”
BorderStyle=”Solid” CellSpacing=”1″
Font-Names=”Verdana” Font-Size=”9pt”
ForeColor=”Black” Height=”250px”
NextPrevFormat=”ShortMonth” Width=”330px”>
<SelectedDayStyle BackColor=”#333399″ ForeColor=”White” />
<OtherMonthDayStyle ForeColor=”#999999″ />
<DayStyle BackColor=”#CCCCCC” />
<TodayDayStyle BackColor=”#999999″ ForeColor=”White” />
<NextPrevStyle Font-Bold=”True” Font-Size=”8pt”
ForeColor=”White” />
<DayHeaderStyle Font-Bold=”True” Font-Size=”8pt”
ForeColor=”#333333″ Height=”8pt” />
<TitleStyle BackColor=”#333399″ BorderStyle=”Solid”
Font-Bold=”True” Font-Size=”12pt”
ForeColor=”White” Height=”12pt” />
</asp:Calendar>

La nostra applicazione in Design view della Default.aspx si vede così:

Figura 2. Visualizzazione senza tema

Impostiamo il tema “Classico” alla voce “Theme” nelle Proprietà del documento della pagina
Default.aspx, oppure aggiungiamo l’attributo Theme="Classico" a mano all’interno della
direttiva Page.

Siamo ora pronti per testare la nostra applicazione. Premiamo F5 e vediamo l’effetto
dell’applicazione del tema.
Figura 3. Aspetto dopo l’applicazione del tema

In un file “.skin” possiamo inserire diverse definizioni dello stesso controllo. In questi casi bisogna
identificare i vari controlli mediante lo skinid. La definizione di default che verrà applicata al
controllo sarà quella senza skinid e, se vogliamo che al nostro controllo sia applicata la definizione
identificata da uno skinid, lo dobbiamo specificare nelle Proprietà del controllo, impostando il
relativo SkinID. Se invece vogliamo evitare che un controllo erediti lo skin del tema della pagina,
dobbiamo impostare la sua proprietà EnableTheming a False.

Se vogliamo impostare il tema della pagina dinamicamente, lo dobbiamo fare con un gestore
dell’evento Page_PreInit che viene lanciato prima che tutti i controlli siano caricati ed
inizializzati.

Nel sorgente del progetto fornito con questa lezione è presente un esempio che dimostra le ultime
affermazioni. Per verificarlo lanciare la Default2.aspx.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Applicare un Tema in fase di runtime


 di Angelo Ranucci
 19 Luglio 2006

In questa lezione vedremo come applicare un tema in fase di runtime, per consentire ad esempio ad
un utente, di scegliere il tema che gli piace.

A tale scopo, riprendiamo il progetto realizzato nella precedente lezione. Nella cartella App_Themes
aggiungiamo un nuovo tema chiamiamo “Moderno” e vi aggiungiamo skin per definire l’aspetto dei
controlli presenti nell’ applicazione. Infine in Esplora Soluzioni, saranno visibili i due temi con i
relativi file skin.
Figura 1. I due temi in Esplora Soluzioni

Usiamo la pagina “Default3.aspx” per realizzare gli skin del tema Moderno in modo visuale e poi
copiare il contenuto nei file di interfaccia.

Nella Default.aspx,invece, aggiungiamo una DropDownList, che servirà all’utente per scegliere il
tema, ed accanto ad esso un Button, che servirà a dare l’invio per impostare il tema scelto.

Per collegare la lista dei temi disponibili al controllo di selezione (DropDownList) dobbiamo
scrivere qualche riga di codice nel gestore dell’evento Page_Load. Si tratta di trovare la cartella
App_Themes e le sue sottocartelle per poi inserirle tra gli elementi della DropDownList.

Listato 51. Inserire i temi nella DropDownList

protected void Page_Load(object sender, EventArgs e)


{
if (!Page.IsPostBack)
{
string[] temi = Directory.GetDirectories(Request.PhysicalApplicationPath + “App_Themes”);
DropDownList1.Items.Clear();
foreach(string tema in temi)
DropDownList1.Items.Add(tema.Substring(tema.LastIndexOf(“\”) + 1));
}
}

NOTA: Per gestire i dati delle cartelle dobbiamo ricordare di includere il namespace System.IO
nella pagina di codice.

Una volta selezionato il tema, perché venga applicato dobbiamo implementare il gestore di
Page_PreInit, evento che viene generato prima del rendering dei componenti.

Listato 52. Impostare il tema selezionato prima del rendering

protected void Page_PreInit(object sender, EventArgs e)


{
string tema = Request[“DropDownList1”];
Page.Theme = tema;
if (tema == null)
Page.Theme = “Classico”;
}
Possiamo ora mandare in esecuzione la piccola applicazione creata.

Figura 2. Tema “Classico”

Proviamo a selezionare il tema “Moderno”.

Figura 3. Tema “Moderno”

Ai temi possiamo anche associare dei CSS scegliendo ad esempio Aggiungi nuovo
elemento>Foglio di Stile, dopo aver cliccato con il tasto destro sul tema. Ad esempio creiamo il file
“Button.css” nel tema “Classico” ed impostiamo lo stile per l’elemento <input>.

Listato 53. Aggiungere un foglio di stile al tema

input
{
font-style:italic;
font-family:Verdana;
color:Fuchsia;
}
Se proviamo a fare un test, ci accorgiamo che solo il tema Classico è affetto dal CSS, come è lecito
aspettarsi, e lo stile italic viene preso da entrambi i pulsanti, mentre il colore fucsia solo da uno,
quello con il tema disabilitato, infatti è presente uno skin che definisce il colore e comanda sul CSS.

L’esempio realizzato nel corso di questa lezione può essere scaricato da qui.

Potrebbero piacerti anche