Procedura dettagliata: aggiunta del sistema di esplorazione a un sito Web

Aggiornamento: novembre 2007

In tutti i siti con un numero elevato di pagine, può essere difficile creare un sistema di esplorazione che consenta agli utenti di spostarsi liberamente tra le pagine, specialmente quando il sito viene modificato. Il sistema di esplorazione dei siti ASP.NET consente di creare una mappa centrale delle pagine del sito.

In questa procedura dettagliata viene illustrato come configurare una mappa del sito e come utilizzare i controlli che si basano sulla mappa del sito per aggiungere un sistema di esplorazione delle pagine al sito Web.

Nella procedura vengono illustrate le seguenti operazioni:

• Creazione di un sito Web con pagine di esempio e di un file di mappa del sito in cui viene descritto il layout delle pagine.

• Utilizzo del controllo TreeView come menu di spostamento che consente agli utenti di passare a una pagina qualsiasi all'interno del sito.

• Utilizzo del controllo SiteMapPath per aggiungere un percorso di spostamento, noto anche "breadcrumb", che consente a un utente di visualizzare la gerarchia del sito e di spostarsi verso l'alto all'interno di questa a partire dalla pagina corrente.

• Utilizzo del controllo Menu per aggiungere un menu di spostamento che consenta agli utenti di visualizzare un solo livello di nodi per volta. Posizionamento del puntatore del mouse su un nodo che dispone di nodi figlio per generare un sottomenu di tali nodi.

• Utilizzo del sistema di esplorazione del sito e dei controlli di una pagina master in modo da definire il sistema di esplorazione una sola volta.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

• Strumento di sviluppo Web Microsoft Visual Web Developer.

• .NET Framework.

In questa procedura dettagliata si presume che l'utente sia in grado di utilizzare Visual Web Developer.

Creazione di un sito Web che dispone di pagine di esempio e di una mappa del sito

Se è già stato creato un sito Web in Visual Web Developer completando la Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Creazione di un sito Web di file system

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovo sito Web dal menu File (oppure scegliere Nuovo dal menu File e fare clic su Sito Web).

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

3. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

4. Nella casella Percorso più a sinistra, fare clic su File System quindi, nella casella Percorso posizionata più a destra, immettere il nome della cartella in cui si desidera mantenere le pagine del sito Web.

   Ad esempio, digitare il nome di cartella C:\WebSites\SiteNavigation.

5. Nella casella Linguaggio scegliere il linguaggio di programmazione da utilizzare.

   Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web; tuttavia è possibile impostare il linguaggio di programmazione per ogni pagina singolarmente.

6. Scegliere OK.

   La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.

Creazione di una mappa del sito

Per utilizzare il sistema di esplorazione del sito, è necessario un metodo per descrivere la modalità di layout delle pagine nel sito. Il metodo predefinito consiste nella creazione di un file xml in cui è contenuta la gerarchia del sito, inclusi i titoli di pagina e gli URL.

La struttura del file xml riflette quella del sito in uso. Ciascuna pagina è rappresentata come elemento siteMapNode nella mappa del sito. Il nodo più in alto rappresenta la home page, mentre i nodi figlio rappresentano le pagine situate a un livello più profondo nella struttura del sito.

Per creare una mappa del sito

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

2. Nella finestra di dialogo Aggiungi nuovo elemento <percorso>:

   1. In Modelli Visual Studio installati fare clic su Mappa del sito.

   2. Accertarsi che il nome nella casella Nome sia Web.sitemap.

      Nota:
      Il file dovrà essere denominato Web.sitemap ed essere visualizzato nella directory principale del sito Web.

   3. Fare clic su Aggiungi.

