Tutorial ASP.NET 2.0 - Parte seconda: Creazione di temi e menu

Tutorial ASP.NET 2.0 - Parte seconda: Creazione di temi e menu
a cura di Antonio Catucci e Mario De Ghetto (requisiti: nessuno)

Premessa
Nel precedente articolo abbiamo creato un sito web e abbiamo illustrato come l'uso delle master page possa aiutare in maniera significativa lo sviluppo del layout. Abbiamo anche mostrato un esempio con master page nidificate che, nonostante il mancato supporto in Visual Studio, consentono una maggiore organizzazione delle pagine.

In questo articolo vedremo come migliorare l'aspetto grafico della pagina grazie all'utilizzo dei temi e come gestire la navigazione nel sito con i menu e le mappe.

Web.sitemap: la mappa per non perdersi
In ASP.NET 2.0 sono state aggiunte nuove funzionalità che consentono la creazione di menu di navigazione e mappe in maniera semplice ed efficace. Ad esempio è possibile creare la struttura del menu in un file xml chiamato web.sitemap ed usarlo come fonte dati con il nuovo controllo Menu per la visualizzazione.

Vediamo come creare un menu per il sito che abbiamo iniziato a sviluppare nell'articolo precedente. Per creare un menu fate click con il tasto destro del mouse nella finestra Solution Explorer e scegliete "Add New Item...". Dalla finestra di dialogo che apparire, selezionate "Site Map ". Il nome predefinito del file è Web.sitemap, ma può essere modificato a piacere (sempre con estensione ".sitemap"). Confermando con il pulsante "Add" sarà aggiunto un file XML contenente il seguente codice:
<?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>
La struttura del file è gerarchica e la radice (root) è definita dal tag <siteMap>. Ogni voce di menu è rappresentata dal tag <siteMapNode> per il quale è possibile definire i seguenti attributi:

title: nome del menu che verrà visualizzato

url: percorso relativo o assoluto della pagina

description: descrizione opzionale del menu

Il primo livello di tag <siteMapNode> rappresenta le voci di menu principali, cioè quelle visibili solitamente in alto o a sinistra nelle pagine. Ogni annidamento rappresenta un sottomenu.
Quella che segue è la struttura iniziale del nostro menu:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/index.aspx" title="Home Page"  description="" >
    <siteMapNode title="MasterPage annidate"  description="Esempi sull'uso della MasterPage annidate" >
      <siteMapNode url="~/1_MasterPageAnnidate/PaginaCon1ContentPlaceHolder.aspx" 
        title="Pagina con 1 ContentPlaceHolder"  description="Pagina con 1 ContentPlaceHolder" />
      <siteMapNode url="~/1_MasterPageAnnidate/PaginaCon2ContentPlaceHolder.aspx" 
        title="Pagina con 2 ContentPlaceHolder"  description="Pagina con 2 ContentPlaceHolder" />
    </siteMapNode>
    <siteMapNode title="Esempi Parte 2"  description="Esempi Parte 2" >
    </siteMapNode>
  </siteMapNode>
</siteMap>
Chi sarà riuscito a seguirci fin qui avrà capito che le pagine indicate nel menu sono quelle dell'esempio presentato nella prima parte di questo articolo riguardante le master page nidificate.

Torniamo nella progettazione visuale della pagina TutorialMasterPage.master del progetto e inseriamo un componente "Menu" (nel gruppo "Navigation" della casella degli strumenti) all'interno del "ContentPlaceHolder - CPH_Menu".

Colleghiamo il menu al file web.sitemap che abbiamo appena creato con il controllo Menu attivando lo smart tag del Menu e scegliendo la voce "Choose Data Source... > New Data Source...". Nella finestra di dialogo selezioniamo "SiteMap" e specifichiamo l'ID "dsMainMenu" dell'origine dati ("SiteMapDataSource1" è il nome predefinito).
Confermando con "OK", avremo impostato il nostro menu.

SmartTag per la configurazione del menu

Quello appena descritto è il metodo più comune, ma è possibile definire staticamente le voci di menu direttamente nel controllo, come in questo esempio:
      <asp:Menu ID="menu" runat="server">
        <Items>
          <asp:MenuItem Text="MasterPage annidate"
               Tooltip=" Esempi sull'uso della MasterPage annidate">
            <asp:MenuItem Text="Pagina con 1 ContentPlaceHolder"
               NavigateUrl="~/1_MasterPageAnnidate/PaginaCon1ContentPlaceHolder.aspx"
               Tooltip=" Pagina con 1 ContentPlaceHolder" />
            <asp:MenuItem Text="Pagina con 2 ContentPlaceHolder"
               NavigateUrl="~/1_MasterPageAnnidate/PaginaCon2ContentPlaceHolder.aspx"
               Tooltip=" Pagina con 2 ContentPlaceHolder" />
          </asp:MenuItem>
        </Items>
      </asp:Menu>
