Condividi tramite

Procedura dettagliata: visualizzazione di un menu in pagine Web

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato come posizionare e configurare un controllo Menu ASP.NET in una pagina.

Una caratteristica comune dei siti Web di qualsiasi complessità è un menu di spostamento. È possibile utilizzare il controllo Menu in ASP.NET per impostare in modo semplice un menu di spostamento complesso senza scrivere il codice.

Il controllo Menu consente più opzioni di visualizzazione, inclusa una visualizzazione statica in cui il menu è totalmente esposto e una visualizzazione dinamica in cui parti del menu sono visualizzate quando il puntatore del mouse viene spostato sull'elemento del menu padre. Inoltre, nel controllo è fornita una combinazione di modalità di visualizzazione statica e dinamica che consente una serie di elementi principali statici, ma con elementi di menu figlio visualizzati in modo dinamico.

È possibile configurare il controllo Menu ASP.NET nella finestra di progettazione con collegamenti statici alle pagine oppure associarlo in modo automatico a un'origine dati gerarchica, ad esempio un controllo XmlDataSource oppure SiteMapDataSource.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Creazione di un menu di base e relativa configurazione in modo statico per eseguire il collegamento alle pagine.

  • Creazione di un menu più complesso associato a un file XML Web.sitemap.

  • Modifica dell'orientamento di un controllo.

  • Configurazione di più livelli di visualizzazione statica oppure dinamica.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

  • Microsoft Visual Web Developer (Visual Studio).

  • .NET Framework.

Creazione del sito Web

