Exemplarische Vorgehensweise: Programmgesteuertes Kontrollieren von ASP.NET-Menüs

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie unter Verwendung des ASP.NET-Menu-Steuerelements zwei Menüs auf derselben Seite durch entsprechenden Code programmgesteuert koordiniert werden.

Sie können Navigationsmenüs für die Website mit dem Menu-Steuerelement von ASP.NET erstellen. In dieser exemplarischen Vorgehensweise machen Sie sich mit den programmatischen Aspekten des ASP.NET-Menu-Steuerelements vertraut und erstellen zwei an dieselbe Web.sitemap-Datei gebundene Menüs, die zusammengehören. Das erste Menü ist ein statisch angezeigtes Menü mit Kategorien wie Produkte, Dienste und Support. Es wird horizontal im oberen Teil der Seite angezeigt. Das zweite Menü wird horizontal unter dem ersten Menü angezeigt. Der Inhalt des zweiten Menüs wird dadurch bestimmt, welches Menüelement im ersten Menü ausgewählt wird. Basierend auf der aktuellen Auswahl im ersten Menü passen Sie die Siteübersichts-Datenquelle des zweiten Menüs so an, dass nur der Teil der Datei Web.sitemap angezeigt wird, der für die ausgewählte Kategorie relevant ist.

Vorbereitungsmaßnahmen

Um die exemplarische Vorgehensweise nachzuvollziehen, benötigen Sie Folgendes:

• Microsoft Visual Web Developer (Visual Studio)

• .NET Framework

Erstellen der Website

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B. indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer ausgeführt haben), können Sie diese Website verwenden und mit "Erstellen der Siteübersichtsdatei" weiter unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

1. Öffnen Sie Visual Web Developer.

2. Klicken Sie im Menü Datei nacheinander auf Neu und auf Website.

   Das Dialogfeld Neue Website wird angezeigt.

3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

4. Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

   Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

5. Klicken Sie in der Liste Sprachen auf die Programmiersprache, in der Sie arbeiten möchten.

6. Klicken Sie auf OK.

   Visual Web Developer erstellt den Ordner und eine neue Seite mit dem Namen Default.aspx.

Erstellen der Siteübersichtsdatei

Der Inhalt beider Menüs stammt aus der Datei Web.sitemap der Site. Die von Ihnen erstellten SiteMapDataSource-Objekte werden von beiden Menüs verwendet, um sicherzustellen, dass jedes Menü den richtigen Teil der Siteübersicht anzeigt.

So erstellen Sie die Datei Web.sitemap

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie anschließend auf Neues Element hinzufügen.

2. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Siteübersicht aus, und klicken Sie dann auf Hinzufügen.

3. Fügen Sie der neuen Datei den folgenden XML-Code hinzu. Der XML-Code stellt eine Hierarchie von Menüauswahlen dar. Die <siteMapNode>-Elemente werden geschachtelt. Jeder Knoten entspricht einem Menüelement, das Unterelemente enthält, von denen einige selbst über Unterelemente verfügen. Unterhalb des Home-Knotens befinden sich die folgenden drei Knoten der zweiten Ebene: Hardware, Software und Support. Unter diesen befinden sich verschiedene Unterkategorien.

   <?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. Speichern Sie die Datei.

Erstellen des ersten Menüs

Das erste Menü zeigt eine einzelne Ebene statischer Menüelemente an. Es wird am oberen Rand der Seite horizontal angezeigt.

So erstellen Sie das erste Menü

1. Doppelklicken Sie im Projektmappen-Explorer auf die Seite Default.aspx, um sie zu öffnen.

2. Wechseln Sie in die Entwurfsansicht.

3. Ziehen Sie aus der Steuerelementgruppe Navigation in der Toolbox ein Menu-Steuerelement auf die Seite.

4. Legen Sie im Fenster Eigenschaften die Eigenschaft Orientation auf Horizontal fest.