3. Copiare il contenuto XML riportato di seguito nel file Web.sitemap sovrascrivendo il contenuto predefinito.

   <siteMap>
     <siteMapNode title="Home" description="Home" url="~/home.aspx" >
       <siteMapNode title="Products" description="Our products"
            url="~/Products.aspx">
           <siteMapNode title="Hardware" 
                description="Hardware we offer" 
                url="~/Hardware.aspx" />
           <siteMapNode title="Software" 
                description="Software for sale" 
                url="~/Software.aspx" />
       </siteMapNode>
       <siteMapNode title="Services" description="Services we offer" 
           url="~/Services.aspx">
           <siteMapNode title="Training" description="Training" 
               url="~/Training.aspx" />
           <siteMapNode title="Consulting" description="Consulting" 
               url="~/Consulting.aspx" />
           <siteMapNode title="Support" description="Support" 
               url="~/Support.aspx" />
         </siteMapNode>
     </siteMapNode>
   </siteMap>
   

   Nel file Web.sitemap è contenuto un insieme di elementi siteMapNode nidificati su tre livelli. La struttura di ogni elemento è identica. L'unica differenza sta nel percorso all'interno della gerarchia XML.

   L'URL delle pagine definite nel file xml di esempio non è definito. Ciò significa che tutte le pagine vengono gestite come se gli URL fossero relativi alla directory principale dell'applicazione. Tuttavia, è possibile specificare un URL qualsiasi per una determinata pagina: la struttura logica definita nella mappa del sito non deve necessariamente corrispondere al layout fisico delle pagine nelle cartelle.

4. Salvare e chiudere il file.

Creazione delle pagine da esplorare

In questa sezione, verranno create poche pagine tra quelle descritte nella mappa del sito definita nella sezione precedente. La mappa del sito è più completa, in modo da consentire la visualizzazione di una gerarchia completa quando si esegue il test delle pagine in questa procedura dettagliata.

Per creare le pagine da esplorare

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

2. Nella finestra di dialogo Aggiungi nuovo elemento <percorso>:

   1. In Modelli Visual Studio installati fare clic su Web Form.

   2. Digitare Home.aspx nella casella Nome, quindi scegliere Aggiungi.

3. Passare alla visualizzazione Progettazione.

4. Nella pagina Home.aspx page, digitare Home e formattarlo come Intestazione 1.

   Ripetere questa procedura e creare quattro pagine aggiuntive denominate Products.aspx, Hardware.aspx, Software.aspx e Training.aspx. Utilizzare il nome della pagina (ad esempio, Products) come intestazione, in modo da riconoscere ciascuna pagina nel momento in cui viene visualizzata nel browser.

   Non importa quali pagine specifiche vengono create. In questa procedura dettagliata le pagine elencate sono dei semplici suggerimenti che consentiranno di visualizzare la gerarchia del sito nidificata su tre livelli.

Creazione di un menu di spostamento mediante il controllo TreeView

Dopo avere creato una mappa del sito e alcune pagine, è possibile aggiungere al sito un sistema di esplorazione. Il controllo TreeView sarà utilizzato per funzionare come menu di spostamento comprimibile.

Per aggiungere un menu di spostamento in stile struttura

1. Aprire la pagina Home.aspx.

2. Dal gruppo Dati della Casella degli strumenti, trascinare un controllo SiteMapDataSource nella pagina.

   Nella configurazione predefinita, il controllo SiteMapDataSource recupera le informazioni dal file Web.sitemap creato in precedenza nella sezione "Creazione di una mappa del sito" di questa procedura dettagliata; pertanto non è necessario specificare informazioni aggiuntive per il controllo.

3. Dal gruppo Esplorazione della Casella degli strumenti, trascinare un controllo TreeView nella pagina.

4. Nella casella Scegli origine dati del menu Attività TreeView, fare clic su SiteMapDataSource1.

5. Salvare la pagina.

Esecuzione del test del menu di spostamento in stile struttura

È ora possibile eseguire un test intermedio del sistema di esplorazione.

Per eseguire il test del menu di spostamento

1. Premere CTRL+F5 per eseguire la pagina Home.aspx.

   Nella struttura vengono visualizzati due livelli di nodi.

2. Fare clic su Products per visualizzare la pagina Products.

   • Se non è stata creata una pagina Products.aspx, fare clic sul collegamento relativo alla pagina creata.

Nello stato corrente del sito Web, il menu di spostamento viene visualizzato soltanto nella home page. È possibile aggiungere gli stessi controlli SiteMapDataSource e TreeView a ciascuna pagina nell'applicazione per visualizzare un menu di spostamento in ciascuna pagina. Tuttavia, più avanti nella procedura dettagliata, verrà illustrato come posizionare il menu di spostamento in una pagina master in modo da visualizzarlo automaticamente in tutte le pagine.

Visualizzazione della cronologia di spostamento mediante il controllo SiteMapPath