Se è stato già creato un sito Web in Visual Web Developer (ad esempio, seguendo le procedure di Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare alla sezione successiva, "Creazione di un menu di base". In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovosito Web dal menu File.

    Verrà 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, immettere il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome di cartella C:\WebSites.

  5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.

  6. Scegliere OK.

    In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Creazione di un menu di base

Il primo passaggio per la creazione di un menu nella pagina consiste nel posizionamento di un controllo Menu.

Per aggiungere un controllo di menu alla pagina

  1. Passare o aprire la pagina Default.aspx e passare alla visualizzazione Progettazione.

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

Per questo esempio, sarà necessario orientare il menu in modo orizzontale invece che verticale.

Per posizionare il controllo Menu in modo orizzontale

  • Scegliere Proprietà facendo clic con il pulsante destro del mouse sul controllo Menu, quindi impostare Orientamento su Horizontal.

Configurazione di un menu di base

In questa sezione, saranno definiti gli elementi del menu utilizzando l'Editor delle voci di menu.

Per modificare le voci di controllo del menu

  1. Fare clic con il pulsante destro del mouse sul controllo Menu, quindi scegliere Modifica voci di menu.

    Viene visualizzato Editor delle voci di menu.

  2. In Elementi, fare clic sull'icona Aggiungi elemento principale.

  3. In Proprietà per il nuovo elemento, impostare Text su Home e NavigateURL su Default.aspx.

  4. In Elementi, fare clic sull'icona Aggiungi elemento principale.

  5. In Proprietà, impostare Text su Products e NavigateURL su Products.aspx.

  6. In Elementi, fare clic sull'icona Aggiungi elemento principale.

  7. In Proprietà, impostare Text su Services e NavigateURL su Services.aspx.

  8. Scegliere OK.

Se si esegue la ricerca dell'origine per Default.aspx, si noterà che le voci di menu e i collegamenti sono specificati in modo dichiarativo nel controllo.

Per creare le pagine di destinazione

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla directory principale del sito Web e scegliere Aggiungi nuovo elemento.

  2. Fare clic su Web Form, denominare il file Products.aspx, quindi scegliere Aggiungi.

  3. Ripetere i passaggi precedenti per creare un file denominato Services.aspx.

Test del menu

Con le pagine e il menu sul posto, è possibile eseguire la verifica.

Per eseguire il test del controllo del menu

  1. Fare clic su Default.aspx in Esplora soluzioni, quindi premere CTRL+F5 per eseguire la pagina Default.aspx.

  2. Spostare il puntatore sulle voci; nella barra di stato del browser nella parte inferiore della pagina (se visibile) sarà visualizzato il collegamento alla pagina.

  3. Fare clic su un collegamento per passare alla pagina.

Creazione di un menu associato a una mappa del sito

Nell'ultima sezione, è stato creato una menu statico semplice configurato in modo dichiarativo all'interno della pagina. In questa sezione, si ignora la modifica delle voci di controllo Menu in modo diretto mentre si associa il controllo a un file Web.sitemap come origine dati XML. Tale procedura consente di mantenere la struttura del controllo Menu all'interno di un file XML separato che può essere aggiornato in modo semplice senza modificare la pagina oppure senza utilizzare la finestra di progettazione.

Per questo esempio sarà utilizzato un secondo controllo Menu.

Per creare un secondo controllo del menu

  • Trascinare nella pagina Default.aspx un secondo controllo Menu, dal gruppo Esplorazione nella Casella degli strumenti.

Successivamente, sarà necessario un file Web.sitemap da associare.

Per creare un file della mappa del sito

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla directory principale del sito Web e scegliere Aggiungi nuovo elemento.

  2. Nella finestra di dialogo Add New Item <Websitename> scegliere Mappa del sito.

  3. Scegliere Aggiungi.

  4. Posizionare il codice XML riportato di seguito nel file Web.sitemap.

    In XML è rappresentata la struttura del menu. I nodi nidificati diventano elementi del menu figlio di elementi del menu del nodo padre.

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. Salvare il file.

Associazione a una mappa del sito

È ora possibile creare un'origine dati di spostamento che punta al file Web.sitemap e consente di associarvi il controllo Menu.

Per associare un controllo del menu a una mappa del sito

  1. Aprire il file Default.aspx e passare alla visualizzazione Progettazione.

  2. Fare clic sullo smart tag per visualizzare la finestra di dialogo Attività di menu.

  3. Scegliere Nuova origine dati nell'elenco a discesa Scegli origine dati della finestra di dialogo Attività di menu.

    Verrà visualizzata la finestra di dialogo Configurazione guidata origine dati.

  4. Fare clic su SiteMap.

    In Specificare l'ID dell'origine dati, viene visualizzato il nome predefinito SiteMapDataSource1.

  5. Scegliere OK.

Test dell'associazione della mappa del sito

Con le pagine e il menu sul posto, è possibile eseguire la verifica.

Per eseguire il test dell'associazione della mappa del sito

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

  2. Spostare il puntatore sulla voce di menu Home del secondo menu verticale.

    Sono visualizzati Prodotti e Servizi.

  3. Spostare il puntatore su Prodotti.

    Sono visualizzati Hardware e Software.

    Nel codice sorgente per Default.aspx, a differenza della prima voce di menu, gli elementi non sono specificati in modo dichiarativo, ma il controllo Menu fa riferimento all'origine dati.

Modifica dei livelli statici e dinamici

Nel menu verticale creato nella sezione precedente viene utilizzata una visualizzazione dinamica in modo totale, in cui soltanto il livello superiore rimane statico. Con il controllo Menu è possibile specificare il comportamento in base al posizionando il puntatore del mouse e al menu, se si tratta di menu dinamico oppure statico. In questa sezione, saranno modificate le qualità dinamiche e statiche del controllo Menu.

Per rendere il controllo del menu statico per due livelli

  1. Nella pagina Default.aspx in visualizzazione Progettazione, fare clic con il pulsante destro del mouse sul secondo controllo Menu e scegliere Proprietà.

  2. Impostare StaticDisplayLevels su 2.

Test del menu dinamico

Con le pagine e il menu sul posto, è possibile eseguire la verifica.

Per eseguire il test del menu dinamico

  • Premere CTRL+F5 per eseguire la pagina Default.aspx.

    Sono visualizzati i primi due livelli del menu, mentre il terzo livello è dinamico.

Passaggi successivi

Il controllo Menu consente di creare in modo semplice menu di spostamento. È possibile configurare il controllo per la visualizzazione statica o dinamica e associarlo a un file XML della mappa del sito. È inoltre possibile sperimentare le ulteriori opzioni riportate di seguito.

Vedere anche

Attività

Procedura dettagliata: controllo del menu a livello di codice di ASP.NET

Concetti

Cenni preliminari sul controllo Menu