Naturalmente è possibile personalizzare l'aspetto grafico del menu. Il modo più semplice e veloce consiste nell'applicare uno dei layout disponibili nel controllo stesso, raggiungibile selezionando la voce di menu "Auto Format..." dello SmartTag.
Tuttavia questo metodo raramente sarà utile ai nostri scopi, in quanto il menu dovrebbe avere una grafica allineata con l'intero layout del sito.
Il metodo migliore, dunque, per personalizzare il menu e qualsiasi altro controllo asp.net, consiste nell'utilizzare i temi.

Creazione di un tema
Non preoccupatevi, non si tratta di temi scolastici ma "temi" intesi come stili (in inglese: "themes")!
ASP.NET 2.0 ha introdotto una nuova tecnica per personalizzare l'aspetto grafico delle applicazioni web: i temi. Un tema include stili e attributi grafici che vengono associati ai vari controlli presenti nelle pagine ed è composto da:

uno o più file CSS (fogli di stile);

uno o più skin dei controlli (cioè i file che definiscono il loro aspetto grafico);

le immagini ed altre risorse necessarie.

Tutti questi file devono trovarsi in una sottocartella posta nella cartella speciale App_Themes. Il nome di questa sottocartella definisce il nome del tema.

Escludendo i file css e le immagini, la novità è rappresentata dalla presenza di uno skin.
Si tratta molto semplicemente di un file con estensione .skin contenente le impostazioni dei controlli server usati nel sito.
Dal punto di vista funzionale uno skin è molto simile ad un foglio di stile proprio perché serve esclusivamente per definire lo stile grafico con la sola differenza che si applica ai controlli asp.net anziché ai tag HTML.
Questo non significa che skin e CSS siano due alternative per risolvere lo stesso problema, anzi, andrebbero usati congiuntamente. Infatti, uno skin può definire attributi grafici che non hanno corrispondenza con gli attributi disponibili in un file CSS. Ad esempio, uno skin permette di impostare le immagini da utilizzare in controlli come TreeView, Image e altri oppure in template di controlli che lo prevedono come il GridView. Inoltre, con uno skin si può definire l'aspetto grafico anche di controlli custom.

Ovviamente è possibile avere un numero variabile di file skin e css consentendo un'organizzazione migliore delle informazioni.
Gli skin possono essere di due tipi: generici e denominati. I primi si applicanio per tipologia di controlli, mentre i secondi sono specifici per i controlli a cui si riferiscono:
    <asp:TextBox runat="server" CssClass="InputText" />
    <asp:TextBox runat="server" SkinID="TestoCF" CssClass="InputText" Columns="16" />
Il codice appena mostrato definisce lo skin per una TextBox, dove il primo applica la classe CSS "InputText" a tutti i controlli <asp:TextBox> mentre la seconda è denominata, cioè applicata solo ai controlli TextBox con lo SkinID impostato. Il codice seguente mostra come si applica uno skin denominato:
    <asp:TextBox ID="txtCodFiscale" Runat="server" SkinID="TestoCF" />
Grazie agli skin è possibile definire in un colpo solo l'aspetto grafico di decine di controlli sparsi nelle varie pagine di un sito web.

Spiegato che cosa è un tema, vediamo come realizzarne uno concretamente.

Il tema "Default"
Il tema che creeremo sarà quello predefinito e lo chiameremo "Default". Quindi facciamo click con il tasto destro del mouse sul progetto web e selezioniamo "Add ASP.NET Folder" e la voce "Theme" dal sottomenu relativo. Viene creata una nuova cartella (di nome Theme1) nella cartella speciale App_Themes, che rinominiamo "Default". In questa cartella inseriamo tutti i fle necessari per il tema e cioè i file Default.skin e Default.css che contengono, rispettivamente, gli skin dei vari controlli e le impostazioni grafiche di ciascuno di essi.

