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

Aggiornamento: novembre 2007

In questa procedura dettagliata viene illustrato l'utilizzo del controllo ASP.NET Menu eseguito a livello di codice coordinando due menu nella stessa pagina tramite il codice.

È possibile creare menu di spostamento per il sito Web utilizzando il controllo ASP.NET Menu. In questa procedura dettagliata vengono illustrati gli aspetti della programmazione del controllo ASP.NET Menu e vengono creati due menu associati allo stesso file Web.sitemap che interagiscono. Il primo è un menu visualizzato in modo statico di categorie quali prodotti, servizi e supporto. Viene visualizzato orizzontalmente rispetto alla parte superiore della pagina. Il secondo menu viene visualizzato orizzontalmente sotto il primo menu. Il contenuto del secondo menu viene determinato dalla voce selezionata nel primo menu In base alla selezione del primo menu, viene regolata a livello di codice l'origine dati della mappa del sito del secondo menu per visualizzare solo la parte del file Web.sitemap relativa alla categoria selezionata.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre di:

• 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 i passaggi illustrati in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare il sito Web e ignorare la sezione "Creazione del file della mappa del sito" più avanti nella procedura dettagliata. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla seguente procedura.

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere NuovoSito Web dal menu File.

   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, 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 cui lavorare.

6. Scegliere OK.

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

Creazione del file della mappa del sito

Il contenuto di entrambi i menu deriva dal file Web.sitemap del sito. Gli oggetti SiteMapDataSource creati vengono utilizzati da entrambi i menu per garantire che in ciascuno di essi venga visualizzata la parte corretta della mappa del sito.

Per creare il file Web.sitemap

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

2. Nella finestra di dialogo Aggiungi nuovo elemento scegliere Mappa del sito, quindi fare clic su Aggiungi.

3. Aggiungere al nuovo file il seguente codice XML: XML rappresenta una gerarchia di opzioni di menu. Gli elementi <siteMapNode> sono nidificati. Ogni nodo è una voce di menu che contiene elementi secondari, alcuni dei quali dispongono a loro volta di elementi secondari. Esistono nodi di secondo livello al di sotto del nodo Home: Hardware, Software e Support. Sotto questi nodi sono presenti varie sottocategorie.

   <?xml version="1.0" encoding="utf-8" ?>
   <siteMap>
     <siteMapNode title="Home">
       <siteMapNode title="Products">
         <siteMapNode title="Hardware" url="Default.aspx?node=hardware">
           <siteMapNode title="Mouse"/>
           <siteMapNode title="Keyboard"/>
           <siteMapNode title="NetCard"/>
           <siteMapNode title="Monitor"/>
           <siteMapNode title="PC"/>
         </siteMapNode>
         <siteMapNode title="Software" url="Default.aspx?node=software">
           <siteMapNode title="Spreadsheet"/>
           <siteMapNode title="Word Processor"/>
           <siteMapNode title="Presentation"/>
           <siteMapNode title="Mail"/>
           <siteMapNode title="Games"/>
         </siteMapNode>
         <siteMapNode title="Books" url="Default.aspx?node=books">
           <siteMapNode title="Programming"/>
           <siteMapNode title="Debugging"/>
           <siteMapNode title="Testing"/>
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="WinForm Apps"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Services">
         <siteMapNode title="Consulting" url="Default.aspx?node=consulting">
           <siteMapNode title="Processes"/>
           <siteMapNode title="Management"/>
           <siteMapNode title="Recruiting"/>
         </siteMapNode>
         <siteMapNode title="Development" url="Default.aspx?node=development">
           <siteMapNode title="Web Apps"/>
           <siteMapNode title="Enterprise Apps"/>
           <siteMapNode title="Database"/>
         </siteMapNode>
       </siteMapNode>
       <siteMapNode title="Support">
         <siteMapNode title="Drivers" url="Default.aspx?node=drivers">
           <siteMapNode title="Audio"/>
           <siteMapNode title="Network"/>
           <siteMapNode title="Printer"/>
           <siteMapNode title="Modem"/>
         </siteMapNode>
         <siteMapNode title="Manuals" url="Default.aspx?node=manuals">
           <siteMapNode title="Applications"/>
           <siteMapNode title="Troubleshooting"/>
           <siteMapNode title="Installation"/>
           <siteMapNode title="Internet"/>
         </siteMapNode>
         <siteMapNode title="Updates" url="Default.aspx?node=updates">
           <siteMapNode title="Release 1"/>
           <siteMapNode title="Game Package"/>
         </siteMapNode>
       </siteMapNode>
     </siteMapNode>
   </siteMap>
   

4. Salvare il file.

Creazione del primo menu

Nel primo menu viene visualizzato un singolo livello di elementi statici del menu. Il menu viene visualizzato orizzontalmente nella parte superiore della pagina.

Per creare il primo menu

1. In Esplora soluzioni fare doppio clic sulla pagina Default.aspx per aprirla.

2. Passare alla visualizzazione Progettazione.

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

4. Nella finestra Proprietà impostare la proprietà Orientamento su Orizzontale.

5. Impostare MaximumDynamicDisplayLevels su 0.

   In tal modo nessuna parte del menu verrà visualizzata in modo dinamico e immediato.

6. Verificare che StaticDisplayLevels sia impostato su 1.

   In base a questa impostazione, nel menu può essere visualizzato un solo livello.

7. Fare clic sullo smart tag del controllo Menu.

   Viene visualizzata la finestra di dialogo Attività di menu.

8. Scegliere Nuova origine dati nell'elenco a discesa Scegli origine dati.

9. Nella Configurazione guidata origine dati scegliere Mappa del sito.

10. Accettare il nome predefinito di SiteMapDataSource1 e scegliere OK.

Configurazione della prima origine dati

Dal momento che nel primo menu viene visualizzato un singolo livello di elementi statici del menu, è necessario configurare la relativa origine dati per visualizzare la parte corretta del file Web.sitemap. In questo caso si tratta degli elementi di secondo livello: Products, Services e Support.

Le associazioni predefinite tra il controllo Menu e un controllo SiteMapDataSource rendono ciascuna voce del menu un collegamento di esplorazione. Per controllare a livello di codice il comportamento di un altro menu, utilizzare associazioni personalizzate in modo che queste voci di menu non operano come collegamenti di esplorazione ma generano un postback che consente l'aggiornamento del secondo menu.

Per configurare la prima origine dati

1. Visualizzare la pagina Default.aspx nella visualizzazione Progettazione, quindi fare clic sullo smart tag del controllo Menu.

   Viene visualizzata la finestra di dialogo Attività di menu.

2. Scegliere Edit MenuItem Databindings.

3. In Menu DataBindings Editor, nell'elenco a discesa Associazione dati disponibili, selezionare SiteMapNode e scegliere Aggiungi.

4. Selezionare l'oggetto TextField nell'elenco a discesa Proprietà di associazione dati, quindi selezionare Titolo dal menu a discesa. Scegliere OK.

5. Selezionare il controllo SiteMapDataSource.

6. In Proprietà impostare ShowStartingNode su False.

Creazione del secondo menu

Il secondo menu è dinamico e la relativa origine dati utilizza solo una parte del file della mappa del sito determinata a livello di codice da quanto selezionato nel primo menu. Come in precedenza, si utilizza il menu per visualizzare il primo livello in modo statico; tuttavia, a questo punto, si utilizza il resto del file Web.sitemap per la visualizzazione dinamica.

Per creare il secondo menu

1. Visualizzare la pagina Default.aspx nella visualizzazione Progettazione, quindi trascinare un secondo controllo Menu nella pagina sottostante il primo controllo Menu.

2. In Proprietà impostare Orientamento su Orizzontale.

3. Fare clic sullo smart tag del secondo controllo Menu.

   Viene visualizzata la finestra di dialogo Attività di menu.

4. Scegliere Nuova origine dati nell'elenco a discesa Scegli origine dati.

5. Nella Configurazione guidata origine dati scegliere Mappa del sito

6. Accettare il nome predefinito di SiteMapDataSource2 e scegliere OK.