5. Legen Sie MaximumDynamicDisplayLevels auf 0 (null) fest.

   Hierdurch wird sichergestellt, dass keine Teile des Menüs dynamisch als Popupmenü angezeigt werden.

6. Stellen Sie sicher, dass StaticDisplayLevels auf 1 festgelegt ist.

   Dadurch wird nur eine Ebene im Menü angezeigt.

7. Klicken Sie auf das Smarttag im Menu-Steuerelement.

   Das Dialogfeld Menu-Aufgaben wird angezeigt.

8. Wählen Sie in der Dropdownliste Datenquelle auswählen den Eintrag Neue Datenquelle aus.

9. Klicken Sie im Assistenten zum Konfigurieren von Datenquellen auf Siteübersicht.

10. Übernehmen Sie den Standardnamen SiteMapDataSource1, und klicken Sie auf OK.

Konfigurieren der ersten Datenquelle

Da im ersten Menü nur eine einzige Ebene statischer Menüelemente angezeigt wird, müssen Sie seine Datenquelle so konfigurieren, dass der richtige Teil der Datei Web.sitemap angezeigt wird. In diesem Fall sind dies die Elemente der zweiten Ebene: Products, Services und Support.

Die Standardbindung des Menu-Steuerelements an ein SiteMapDataSource-Steuerelement macht jedes Menüelement zu einer Navigationsverknüpfung. Da Sie das Verhalten eines weiteren Menüs programmgesteuert kontrollieren möchten, verwenden Sie benutzerdefinierte Bindungen, damit diese Menüelemente nicht als Navigationsverknüpfungen fungieren, sondern stattdessen ein Postback auslösen, sodass das zweite Menü aktualisiert werden kann.

So konfigurieren Sie die erste Datenquelle

1. Zeigen Sie die Seite Default.aspx in der Entwurfsansicht an, und klicken Sie dann auf das Smarttag im Menu-Steuerelement.

   Das Dialogfeld Menu-Aufgaben wird angezeigt.

2. Klicken Sie auf MenuItem-Databindings bearbeiten.

3. Wählen Sie im Menü-DataBindings-Editor in der Dropdownliste Verfügbare Datenbindungen die Option SiteMapNode aus, und klicken Sie auf Hinzufügen.

4. Wählen Sie in der Dropdownliste Datenbindungseigenschaften die Option TextField aus, und wählen Sie im Dropdownmenü Titel aus. Klicken Sie auf OK.

5. Wählen Sie das SiteMapDataSource-Steuerelement aus.

6. Legen Sie unter Eigenschaften die Eigenschaft ShowStartingNode auf False fest.

Erstellen des zweiten Menüs

Das zweite Menü ist dynamisch, und seine Datenquelle verwendet nur den Teil der Siteübersichtsdatei, der programmgesteuert durch die Auswahl im ersten Menü bestimmt wird. Wie bereits zuvor erwähnt, soll die erste Ebene des Menüs statisch angezeigt werden; der Rest der Datei Web.sitemap soll jedoch dynamisch angezeigt werden.

So erstellen Sie das zweite Menü

1. Zeigen Sie die Datei Default.aspx in der Entwurfsansicht an, und ziehen Sie dann ein zweites Menu-Steuerelement unter das erste Menu-Steuerelement auf die Seite.

2. Legen Sie unter Eigenschaften die Eigenschaft Orientation auf Horizontal fest.

3. Klicken Sie auf das Smarttag im zweiten Menu-Steuerelement.

   Das Dialogfeld Menu-Aufgaben wird angezeigt.

4. Wählen Sie in der Dropdownliste Datenquelle auswählen den Eintrag Neue Datenquelle aus.

5. Klicken Sie im Assistenten zum Konfigurieren von Datenquellen auf Siteübersicht.

6. Übernehmen Sie den Standardnamen SiteMapDataSource2, und klicken Sie auf OK.

Konfigurieren der zweiten Datenquelle

In diesem Abschnitt konfigurieren Sie die Datenquelle so, dass nur ein bestimmter Abschnitt der Datei Web.sitemap ausgewählt wird. Beginnen Sie hierzu mit der standardmäßig ersten Kategorie im ersten Menü, dem Products-Abschnitt der Datei Web.sitemap. Geben Sie dann über die StartingNodeURL-Eigenschaft ein bestimmtes URL-Attribut innerhalb der Datei an.

So konfigurieren Sie den Anfangspunkt der zweiten Datenquelle

1. Wählen Sie SiteMapDataSource2 aus, und legen Sie die zugehörige StartingNodeURL-Eigenschaft auf Default.aspx?node=hardware fest.

2. Legen Sie StartingNodeOffset auf -1 fest.

3. Legen Sie ShowStartingNode auf False fest.

Hinzufügen von Code zum Koordinieren der Menüs

Wenn Sie das zweite Menü basierend auf dem Zustand des ersten Menüs steuern möchten, fangen Sie das MenuItemClick-Ereignis des ersten Menüs auf, und geben Sie die Ansicht der Siteübersichtsdatei des zweiten Menüs im Code an.

So koordinieren Sie die Menüs im Code

1. Zeigen Sie die Seite Default.aspx in der Entwurfsansicht an, und wählen Sie Menu1 aus.

2. Legen Sie unter Eigenschaften das MenuItemClick-Ereignis auf Menu1_MenuItemClick fest.

   In der Code-Behind-Datei für die Seite Default.aspx wird eine Methode mit dem Namen Menu1_MenuItemClick erstellt. Wenn Sie das Einzeldatei-Seitenmodell verwenden, wird sie in den <script>-Tags der ASPX-Seite erstellt.

3. Fügen Sie der Methode folgenden hervorgehobenen Code hinzu:

   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;
     }
   }
   

   Im vorangehenden Code wird das Klickereignis von Menu1 abgefangen. Anstatt zu einem Speicherort zu navigieren, bestimmen Sie den Inhalt des zweiten Menu-Steuerelements mithilfe des Werts. Passen Sie hierzu die StartingNodeUrl-Eigenschaft für das SiteMapDataSource-Steuerelement des zweiten Menu-Steuerelements entsprechend an.

4. Speichern Sie die Datei.

Testen der Menüs

Zum Testen der Interaktion zwischen den beiden Menüs klicken Sie auf Elemente des ersten Menüs, und beobachten Sie, ob sich das zweite Menü entsprechend ändert. Das zweite Menü ist dynamisch und stellt die dritte Ebene der Datei Web.sitemap dar.

So testen Sie das Menü

1. Drücken Sie STRG+F5, um die Seite auszuführen.

   Das erste Menü wird angezeigt, und das zweite Menü enthält die Menüelemente, die in der Datei Web.sitemap unter Products angegeben sind.

2. Klicken Sie im ersten Menü auf Services.

   Im zweiten Menü werden nun die dynamischen Menüs Consulting und Development angezeigt.

3. Klicken Sie auf Support.

   Im zweiten Menü werden die dynamischen Menüelemente Drivers, Manuals und Updates angezeigt.

Nächste Schritte

Das Menu-Steuerelement ermöglicht die einfache Erstellung von Navigationsmenüs und bietet programmgesteuerte Unterstützung für komplexere Szenarien. Sie können auch die folgenden Möglichkeiten ausprobieren:

• Anwenden eines Designs auf das Menu-Steuerelement. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anpassen einer Website mithilfe von Designs in Visual Studio.

• Vertiefen Ihrer Kenntnisse über Websitenavigation. Weitere Informationen finden Sie unter Übersicht über die ASP.NET-Sitenavigation.

• Verwenden eines Menu-Steuerelements auf einer Masterseite zur Bereitstellung der gesamten Websitenavigation auf einer einzelnen Seite. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen und Verwenden von ASP.NET-Masterseiten in Visual Web Developer.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Anzeigen eines Menüs auf Webseiten

Konzepte

Übersicht über das Menü-Steuerelement