Esercitazione 3: Pagine master e navigazione all'interno del sito

Scott Mitchell

Giugno 2006

Scaricare il codice di esempio ASPNET_Data_Tutorial_3_CS.exe.

Contenuto dell'Esercitazione 3 (Visual C#)

Introduzione
Punto 1: Creazione della pagina master
Punto 2: Aggiunta di una home page al sito Web
Punto 2: Creazione di una mappa del sito
Punto 3: Visualizzazione di un menu basato sulla mappa del sito
Punto 4: Aggiunta della navigazione breadcrumb
Punto 5: Aggiunta della pagina predefinita per ogni sezione
Sommario

Introduzione

Una caratteristica comune dei siti Web di facile utilizzo consiste nel fatto di disporre nell'intero sito di un layout delle pagine coerente e di uno schema di navigazione. ASP.NET 2.0 introduce due nuove funzioni che semplificano notevolmente l'implementazione sia del layout delle pagine nell'intero sito che dello schema di navigazione: pagine master e navigazione all'interno del sito. Le pagine master consentono agli sviluppatori di creare un modello per l'intero sito con aree modificabili indicate. Tale modello può quindi essere applicato alle pagine ASP.NET nel sito. Le pagine ASP.NET devono soltanto fornire i contenuti per le aree modificabili specificate nella pagina master; tutti gli altri tag nella pagina master sono identici per tutte le pagine ASP.NET che utilizzano la pagina master. Il modello consente agli sviluppatori di definire e centralizzare un layout delle pagine per l'intero sito, ottenendo in modo semplice un aspetto e uno stile uniformi in tutte le pagine, che possono essere facilmente aggiornate.

Il sistema di navigazione all'interno del sito fornisce sia un meccanismo che consente agli sviluppatori di pagine di definire la mappa di un sito, sia una API per tale mappa che è possibile richiedere a livello di programmazione. I nuovi controlli di navigazione Web (Menu, TreeView e SiteMapPath) semplificano il rendering di tutta o parte della mappa del sito in un comune elemento di interfaccia utente di navigazione. Verrà usato il provider predefinito di navigazione all'interno del sito, che consente alla mappa di essere definita in un file formato XML.

Per illustrare tali concetti e rendere più semplice l'utilizzo del sito Web di esercitazioni, segue una lezione su come definire il layout delle pagine nell'intero sito, implementare una mappa del sito e aggiungere l'interfaccia utente per la navigazione. L'esercitazione consentirà di ottenere una progettazione elegante del sito Web per creare le pagine Web di esercitazione.

Figura 1. Risultato finale di questa esercitazione

Punto 1: Creazione della pagina master

Il primo passaggio consiste nel creare la pagina master per il sito. Al momento il sito Web contiene soltanto il dataset tipizzato (Northwind.xsd, nella cartella App_Code), le classi BLL (ProductsBLL.cs, CategoriesBLL.cs e così via, tutte nella cartella App_Code), il database (NORTHWND.MDF, nella cartella App_Data), il file di configurazione (Web.config) e il file di foglio di stile CSS (Styles.css). Le pagine e i file che dimostrano l'uso di DAL e BLL sono stati ripuliti dalle prime due esercitazioni, in quanto tali esempi verranno riesaminati più dettagliatamente in esercitazioni future.

Figura 2. I file del progetto in esame

Per creare una pagina master, fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e scegliere Aggiungi nuovo elemento. Quindi, selezionare la pagina master nell'elenco dei modelli e assegnarle il nome Site.master.

Figura 3. Aggiunta di una nuova pagina master al sito Web