Oltre a creare un menu di spostamento mediante il controllo TreeView, è possibile aggiungere a ciascuna pagina un sistema di esplorazione nel quale viene visualizzato il punto in cui si trova la pagina all'interno della gerarchia corrente. Questo tipo di controllo di spostamento è noto anche come percorso di spostamento. In ASP.NET viene fornito il controllo SiteMapPath che consente l'implementazione automatica dello spostamento sulle pagine.

Per visualizzare la cronologia di spostamento

1. Aprire la pagina Products.aspx e passare alla visualizzazione Progettazione.

2. Dal gruppo Esplorazione della Casella degli strumenti, trascinare un controllo SiteMapPath nella pagina, posizionare il cursore davanti al controllo SiteMapPath e premere INVIO per creare una nuova riga.

   Mediante il controllo SiteMapPath viene visualizzata la posizione della pagina corrente all'interno della gerarchia di pagine. Per impostazione predefinita, il controllo SiteMapPath rappresenta la gerarchia creata nel file Web.sitemap. Se, ad esempio, viene visualizzata la pagina Products.aspx, mediante il controllo SiteMapPath sarà mostrato il percorso indicato di seguito:

   Home > Products

3. Ripetere questa procedura per le altre pagine create nella procedura dettagliata, tranne che per la home page.

   Seppure non viene inserito un controllo SiteMapPath in ogni pagina, ai fini dell'esecuzione del test è necessario un controllo in una pagina a ciascun livello della gerarchia del sito (ad esempio, nelle pagine Products.aspx e Hardware.aspx).

Esecuzione del test della cronologia di spostamento

Il test dello spostamento sulle pagine può essere eseguito visualizzando le pagine al secondo e al terzo livello della gerarchia.

Per eseguire il test dello spostamento sulle pagine

1. Aprire la pagina Home.aspx e premere CTRL+F5 per eseguirla.

2. Utilizzare il controllo TreeView per spostarsi alla pagina Products.

   Nel punto della pagina in cui viene inserito il controllo SiteMapPath, verrà visualizzato un percorso simile a quello riportato di seguito:

   Home > Products

3. Fare clic su Home per ritornare alla home page.

4. Utilizzare il controllo TreeView per spostarsi alla pagina Hardware.

   Questa volta verrà visualizzato un percorso simile a quello riportato di seguito:

   Home > Products > Hardware

Tutti i nomi di pagina visualizzati dal controllo SiteMapPath sono collegamenti, eccetto l'ultimo, che rappresenta la pagina corrente. È possibile trasformare il nodo corrente in un collegamento impostando la proprietà RenderCurrentNodeAsLink del controllo SiteMapPath su true.

Il controllo SiteMapPath consente agli utenti di spostarsi in alto nella gerarchia del sito, ma non di passare a una pagina non presente nel percorso della gerarchia corrente.

Creazione di un menu di spostamento mediante il controllo Menu

Oltre a creare un menu di spostamento mediante il controllo TreeView, è possibile utilizzare il controllo Menu per visualizzare un menu di spostamento espandibile che consenta agli utenti di visualizzare un solo livello di nodi alla volta. Posizionando il puntatore del mouse su un nodo che dispone di nodi figlio viene generato un sottomenu di tali nodi.

Per aggiungere un menu di spostamento in stile menu

1. Aprire la pagina Products.aspx e passare alla visualizzazione Progettazione.

2. Dal gruppo Esplorazione della Casella degli strumenti, trascinare un controllo Menu nella pagina.

3. Dal menu Attività di Menu nell'elenco Scegli origine dati, fare clic su NewDataSource.

4. Nella procedura guidata Configura origine dati <Datasourcename>, fare clic su Mappa del sito e scegliere OK.

5. Salvare la pagina.

Esecuzione del test del menu di spostamento in stile menu

È ora possibile eseguire un test intermedio del sistema di esplorazione.

Per eseguire il test del menu di spostamento

1. Chiudere Attività di Menu.

2. Aprire la pagina Home.aspx.

3. Premere CTRL+F5 per eseguire la pagina Home.aspx.

   Nella struttura vengono visualizzati due livelli di nodi.

4. Fare clic su Products per visualizzare la pagina Products.

   • Se non è stata creata una pagina Products.aspx, fare clic sul collegamento relativo alla pagina creata.

5. Nel menu di spostamento, posizionare il puntatore del mouse sul collegamento Home per espandere il menu.