Un controllo server che possiamo impostare è quello del menu che abbiamo realizzato nella sezione precedente. Creiamo, dunque, uno skin con nome visto che verrà applicato solo al menu principale:
<asp:Menu SkinID="MainMenu" StaticSubMenuIndent="10px" runat="server">
    <LevelMenuItemStyles>       
       <asp:MenuItemStyle CssClass="menu" />
    </LevelMenuItemStyles>
    <StaticMenuItemStyle CssClass="menuStatic" />
    <StaticHoverStyle CssClass="menuStaticHover" />
    <DynamicHoverStyle CssClass="menuDynamicHover" />
    <DynamicMenuStyle CssClass="menuDynamic" />
</asp:Menu>
Nota: di default l'intellisense non è attivo nei file skin. Per attivarlo, aprite la finestra opzioni dal menu 'Tools'/'Options...'. Aprite la sezione 'Text Editor' e selezionate File Extension. Aggiungete una nuova estensione di nome 'skin' ed editor 'User Control Editor'. In seguito dovete ricordarvi di eliminare l'attributo ID, quando incollate del markup html contenente controlli server.

Come vedete si tratta di una normale definizione di controllo lato server con l'unica differenza che tale definizione si trova in un file .skin mentre nella pagina TutorialMasterPage.master (perché è lì che si trova il menu) basta impostare semplicemente lo SkinID (il nome, appunto):
                <asp:Menu ID="topMenu" runat="server" 
                    DataSourceID="dsMainMenu"
                    SkinID="MainMenu">
                </asp:Menu>
                <asp:SiteMapDataSource ID="dsMainMenu" ShowStartingNode="false" runat="server" />
Prima di proseguire spieghiamo brevemente le proprietà usate per formattare il menu. Si tratta di una serie di classi Style che definiscono le varie sezioni del menu. Trattandosi di un controllo che può fungere sia da menu standard, cioè con tutte le voci sempre visibili, dinamico, cioè con i sottomenu a scomparsa come avviene in Windows, che misto, ci sono sezioni per configurare entrambe le situazioni. Per esempio, tutte le proprietà che iniziano con Static... si riferiscono alle aree statiche ovvero a quelle sempre visibili (per esempio le voci principali) mentre quelle Dynamic alle aree a scomparsa (i sottomenu). La sezione <LevelMenuItemStyles /> si riferisce all'area occupata dall'intero menu.

Oltre al menu, ricordate che c'è anche il DropDownList dei temi? Definiamo anche questo controllo nel file default.skin:
<asp:DropDownList SkinID="Themes" CssClass="themes" runat="server" />
Anche in questo caso, è sufficiente specificare lo SkinID del controllo nella TutorialMasterPage.master (perché deve essere disponibile in tutte le pagine):
               <asp:DropDownList ID="ddlThemes" AutoPostBack="true" SkinID="Themes" runat="server"/>
Avrete notato che il layout vero e proprio viene impostato tramite classi CSS definite nel file default.css. Questo per un motivo puramente organizzativo. Nulla vieta di definire l'aspetto grafico usando direttamente le proprietà del controllo o entrambe le soluzioni.

Potete trovare ed analizzare il file default.css direttamente nell'esempio allegato, dove troverete anche le definizioni della struttura del sito ed un secondo tema chiamato "Professional", così da poter vedere praticamente come cambiare il tema da usare.

Applicare un tema
La presenza di un tema, però, non significa che venga applicato alle pagine del sito. Bisogna, infatti, che il tema venga applicato esplicitamente. Ci sono tre modi diversi per farlo. Si può:

specificarlo in ciascuna pagina, direttamente nella direttiva @Page;

applicarlo a livello di intera applicazione, aggiungendo un attributo theme nel file di configurazione web.config;

applicarlo da codice.

Nel primo caso si tratta semplicemente di inserire un attributo Theme nella direttiva di pagina:
<%@Page Language="VB" Theme="Default" %>
Questa modalità è utile solo se, per esempio, il tema deve essere applicato a un'unica pagina o comunque a pochissime pagine. Infatti, se volessimo cambiare il nome del tema, saremmo costretti a modificare tutte le pagine alle quali il tema è associato. Questa modalità inoltre non permette all'utente di scegliere il tema preferito.

Nel secondo caso è sufficiente aggiungere un attributo nel file web.config, secondo il seguente schema:
<configuration>
  <system.web>
    <pages theme="Default" />
  </system.web>
</configuration>
In questo modo tutte le pagine avranno lo stesso tema e, nel caso in cui volessimo cambiarlo, basterebbe modificare questo valore. Anche in questo caso il tema è preimpostato e non è modificabile direttamente dall'utente.