Definire il layout delle pagine per l'intero sito nella pagina master. È possibile utilizzare la visualizzazione Progettazione e aggiungere i controlli Web o Layout desiderati oppure è possibile aggiungere manualmente i tag nella visualizzazione Origine. Nella pagina master vengono usati i fogli di stile CSS per il posizionamento e gli stili con le impostazioni CSS definite nel file esterno Style.css. Sebbene non sia evidente dai tag riportati di seguito, le regole CSS sono definite in modo tale che il contenuto dei <div> di navigazione sia sempre posizionato in modo da apparire a sinistra e abbia una larghezza fissa di 200 pixel.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!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>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">
        
            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">TODO: Breadcrumb will go here...</span>
            </div>
        
            <div id="content">
                <asp:contentplaceholder id="MainContent" runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>
            
            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Una pagina master definisce sia il layout delle pagine statico sia le aree che possono essere modificate tramite le pagine ASP.NET usate dalla pagina master stessa. Le aree con contenuto modificabile sono indicate dal controllo ContentPlaceHolder, visualizzato nel contenuto <div>. Questa pagina master contiene un solo ContentPlaceHolder (MainContent), ma le pagine master possono contenere diversi ContentPlaceHolder.

Con i tag inseriti precedentemente, passando alla visualizzazione Progettazione viene visualizzato il layout della pagina master. Tutte le pagine ASP.NET che usano questa pagina master presenteranno lo stesso layout uniforme, con la possibilità di specificare i tag per l'area MainContent.

Figura 4. Pagina master visualizzata mediante la visualizzazione Progettazione

Punto 2: Aggiunta di una home page al sito Web

Definita la pagina master, è possibile aggiungere le pagine ASP.NET per il sito Web. Per iniziare, aggiungere Default.aspx, la home page del sito Web. Fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e scegliere Aggiungi nuovo elemento. Scegliere l'opzione Web Form nell'elenco dei modelli e nominare il file Default.aspx. Inoltre, selezionare la casella di controllo "Seleziona pagina master".

Figura 5. Aggiungere un nuovo Web Form, selezionando la casella di controllo "Seleziona pagina master"

Dopo aver fatto clic sul pulsante OK, viene richiesto di scegliere quale pagina master deve essere usata dalla nuova pagina ASP.NET. Il progetto può contenere diverse pagine master, ma in questo esempio ne è presente solo una.

Figura 6. Scegliere la pagina master che verrà utilizzata da questa pagina ASP.NET

Dopo aver selezionato la pagina master, le nuove pagine ASP.NET conterranno i seguenti tag:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

La direttiva @Page contiene un riferimento al file della pagina master usato (MasterPageFile="~/Site.master") e il tag della pagina ASP.NET contiene un controllo Content per ciascuno dei controlli ContentPlaceHolder definiti nella pagina master, con il ContentPlaceHolderID del controllo per il mapping del controllo Content su uno specifico ContentPlaceHolder. Il controllo Content corrisponde alla posizione del tag che si desidera visualizzare nel corrispondente ContentPlaceHolder. Impostare l'attributo Title della direttiva @Page su Home e aggiungere messaggi di benvenuto al controllo Content:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that illustrate some of the new data access 
    and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that demonstrate:</p>
    
    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

L'attributo Title nella direttiva @Page consente di impostare il titolo della pagina dalla pagina ASP.NET, anche se l'elemento <title> viene definito nella pagina master. È anche possibile impostare il titolo a livello di programmazione, utilizzando Page.Title. Inoltre, occorre notare che i riferimenti della pagina master ai fogli di stile (come Style.css) vengono automaticamente aggiornati in modo da poter essere utilizzati in ogni pagina ASP.NET, indipendentemente dalla directory che correla la pagina ASP.NET alla pagina master.

Passando alla visualizzazione Progettazione è possibile vedere come apparirà la pagina in un browser. Notare che nella visualizzazione Progettazione per la pagina ASP.NET è possibile modificare solo le aree di contenuti modificabili: i tag diversi dal tipo ContentPlaceHolder nella pagina master non sono disponibili per la selezione.

Figura 7. La visualizzazione Progettazione per la pagina ASP.NET indica sia le aree modificabili che quelle non modificabili

Quando si accede alla pagina Default.aspx tramite un browser, il motore ASP.NET unisce automaticamente il contenuto della pagina master e il contenuto di ASP.NET nella pagina e genera l'HTML finale del contenuto unito per inviarlo al browser richiedente. Una volta aggiornato il contenuto di una pagina master, tutto il contenuto delle pagine ASP.NET che utilizzano tale pagina master verrà unito nuovamente con il contenuto della nuova pagina master quando verrà effettuata la successiva richiesta. In breve, il modello della pagina master consente di definire un singolo modello di layout di pagina (la pagina master) le cui modifiche si rispecchiano immediatamente nell'intero sito.