Nello stato corrente del sito Web, il menu di spostamento viene visualizzato soltanto nella home page. È possibile aggiungere gli stessi controlli SiteMapDataSource e Menu a ciascuna pagina nell'applicazione per visualizzare un menu di spostamento in ciascuna pagina. Tuttavia, nella sezione successiva di questa procedura dettagliata, verrà illustrato come posizionare il menu di spostamento in una pagina master in modo da visualizzarlo automaticamente in tutte le pagine.

Combinazione del sistema di esplorazione del sito con le pagine master

Nelle pagine create fino a questo punto nella procedura dettagliata, i controlli per di spostamento all'interno del sito sono stati aggiunti singolarmente a ciascuna pagina. Tale operazione non è particolarmente complessa, in quanto non occorre configurare i controlli in modo diverso per ogni pagina. Tuttavia, in tal modo i costi di manutenzione del sito diventano più elevati. Ad esempio, per modificare la posizione del controllo SiteMapPath nelle pagine del sito, sarà necessario modificare ogni pagina singolarmente.

Utilizzando i controlli per di spostamento all'interno del sito in combinazione con le pagine master, è possibile creare un layout in cui tali controlli si trovano in un'unica posizione. Successivamente è possibile visualizzare le pagine come contenuto all'interno della pagina master.

Per creare la pagina master per il sistema di esplorazione

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

2. Nella finestra di dialogo Aggiungi nuovo elemento <percorso>:

   1. In Modelli Visual Studio installati fare clic su Pagina master.

   2. Digitare Navigation.master nella casella Nome, quindi fare clic su Aggiungi.

3. Passare alla visualizzazione Progettazione.

   La pagina master viene visualizzata con un controllo ContentPlaceHolder predefinito.

Nella procedura riportata di seguito, verrà creata una pagina master con un layout semplice per i controlli di spostamento. Sebbene in un'applicazione reale è probabile che venga utilizzata una formattazione più complessa, le tecniche di utilizzo dei controlli di spostamento in una pagina master saranno simili.

Per aggiungere controlli di spostamento alla pagina master

1. Selezionare il controllo ContentPlaceHolder, premere Freccia SINISTRA e quindi premere INVIO.

   In tal modo viene inserita una riga bianca davanti al controllo ContentPlaceHolder.

2. Dal gruppo Dati della Casella degli strumenti, trascinare un controllo SiteMapDataSource nella pagina master e posizionarlo al di sopra del controllo ContentPlaceHolder.

   Nota:
   Non posizionare il controllo SiteMapDataSource sul controllo ContentPlaceHolder.

   Per impostazione predefinita, il controllo SiteMapDataSource utilizzerà il file Web.sitemap creato in precedenza nella sezione "Creazione di una mappa del sito" della procedura dettagliata.

3. Fare clic sul controllo SiteMapDataSource, premere la Freccia DESTRA, quindi premere INVIO.

   In questo modo viene inserita una riga vuota sotto il controllo SiteMapDataSource.

4. Scegliere Inserisci tabella dal menu Tabella, quindi inserire una tabella con una riga, due colonne e una larghezza pari al 100 percento.

5. Dal gruppo Esplorazione della Casella degli strumenti, trascinare un controllo TreeView nella cella sinistra della tabella.

6. Nella casella Scegli origine dati del menu Attività TreeView, fare clic su SiteMapDataSource1.

7. Dal gruppo Esplorazione della Casella degli strumenti, trascinare un controllo SiteMapPath nella cella destra della tabella.

8. Nella cella destra, fare clic sull'area vuota, quindi premere MAIUSC+INVIO per creare una nuova riga.

9. Trascinare il controllo ContentPlaceholder nella cella destra della tabella e posizionarlo sotto il controllo SiteMapPath .

Quando si utilizza una pagina master, le pagine del sito vengono create come pagine di contenuto. Nelle pagine di contenuto, vengono utilizzati controlli Content per definire il testo e controlli che vengono visualizzati nel controllo ContentPlaceholder della pagina master. Pertanto, sarà necessario ricreare le pagine Home, Products e Hardware come pagine di contenuto.

Per creare pagine di contenuto per il sito

1. In Esplora soluzioni, fare clic con il pulsante destro del mouse sulla pagina Home.aspx, selezionare Elimina, quindi scegliere OK.

2. Ripetere il passaggio 1 per le pagine Products.aspx, Software.aspx, Training.aspx e Hardware.aspx e per tutte le altre pagine create.

   Le pagine verranno ricreate come pagine di contenuto in cui viene utilizzata una pagina master.

3. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

4. Nella finestra di dialogo Aggiungi nuovo elemento:

   1. In Modelli Visual Studio installati fare clic su Web Form.

   2. Nella casella Nome digitare Home.aspx.

   3. Selezionare la casella di controllo Seleziona pagina master.

   4. Fare clic su Aggiungi.

   Verrà visualizzata la finestra di dialogo Seleziona pagina master.

5. In Contenuto cartella, fare clic su Navigation.master, quindi scegliere OK.

   È stata creata una pagina di contenuto associata alla pagina master creata nella sezione precedente.

6. Passare alla visualizzazione Progettazione.

   Nella visualizzazione Progettazione, è possibile osservare il layout creato per la pagina master, con un'area modificabile corrispondente al controllo ContentPlaceHolder1 sulla pagina master.

7. Fare clic all'interno della finestra Content.

   Si tratta del punto in cui è possibile aggiungere il contenuto per questa pagina specifica.

8. Digitare Home, quindi formattare il testo come Intestazione 1.

   È stato creato il testo statico (in modo specifico, l'intestazione) per la home page.

9. Ripetere i passaggi da 3 a 8 per creare una pagina di contenuto Products.aspx e una pagina di contenuto Hardware.aspx. Nel passaggio 8, digitare rispettivamente Products e Hardware, invece di Home.

Esecuzione del test dei controlli di spostamento della pagina master

L'esecuzione del test con le pagine master e con quelle di contenuto è identica all'esecuzione del test delle pagine singole.

Per eseguire il test dei controlli di spostamento nella pagina master

1. Aprire la pagina Products.aspx e premere CTRL+F5 per eseguirla.

   La pagina di contenuto Products viene unita alla pagina master. Nel browser viene visualizzata una pagina contenente l'intestazione Products e i controlli di spostamento aggiunti alla pagina master.

2. Nel controllo TreeView, fare clic su Hardware.

   La pagina Hardware viene visualizzata con lo stesso layout della pagina Products, a eccezione del fatto che il controllo SiteMapPath viene visualizzato con un percorso diverso.

Passaggi successivi

In questa procedura dettagliata vengono illustrati la funzionalità di base di esplorazione del sito di ASP.NET e i controlli di spostamento. È possibile sperimentare ulteriori funzionalità di spostamento. Ad esempio, è possibile eseguire le operazioni riportate di seguito:

• Formattazione del controllo SiteMapPath per personalizzarne l'aspetto. Il controllo supporta numerose opzioni che consentono di gestire il modo in cui vengono visualizzati i collegamenti. Per ulteriori informazioni, vedere SiteMapPath.

• Personalizzazione della visualizzazione delle pagine nel controllo TreeView. Ad esempio, è possibile evidenziare la pagina corrente nel nodo della visualizzazione della struttura.

• Gestione a livello di codice delle informazioni sul sistema di esplorazione del sito. Nella pagina corrente, è disponibile un controllo SiteMapPath che può essere utilizzato per visualizzare le informazioni sul sistema di esplorazione del sito a livello di codice.

• Utilizzo di un archivio dati per le informazioni sulla mappa del sito. Piuttosto che utilizzare il file di mappa del sito XML predefinito, è possibile che si decida di utilizzare una mappa del sito esistente oppure memorizzare le informazioni relative alla mappa del sito all'interno di un database. Nel sistema di esplorazione del sito ASP.NET viene utilizzato un modello provider. È possibile creare un componente per la gestione delle informazioni sulla mappa del sito e quindi configurare l'applicazione all'utilizzo di quel componente piuttosto che del provider della mappa del sito predefinito. Per ulteriori informazioni, vedere Provider di esplorazione all'interno dei siti ASP.NET.

Vedere anche

Attività

Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer

Procedura dettagliata: creazione e utilizzo di pagine master ASP.NET in Visual Web Developer

Concetti

Cenni preliminari sugli spostamenti all'interno dei siti ASP.NET

Mappe del sito ASP.NET

Informazioni generali sulle pagine master ASP.NET

Protezione del sistema di spostamento all'interno dei siti ASP.NET

Protezione dell'accesso ai dati

Altre risorse

Protezione delle applicazioni ASP.NET in ambienti host

Suggerimenti di base sulla sicurezza delle applicazioni Web ASP.NET