Configurazione della seconda origine dati

In questa sezione configurare l'origine dati per selezionare solo una sezione particolare del file Web.sitemap. Per eseguire tale operazione, iniziare con la prima categoria predefinita del primo menu che corrisponde alla sezione Products del file Web.sitemap. Successivamente viene utilizzata la proprietà StartingNodeURL per indicare uno specifico attributo URL all'interno del file.

Per configurare il punto di partenza della seconda origine

1. Selezionare SiteMapDataSource2 e impostare la relativa proprietà StartingNodeURL su "Default.aspx?node=hardware".

2. Impostare StartingNodeOffset su -1.

3. Impostare ShowStartingNode su False.

Aggiunta del codice per coordinare i menu

Per controllare il secondo menu in base allo stato del primo menu, intercettare l'evento MenuItemClick del primo menu, quindi indicare la visualizzazione del secondo menu relativamente al file della mappa del sito in codice.

Per coordinare i menu in codice

1. Visualizzare la pagina Default.aspx nella visualizzazione Progettazione e selezionare Menu1.

2. In Proprietà impostare l'evento MenuItemClick su Menu1_MenuItemClick.

   Un metodo denominato Menu1_MenuItemClick verrà creato nel file code-behind della pagina Default.aspx o nei tag <script> della pagina aspx se si utilizza il modello di pagina a file singolo.

3. Aggiungere al metodo il seguente codice evidenziato.

   Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
     ByVal e As System.Web.UI.WebControls.MenuEventArgs) _
     Handles Menu1.MenuItemClick
     Select Case e.Item.Value
       Case "Products"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware"
       Case "Services"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting"
       Case "Support"
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers"
     End Select
   End Sub
   

   protected void Menu1_MenuItemClick(Object sender,    
         System.Web.UI.WebControls.MenuEventArgs e)
   {
     switch(e.Item.Value)
     {
       case "Products":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";
         return;
       case "Services":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";
         return;
       case "Support":
         SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";
         return;
     }
   }
   

   Nel codice riportato sopra viene intercettato l'evento clic di Menu1. Invece di spostarsi nei vari percorsi, utilizzare il valore per determinare quanto viene visualizzato nel secondo controllo Menu. È possibile eseguire tale operazione regolando la proprietà StartingNodeUrl del secondo controllo Menu del controllo SiteMapDataSource.

4. Salvare il file.

Verifica dei menu

Per verificare l'interazione tra i due menu, selezionare gli elementi del primo menu e osservare la conseguente modifica del secondo menu. Il secondo menu è dinamico ed è caratterizzato dal terzo livello del file Web.sitemap.

Per verificare il menu

1. Premere CTRL+F5 per eseguire la pagina.

   Viene visualizzato il primo menu con il menu secondario che caratterizza le voci del menu sotto Products nel file Web.sitemap.

2. Scegliere Services nel primo menu.

   A questo punto nel secondo menu vengono visualizzati i menu dinamici Consulting e Development.

3. Scegliere Support.

   Nel secondo menu vengono visualizzati gli elementi dei menu dinamici Drivers, Manuals e Updates.

Passaggi successivi

Il controllo Menu consente di creare semplici menu di spostamento fornendo un supporto a livello di codice per scenari più complessi. È possibile inoltre provare a utilizzare le opzioni riportate di seguito:

• Applicare un tema o un'interfaccia al controllo Menu. Per ulteriori informazioni, vedere Procedura dettagliata: personalizzazione di un sito Web tramite i temi di Visual Studio

• Ulteriori informazioni sullo spostamento all'interno dei siti. Per ulteriori informazioni, vedere Cenni preliminari sugli spostamenti all'interno dei siti ASP.NET

• Utilizzare un controllo Menu in una pagina master per fornire uno spostamento lungo il margine di una singola pagina. Per ulteriori informazioni, vedere Procedura dettagliata: creazione e utilizzo di pagine master ASP.NET in Visual Web Developer.

Vedere anche

Attività

Procedura dettagliata: visualizzazione di un menu in pagine Web

Concetti

Cenni preliminari sul controllo Menu