Aggiunta di ulteriori pagine ASP.NET al sito Web

Di seguito viene descritto come aggiungere al sito ulteriori pagine ASP.NET che conterranno infine le varie dimostrazioni dei rapporti. In totale, saranno disponibili oltre 35 dimostrazioni; pertanto, anziché creare tutte le pagine, è opportuno creare solo le prime. Poiché sono disponibili anche diverse categorie di dimostrazioni, per poterle gestire tutte al meglio, aggiungere una cartella per le categorie. Per il momento, aggiungere le seguenti tre cartelle:

  • BasicReporting
  • Filtering
  • CustomFormatting

Infine, aggiungere nuovi file come indicato in Esplora soluzioni nella Figura 8. Per ogni file che viene aggiunto, ricordarsi di selezionare la casella di controllo "Seleziona pagina master".

Figura 8. Aggiungere i seguenti file

Punto 2: Creazione di una mappa del sito

Uno dei problemi relativi alla gestione di un sito Web composto da diverse pagine consiste nel fornire ai visitatori un modo semplice e diretto per spostarsi all'interno del sito. Per iniziare, è necessario definire la struttura di navigazione del sito. Successivamente, tale struttura deve essere tradotta in interfaccia utente per lo navigazione, come i menu o i breadcrumb. Infine, l'intera procedura deve essere gestita e aggiornata ogni volta che vengono aggiunte nuove pagine al sito e rimosse quelle esistenti. Prima del rilascio di ASP.NET 2.0, gli sviluppatori dovevano creare per proprio conto la struttura di navigazione del sito, occupandosi della gestione e della traduzione in appositi strumenti di interfaccia utente. Con ASP.NET 2.0, gli sviluppatori possono utilizzare il sistema di navigazione integrato dotato di funzioni molto flessibili.

Il sistema di navigazione di ASP.NET 2.0 offre agli sviluppatori i mezzi per definire la mappa del sito e di accedere in seguito alle relative informazioni tramite una API a livello di programmazione. In ASP.NET è compreso un provider di mappa del sito che prevede la memorizzazione dei dati relativi alla mappa in un file XML formattato in modo particolare. Tuttavia, poiché il sistema di navigazione nel sito è basato sul modello di provider, è possibile estenderlo per supportare modi alternativi di serializzazione delle informazioni della mappa del sito. L'articolo di Jeff Prosise, The SQL Site Map Provider You've Been Waiting For, spiega come creare un provider di mappa del sito che memorizzi la mappa in un database SQL Server; un'altra opzione consiste nel creare un provider di mappa del sito basato sulla struttura del file system.

In questa esercitazione, tuttavia, viene utilizzato il provider di mappa del sito predefinito fornito con ASP.NET 2.0. Per creare una mappa del sito, basta fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni, scegliere Aggiungi nuovo elemento e quindi l'opzione Mappa del sito. Lasciare il nome Web.sitemap e fare clic sul pulsante Aggiungi.

Figura 9. Aggiungere una mappa del sito al progetto

Il file relativo alla mappa del sito è in formato XML. Tenere presente che Visual Studio offre IntelliSense per la struttura della mappa del sito. Il nodo radice del file della mappa del sito deve essere <siteMap> e deve contenere esattamente un elemento figlio <siteMapNode>. Il primo elemento <siteMapNode> può quindi contenere un numero arbitrario di elementi <siteMapNode> discendenti.

Definire la mappa del sito per riprodurre la struttura del file system. Vale a dire, aggiungere un elemento <siteMapNode> per ognuna delle tre cartelle ed elementi figlio <siteMapNode> per ogni pagina ASP.NET in tali cartelle, come indicato di seguito:

Web.sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting" url="~/BasicReporting/Default.aspx" 
      description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx" title="Simple Display" 
        description="Displays the complete contents of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx" title="Declarative Parameters"  
        description="Displays a subset of the contents of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx" title="Setting Parameter Values" 
        description="Shows how to set parameter values programmatically." />
      </siteMapNode>
        
      <siteMapNode title="Filtering Reports" url="~/Filtering/Default.aspx" 
      description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx" title="Filter by Drop-Down List" 
        description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx" title="Master-Details-Details" 
        description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx" title="Details of Selected Row" 
        description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting" url="~/CustomFormatting/Default.aspx" 
      description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx" title="Format Colors" 
        description="Format the grid&apos;s colors based on the underlying data." />
        <siteMapNode url="~/CustomFormatting/GridViewTemplateField.aspx" 
        title="Custom Content in a GridView" 
        description="Shows using the TemplateField to customize the contents of a field in a GridView." />
        <siteMapNode url="~/CustomFormatting/DetailsViewTemplateField.aspx" 
        title="Custom Content in a DetailsView"  
        description="Shows using the TemplateField to customize the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx" 
        title="Custom Content in a FormView"  
        description="Illustrates using a FormView for a highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx" 
        title="Summary Data in Footer" description="Display summary data in the grid's footer." />        
      </siteMapNode>

  </siteMapNode>

</siteMap>

La mappa del sito definisce la struttura di navigazione del sito Web, sotto forma di una gerarchia che descrive le varie sezioni del sito. Ogni elemento <siteMapNode> in Web.sitemap rappresenta una sezione nella struttura di navigazione del sito.

Fare clic qui per ingrandire l'immagine