Nel terzo e ultimo caso, il tema viene associato alla pagina dinamicamente via codice. Questa operazione è possibile soltanto nell'evento PreInit della classe Page, poiché questo è l'evento che viene chiamato appena prima del caricamento dei temi, e consiste nel valorizzare la proprietà Page.Theme con il nome del tema da applicare:
  Private Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
    Dim tema As String = "Default"
    ' Applica il tema passato in QueryString
    If Page.Request("Tema").ToString() Then
      tema = Page.Request("Tema").ToString()
    End If
    Me.Theme = tema
  End Sub
Questo metodo consente l'applicazione al volo di un tema consentendo all'utente di poter applicare il tema che preferisce.
Vediamo come possiamo implementare questa funzionalità nel nostro sito.

Creeremo due nuove classi nella cartella speciale App_Code: Helper.vb e PageBase.vb.
Prima di continuare è bene spiegare brevemente cosa rappresenta la cartella App_Code. Si tratta di una cartella dove vanno inserite tutte le classi utilizzate nell'applicazione e che il runtime asp.net compila al volo rendendole parti dell'aplicazione stessa e quindi utilizzabili in qualsiasi punto.

Iniziamo con la creazione della classe Helper.vb che fungerà da contenitore di funzioni riutilizzabili in tutto il sito. Creiamo un semplice metodo GetThemes() per restituire l'elenco dei temi installati:
    Public NotInheritable Class Helper

        ''' <summary>
        ''' Restituisce l'elenco dei temi installati nel sito.
        ''' </summary>
        Public Shared Function GetThemes() As String()
            Dim Context As HttpContext = HttpContext.Current
            Dim Dirs As String() = Directory.GetDirectories(Context.Server.MapPath("~/App_Themes"))
            For i As Integer = 0 To Dirs.Length - 1
                Dirs(i) = Path.GetFileName(Dirs(i))
            Next

            Return Dirs
        End Function
    End Class
La classe PageBase.vb, invece, è leggermente più complessa. Estende la classe astratta System.Web.UI.Page per implementare il meccanismo di impostazione automatica del tema scelto dall'utente nell'evento PreInit:
  Public Class PageBase
    Inherits System.Web.UI.Page

    Protected Overrides Sub OnPreInit(ByVal e As System.EventArgs)
      'Me.Theme = GetTheme()
      MyBase.OnPreInit(e)
    End Sub
  End Class
Il metodo GetCurrentTheme restituisce il tema che l'utente sceglie tramite una DropDownList e ne salva il valore in sessione.
    Protected Function GetCurrentTheme() As String
      ' Recupera il controllo che ha provocato il postback
      Dim ctrlThemesId As String = Request("__EVENTTARGET")

      If Not String.IsNullOrEmpty(ctrlThemesId) Then
        ' Se il postback è stato fatto dal combo dei temi, salva il tema selezionato
        If ctrlThemesId.IndexOf("ddlThemes") <> -1 Then
          Session("CurrentTheme") = Request.Form(ctrlThemesId)
        End If
      End If

      ' Imposta il tema
      If Session("CurrentTheme") Is Nothing Then
        Return "Default"
      Else
        Return Session("CurrentTheme").ToString
      End If
    End Function
La tecnica utilizzata in questa funzione prevede l'interrogazione del campo nascosto __EVENTTARGET che viene utilizzato da asp.net per sapere quale controllo ha generato il postback. Il motivo sta nel fatto che l'esecuzione dell'evento PreInit della pagina avviene prima dell'evento Load della MasterPage, rendendo impossibile l'uso dell'evento SelectedIndexChanging del controllo DropDownList situato nella TutorialMasterPage.master. L'unico modo, dunque, per sapere quale controllo ha generato il postback, è interrogare il campo nascosto __EVENTTARGET.

Ora che abbiamo definito il comportamento della pagina base, tutte le pagine del nostro sito dovranno ereditare da quest'ultima, affinché venga applicato automaticamente il tema corrente.
Pertanto modifichiamo il file index.aspx.vb:
Partial Class index
    Inherits PageBase
L'ultima cosa da fare è modificare la master page, affinché venga caricata la DropDownList con i temi e si possa selezionare la voce del tema corrente:
Partial Class TutorialMasterPage
  Inherits MasterPage

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
      ddlThemes.DataSource = Helper.GetThemes
      ddlThemes.DataBind()
      If Session("CurrentTheme") IsNot Nothing Then
        ddlThemes.SelectedIndex = ddlThemes.Items.IndexOf(ddlThemes.Items.FindByValue(Me.Page.Theme))
      End If
    End If
  End Sub

End Class
Prima di concludere l’argomento sui temi ecco alcuni dettagli che è bene conoscere:

a parità di impostazioni, il tema sovrascrive sempre le impostazioni grafiche definite direttamente nel controllo.
Un comportamento diverso si ha utilizzando la proprietà StyleSheetTheme, anziché Theme. Quest'ultima si comporta esattamente come i css, ovvero le impostazioni locali sovrascrivono quelle definite nello StyleSheetTheme. Insomma, l'ordine di applicazione del tema è il seguente:

StyleSheetTheme

Definizione locale del controllo

Theme

Per impostare da codice la proprietà StyleSheetTheme occorre farne l'override, altrimenti otterremo un'eccezione (la proprietà si può impostare solo nell'evento Init);

un tema si applica solo ai controlli marcati con l'attributo <Themeable()>: un controllo custom che vuole supportare i temi deve avere questo attributo;

è possibile disabilitare un tema sia a livello di Page sia a livello di singolo controllo, impostando la proprietà EnableTheming a False.

Ecco la pagina TutorialMasterPage aggiornata con l’aggiunta del DropDownList dei temi e del menu:
<%@ Master Language="VB" CodeFile="TutorialMasterPage.master.vb" Inherits="TutorialMasterPage"%>
<!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>Visual Basic Trips&Trick - ASP.NET 2.0 Tutorial</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <div id="header">
         <div id="logoVBTT">
      </div>
    </div>
    <div>
      <div id="navigation">
        <div id="navigationMenu">
          <div style="float:left; width:80%;">
            <asp:contentplaceholder id="CPH_Menu" runat="server">
              <asp:Menu ID="topMenu" runat="server" 
                DataSourceID="dsMainMenu"
                SkinID="MainMenu">
              </asp:Menu>
              <asp:SiteMapDataSource ID="dsMainMenu" ShowStartingNode="false" runat="server" />
            </asp:contentplaceholder>
          </div>
        </div>
        <div id="content">
          <asp:contentplaceholder id="CPH_Centrale" runat="server" />
        </div>
      </div>
      <div id="footer">
        <hr style="width:96%; border:1px solid #d3d3d3;" />
        2007 - <a href="http://www.visual-basic.it" target="_blank">Visual Basic Tips&Tricks</a>
      </div>
    </div>
  </form>
</body>
</html>
Vi siete persi? Voi siete <qui>
Una utile funzionalità che molti siti mettono a disposizione è l'indicazione della posizione corrente dell'utente nel sito. Per chiarire meglio, è un po' come le bricioline di pane che nella favola vengono lasciate cadere a terra per ritrovare la strada di casa.
Per realizzare questa utile funzionalità, ASP:NET 2.0 ha introdotto un nuovo controllo chiamato SiteMapPath che, in presenza della mappa del sito nel file .sitemap, visualizza automaticamente la posizione attuale, nella gerarchia delle pagine, senza necessità di alcuna configurazione (motivo per cui è bene usare un file .sitemap per definire la mappa del sito).
Aggiungiamo questa caratteristica al nostro sito, inserendo nella master page, immediatamente sotto il menu:
            <div style="clear:both; padding:5px 10px; font-size:10px;">
                Sei qui: <asp:SiteMapPath ID="siteMap" runat="server" />
            </div>
Naturalmente, definiamo anche uno stile grafico aggiungendo uno skin generico nel file default.skin:
<asp:SiteMapPath runat="server" CssClass="MapPath">
    <CurrentNodeStyle CssClass="MapCurrentNode" />
</asp:SiteMapPath>
Nel codice a corredo trovate anche il corrispondente per il tema "Professional".

A questo punto non ci resta che vedere la master page TutorialMasterPage completa di tutte le modifiche discusse fino ad ora:
<%@ Master Language="VB" CodeFile="TutorialMasterPage.master.vb" Inherits="TutorialMasterPage"%>
<!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>Visual Basic Trips&Trick - ASP.NET 2.0 Tutorial</title>
</head>
<body>
  <form id="form1" runat="server">
  <asp:TextBox ID="txtCodFiscale" Runat="server" SkinID="TestoCF" />
  <div>
    <div id="header">
      <div id="logoVBTT"></div>
    </div>
    <div>
    <div id="navigation">
      <div id="navigationMenu">
      <div style="float:left; width:80%;">
      <asp:contentplaceholder id="CPH_Menu" runat="server">
        <asp:Menu ID="topMenu" runat="server" 
          DataSourceID="dsMainMenu"
          SkinID="MainMenu">
        </asp:Menu>
        <asp:SiteMapDataSource ID="dsMainMenu" ShowStartingNode="false" runat="server" />
      </asp:contentplaceholder>
      </div>
      <div style="text-align:right;padding-top:2px;">
        <asp:DropDownList ID="ddlThemes" AutoPostBack="true" SkinID="Themes" runat="server"/>
      </div>   
      </div>
      <div style="clear:both; padding:5px 10px; font-size:10px;">
          Sei qui: <asp:SiteMapPath ID="siteMap" runat="server" />
      </div>
    </div>
    <div id="content">
      <asp:contentplaceholder id="CPH_Centrale" runat="server" />
    </div>
    </div>
    <div id="footer">
      <hr style="width:96%; border:1px solid #d3d3d3;" />
      2007 - <a href="http://www.visual-basic.it" target="_blank">Visual Basic Tips&Tricks</a>
    </div>
  </div>
  </form>
</body>
</html>
Menu Custom
Concludiamo questo articolo mostrando come sia possibile realizzare un menu custom sfruttando il data source SiteMapDataSource. Quello che vogliamo ottenere è una sorta di indice nella home page (Index.aspx) elencando, per ciascuna voce principale, l'intero sottomenu di secondo livello.

Nel file Index.aspx aggiungiamo il componente SiteMapDataSource che usa il web.sitemap come sorgente dati, un controllo DataList e un Repeater:
<%@ Page Language="VB" AutoEventWireup="false" 
    MasterPageFile="~/TutorialMasterPage.master" 
    CodeFile="~/index.aspx.vb" Inherits="Index" title="Home Page" %>
<asp:Content ID="CPH_Centrale" ContentPlaceHolderID="CPH_Centrale" runat="Server">
    <asp:SiteMapDataSource id="siteMenu" ShowStartingNode="false" runat="server" />
    <div style="clear:both; text-align:center;">
    <asp:DataList ID="dlMenu" DataSourceID="siteMenu" SkinID="HomeMenu" runat="server">
        <ItemTemplate>
            <div id="MenuBox">
            <div id="MenuTitle"><% #Eval("Title") %></div>
            <div id="MenuDescription"> <% #Eval("Description") %>
            </div>
            <asp:Repeater ID="repItems" runat="server" DataSource='<% #Eval("ChildNodes") %>'>
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <a href='<% #Eval("Url") %>' title='<% #Eval("Description") %>'>
                      <% #Eval("Title") %>
                    </a>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
            </asp:Repeater>
            </div>
        </ItemTemplate>
    </asp:DataList>
    </div>
</asp:Content>
Il DataList elenca le voci di primo livello del menu, mentre il Repeater quelle di secondo livello per ciascuna voce di primo livello (vengono esclusi ulteriori nidificazioni).
A parte i vari tag HTML di formattazione della lista di link, ci sono due aspetti interessanti da sottolineare:

la funzione Eval() è una espressione di binding che permette di leggere il valore del campo specificato dal record corrente rappresentato, in questo caso, da un oggetto SiteMapNode. Si tratta di una funzione che useremo spesso negli articoli successivi;

la data source del Repeater è dato dalla proprietà ChildNodes() dell'oggetto SiteMapNode e contiene le voci del relativo sottomenu

Anche in questo caso utilizziamo uno skin per formattare il controllo, quindi lo implementiamo nel default.skin:
<asp:DataList SkinID="HomeMenu" CssClass="HomeMenu" runat="server"
     RepeatDirection="Horizontal" RepeatColumns="2" CellSpacing="5">
    <ItemStyle CssClass="HomeMenuItem" />     
</asp:DataList>
A questo punto, eseguendo il sito web con F5 avremo questo riultato:

Scegliendo il tema Professional, il risultato sarà il seguente:

Conclusioni
Come vedete, modificare ed applicare un nuovo tema diventa relativamente semplice, perché occorre solo realizzare i nuovi skin e creare una nuova cartella in App_Theme per averli disponibili automaticamente nel sito.

Nei successivi articoli ci occuperemo di un argomento molto importante nelle applicazioni web: l'accesso ai dati.
Tutto il codice relativo a questo esempio è scaricabile dall'area download.
In merito a questo articolo, potete scrivere agli autori Antonio Catucci e Mario De Ghetto.