Figura 10. La mappa del sito rappresenta una struttura di navigazione gerarchica (fare clic per ingrandire l'immagine)

ASP.NET espone la struttura della mappa del sito tramite SiteMap class!href(http://msdn2.microsoft.com/en-us/library/system.web.sitemap.aspx) di NET Framework. Questa classe dispone di una proprietà CurrentNode, che restituisce informazioni sulla sezione visitata al momento dall'utente; la proprietà RootNode restituisce la radice della mappa del sito (Home, in questo esempio). Sia la proprietà CurrentNode che la proprietà RootNode restituiscono istanze SiteMapNode!href(http://msdn2.microsoft.com/en-us/library/system.web.sitemapnode.aspx), le quali dispongono di proprietà come ParentNode, ChildNodes, NextSibling, PreviousSibling e così via, che consentono di seguire la gerarchia della mappa del sito.

Punto 3: Visualizzazione di un menu basato sulla mappa del sito

L'accesso ai dati in ASP.NET 2.0 può essere effettuato a livello di programmazione, come in ASP.NET 1.x, oppure in modo dichiarativo, tramite i nuovi controlli origine dati. Sono disponibili diversi controlli origine dati integrati, come il controllo SqlDataSource, per accedere ai dati del database relazionale, il controllo ObjectDataSource, per accedere ai dati dalle classi, e altri controlli. Inoltre, è possibile creare controlli origine dati personalizzati.

I controlli origine dati agiscono da proxy tra la propria pagina ASP.NET e i dati sottostanti. Per visualizzare i dati restituiti da un controllo origine dati, solitamente si aggiunge un altro controllo Web alla pagina per associarlo al controllo origine dati. Per associare un controllo Web a un controllo origine dati, basta impostare la proprietà DataSourceID del controllo Web sul valore della proprietà ID del controllo origine dati.

Per agevolare l'uso dei dati della mappa del sito, ASP.NET include il controllo SiteMapDataSource che consente di associare un controllo Web alla mappa del sito Web in questione. Per fornire un'interfaccia utente di navigazione, vengono di solito usati due controlli Web (TreeView e Menu). Per associare i dati della mappa del sito a uno di questi due controlli, basta aggiungere un controllo SiteMapDataSource alla pagina insieme a un controllo TreeView o Menu la cui proprietà DataSourceID sia impostata in modo adeguato. Ad esempio, è possibile aggiungere un controllo Menu alla pagina master utilizzando i seguenti tag:

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
    </asp:Menu>
    
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Per un miglior grado di controllo dell'HTML emesso, è possibile associare il controllo SiteMapDataSource al controllo Repeater, come indicato di seguito:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home
        </asp:HyperLink></li>
        
        <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %>
                    </asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>

Il controllo SiteMapDataSource restituisce la gerarchia della mappa del sito livello per livello, iniziando con il nodo radice della mappa del sito (Home, in questo esempio), passando quindi al livello successivo (Basic Reporting, Filtering Reports e Customized Formatting) e così via. Quando si associa SiteMapDataSource a un controllo Repeater, viene enumerato il primo livello restituito e vengono create istanze di ItemTemplate per ogni istanza SiteMapNode presente in tale primo livello. Per accedere a una particolare proprietà di SiteMapNode, è possibile usare Eval(propertyName), in modo da ottenere le proprietà Url e Title di ogni SiteMapNode per il controllo HyperLink.

Con l'esempio di Repeater descritto sopra viene eseguito il rendering dei seguenti tag:

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
</li>

Questi nodi della mappa del sito (Basic Reporting, Filtering Reports e Customized Formatting) formano il secondo livello della mappa di cui viene eseguito il rendering e non il primo. Ciò dipende dal fatto che la proprietà ShowStartingNode del controllo SiteMapDataSource è impostata su False, facendo ignorare a SiteMapDataSource il nodo radice della mappa del sito iniziando invece la restituzione del secondo livello nella gerarchia della mappa del sito.

Per visualizzare gli elementi figlio dei SiteMapNode di Basic Reporting, Filtering Reports e Customized Formatting, è possibile aggiungere un altro controllo Repeater all'ItemTemplate iniziale di Repeater. Il secondo Repeater verrà associato alla proprietà ChildNodes dell'istanza SiteMapNode, come indicato di seguito:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'>
            <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                
                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'>
                        <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>
                
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

I due controlli Repeater producono i seguenti tag (alcuni tag sono stati rimossi per abbreviare l'esempio):

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">Customized Formatting</a>
    ...
</li>

Utilizzando gli stili CSS scelti dal libro di Rachel Andrew The CSS Anthology: 101 Essential Tips, Tricks, and Hacks, lo stile applicato agli elementi <ul> e <li> fa in modo che i tag producano il seguente output di visualizzazione:

Figura 11. Menu formato mediante due controlli Repeater e alcuni CSS

Questo menu si trova nella pagina master ed è associato alla mappa del sito definita in Web.sitemap. Ciò significa che qualsiasi modifica alla mappa del sito si riflette immediatamente su tutte le pagine che utilizzano la pagina master Site.master.

Disattivazione di ViewState

Tutti i controlli ASP.NET possono mantenere il proprio stato nello stato di visualizzazione, serializzato come campo del form nascosto nell'HTML generato. Lo stato di visualizzazione viene usato dai controlli per ricordare il proprio stato modificato a livello di programmazione tramite i postback, come i dati associati a un controllo Web. Nonostante lo stato di visualizzazione consenta di ricordare le informazioni attraverso i postback, esso aumenta le dimensioni dei tag da inviare al client e può comportare un eccessivo contenuto delle pagine se non monitorato attentamente. I controlli Web dei dati, in particolare GridView, sono noti per aggiungere decine di kilobyte extra di tag alle pagine. Tale incremento può essere irrilevante per gli utenti che dispongono di una connessione a banda larga o intranet, ma lo stato di visualizzazione può richiedere tempi maggiori nelle sequenze di andata e ritorno agli utenti che utilizzano una connessione remota.

Per vedere l'effetto dello stato di visualizzazione, visitare una pagina in un browser e visualizzare l'origine inviata dalla pagina Web (in Internet Explorer, aprire il menu Visualizza e scegliere l'opzione Origine). È possibile anche attivare la traccia della pagina per vedere l'allocazione dello stato di visualizzazione usato da ogni controllo nella pagina. Le informazioni dello stato di visualizzazione sono serializzate in un campo del form nascosto e denominato __VIEWSTATE, situato in un elemento <div> immediatamente dopo il tag <form> di apertura. Lo stato di visualizzazione viene mantenuto solo quando si sta utilizzando un Web Form; se la pagina ASP.NET non include nella sintassi dichiarativa un <form runat="server">, nel rendering dei tag non sarà presente un campo del form nascosto __VIEWSTATE.

Il form VIEWSTATE generato dalla pagina master aggiunge circa 1.800 byte ai tag generati nella pagina. Questo eccesso è dovuto principalmente al controllo Repeater, in quanto i contenuti del controllo SiteMapDataSource vengono mantenuti nello stato di visualizzazione. Anche se 1.800 byte extra potrebbero non sembrare troppi, quando si usa un controllo GridView con molti campi e record, lo stato di visualizzazione può facilmente aumentare di oltre 10 volte.

È possibile disattivare lo stato di visualizzazione a livello di pagina o controllo impostando la proprietà EnableViewState su false e ridurre, in tal modo, le dimensioni dei tag generati. Poiché lo stato di visualizzazione dei controlli Web dei dati mantiene i dati associati ai controlli stessi tramite postback, disattivando lo stato di visualizzazione di un controllo Web i dati devono essere associati su ciascun postback. In ASP.NET versione 1.x la responsabilità di questa operazione ricade sullo sviluppatore; con ASP.NET 2.0, invece, i controlli Web dei dati vengono associati nuovamente al proprio controllo origine dati su ogni postback se necessario.

Per ridurre lo stato di visualizzazione della pagina, occorre impostare la proprietà EnableViewState del controllo Repeater su false. Questa operazione può essere eseguita tramite la finestra Proprietà in Progettazione o in modo dichiarativo nella visualizzazione Origine. Dopo aver apportato questa modifica, il tag dichiarativo del controllo Repeater dovrebbe apparire come indicato di seguito:


<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1" EnableViewState="False">
    <ItemTemplate>
        ... ItemTemplate contents omitted for brevity ...
    </ItemTemplate>
</asp:Repeater>


Dopo la modifica, le dimensioni dello stato di visualizzazione della pagina che viene generato si riducono a 52 byte, un risparmio del 97%! In questa serie di esercitazioni, lo stato di visualizzazione dei controlli Web dei dati verrà disattivato per impostazione predefinita, in modo da ridurre le dimensioni dei tag generati. Nella maggior parte degli esempi la proprietà EnableViewState verrà impostata su false, senza alcuna indicazione. Lo stato di visualizzazione verrà menzionato solo negli scenari in cui è necessario attivarlo per consentire ai controlli Web dei dati di fornire le funzionalità previste.

Punto 4: Aggiunta della navigazione breadcrumb

Per completare la pagina master, occorre aggiungere un elemento interfaccia utente di navigazione breadcrumb a ogni pagina. Il breadcrumb indica rapidamente agli utenti la posizione corrente nella gerarchia del sito. Aggiungere un breadcrumb in ASP.NET 2.0 è semplice: basta aggiungere un controllo SiteMapPath alla pagina, senza alcun codice.

Nel sito di esempio, aggiungere il controllo seguente al <div> dell'intestazione:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

Il breadcrumb indica la pagina che l'utente sta visitando nella gerarchia della mappa del sito nonché la "genealogia" del nodo della mappa stessa, fino alla radice (Home, in questo esempio).

Figura 12. Il breadcrumb visualizza la pagina corrente e la relativa genealogia nella gerarchia della mappa del sito

Punto 5: Aggiunta della pagina predefinita per ogni sezione

Le esercitazioni nel sito di esempio sono suddivise in diverse categorie (Basic Reporting, Filtering, Custom Formatting e così via) con una cartella per ogni categoria e le corrispondenti esercitazioni come pagine ASP.NET all'interno della cartella. Inoltre, ogni cartella contiene una pagina Default.aspx. In questa pagina predefinita, vengono visualizzate tutte le esercitazioni per la sezione corrente. Vale a dire, per Default.aspx nella cartella BasicReporting sono disponibili collegamenti a SimpleDisplay.aspx, DeclarativeParams.aspx e ProgrammaticParams.aspx. Di nuovo, è possibile utilizzare la classe SiteMap e un controllo Web dei dati per visualizzare le informazioni basate sulla mappa del sito definita in Web.sitemap.

Di seguito viene visualizzato un esempio di elenco non ordinato utilizzando un controllo Repeater, ma questa volta sono visualizzati il titolo e la descrizione delle esercitazioni. Poiché i tag e i codici, per ottenere questo risultato devono essere ripetuti in ogni pagina Default.aspx, è possibile incapsulare questa logica di interfaccia utente in un Controllo utente. Creare una cartella nel sito Web denominata UserControls e aggiungervi un nuovo elemento di tipo controllo utente Web denominato SectionLevelTutorialListing.ascx, quindi aggiungere i seguenti tag:

Figura 13. Aggiunta di un nuovo controllo utente Web alla cartella UserControls

SectionLevelTutorialListing.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SectionLevelTutorialListing.ascx.cs" 
Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Title") %>'>
        </asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null, 
        // bind CurrentNode's ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

Nel precedente esempio con il controllo Repeater i dati SiteMap sono stati associati a Repeater in modo dichiarativo; per il controllo utente SectionLevelTutorialListing, invece, l'operazione viene eseguita a livello di programmazione. Nel gestore eventi Page_Load, viene effettuata una verifica per accertarsi che questa sia la prima visita alla pagina (non un postback) e che l'URL di questa pagina venga associato a un nodo della mappa del sito. Se questo controllo utente viene usato in una pagina che non dispone di una voce <siteMapNode> corrispondente, SiteMap.CurrentNode restituirà null e nessun dato verrà associato al controllo Repeater. Supponendo che si disponga di un CurrentNode, il relativo insieme ChildNodes viene associato a Repeater. Poiché la mappa del sito è configurata in modo che la pagina Default.aspx in ogni sezione sia il nodo padre di tutte le esercitazioni nella sezione, questo codice consentirà di visualizzare i collegamenti a tutte le esercitazioni e le relative descrizioni, come indicato nella schermata di seguito.

Una volta creato il controllo Repeater, aprire le pagine Default.aspx in ogni cartella, passare alla visualizzazione Progettazione e trascinare semplicemente il controllo utente da Esplora soluzioni all'area di progettazione in cui si desidera visualizzare l'elenco delle esercitazioni.

Figura 14. Controllo utente aggiunto a Default.aspx

Figura 15. Elenco delle esercitazioni Basic Reporting

Riepilogo

Con la mappa del sito definita e la pagina master completa, si dispone ora di un layout delle pagine coerente e uno schema di navigazione per le esercitazioni relative ai dati. Indipendentemente dal numero di pagine aggiunte al sito, l'aggiornamento del layout delle pagine nell'intero sito o delle informazioni sulla navigazione nel sito verrà eseguito in modo rapido e semplice, grazie alla centralizzazione delle informazioni. In particolare, le informazioni sul layout delle pagine vengono definite nella pagina master Site.master e la mappa del sito in Web.sitemap. Non è stato necessario scrivere alcun codice per ottenere questo layout delle pagine nell'intero sito e il meccanismo di navigazione. Inoltre, è stato mantenuto il completo supporto di progettazione WYSIWYG in Visual Studio.

Dopo aver completato il livello di accesso ai dati e il livello di logica aziendale e aver definito un layout delle pagine e una navigazione nel sito coerenti, si è pronti per iniziare l'esplorazione dei modelli comuni di creazione dei rapporti. Nelle successive tre esercitazioni verranno esaminate le attività base di creazione dei rapporti: visualizzazione dei dati recuperati da BLL nei comandi GridView, DetailsView e FormView.

Buona programmazione!

Materiale aggiuntivo

Per ulteriori informazioni sugli argomenti trattati in questa esercitazione, consultare i seguenti riferimenti (alcuni articoli sono disponibili solo in lingua inglese):

 

Informazioni sull'autore

Scott Mitchell, autore di sei libri su ASP/ASP.NET e fondatore di 4GuysFromRolla.com, si occupa delle tecnologie Microsoft Web dal 1998. Lavora come consulente, insegnante e scrittore indipendente e ha recentemente finito il suo ultimo libro, Sams Teach Yourself ASP.NET 2.0 in 24 Hours. È possibile contattarlo all'indirizzo mitchell@4guysfromrolla.com o sul suo blog, all'indirizzo http://ScottOnWriting.NET.

Ringraziamenti speciali...

Questa serie di esercitazioni è stata esaminata da diversi validi revisori. I revisori principali di questa esercitazione sono Liz Shulok, Dennis Patterson e Hilton Giesenow. Se si è interessati ai prossimi articoli MSDN dello stesso autore, scrivere all'indirizzo mitchell@4GuysFromRolla.com.

Mostra: