Exemplarische Vorgehensweise: Anzeigen eines Menüs auf Webseiten

  • Artikel

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie ein ASP.NET-Menu-Steuerelement auf einer Webseite positioniert und konfiguriert wird.

Unabhängig von ihrer Komplexität verfügen alle Websites über ein Navigationsmenü. Mithilfe des Menu-Steuerelements von ASP.NET können Sie auf einfache Weise ein komplexes Navigationsmenü erstellen, ohne Code zu schreiben.

Das Menu-Steuerelement ermöglicht mehrere Anzeigeoptionen, einschließlich einer statischen Anzeige, in der das Menü vollständig angezeigt wird, und einer dynamischen Anzeige, in der Teile des Menüs angezeigt werden, wenn der Mauszeiger über das jeweils übergeordnete Menüelement bewegt wird. Das Steuerelement stellt auch eine Kombination von statischen und dynamischen Anzeigemodi bereit, bei denen statische Stammelemente mit untergeordneten dynamischen Menüelementen möglich sind.

Sie können das ASP.NET-Menu-Steuerelement im Designer mit statischen Links zu den Seiten konfigurieren, oder Sie können es automatisch an eine hierarchische Datenquelle, z. B. ein XmlDataSource-Steuerelement oder ein SiteMapDataSource-Steuerelement, binden.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Erstellen eines einfachen Menüs und Konfigurieren als statisches Menü mit Link zu Ihren Seiten

  • Erstellen eines komplexeren Menüs, das an eine XML-Datei mit dem Namen Web.sitemap gebunden ist

  • Ausrichten eines Menüs

  • Konfigurieren mehrerer Ebenen mit statischer und dynamischer Anzeige

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise 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. mithilfe des Verfahrens in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese Website verwenden und zum nächsten Abschnitt, "Erstellen eines einfachen Menüs", übergehen. 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 eines einfachen Menüs

Als Erstes platzieren Sie beim Erstellen eines Menüs ein Menu-Steuerelement auf Ihrer Seite.

So fügen Sie der Seite ein Menu-Steuerelement hinzu

  1. Wechseln Sie zur Datei Default.aspx, oder öffnen Sie diese, und schalten Sie dann in die Entwurfsansicht um.

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

In diesem Beispiel richten Sie das Menü horizontal statt vertikal aus.

So positionieren Sie das Menu-Steuerelement horizontal

  • Klicken Sie mit der rechten Maustaste auf das Menu-Steuerelement, klicken Sie auf Eigenschaften, und legen Sie dann Ausrichtung auf Horizontal fest.

Konfigurieren eines einfachen Menüs

In diesem Abschnitt definieren Sie die Menüelemente mithilfe des Menüelement-Editors.

So bearbeiten Sie Elemente des Menu-Steuerelements

  1. Klicken Sie mit der rechten Maustaste auf das Menu-Steuerelement, und klicken Sie dann auf Menüelemente bearbeiten.

    Der Menüelement-Editor wird angezeigt.

  2. Klicken Sie unter Elemente auf das Symbol Stammelement hinzufügen.

  3. Legen Sie unter Eigenschaften die Eigenschaft Text für das neue Element auf POS1 und die Eigenschaft NavigateURL auf Default.aspx fest.

  4. Klicken Sie unter Elemente auf das Symbol Stammelement hinzufügen.

  5. Legen Sie unter Eigenschaften die Eigenschaft Text auf Products und die Eigenschaft NavigateURL auf Products.aspx fest.

  6. Klicken Sie unter Elemente auf das Symbol Stammelement hinzufügen.

  7. Legen Sie unter Eigenschaften die Eigenschaft Text auf Services und die Eigenschaft NavigateURL auf Services.aspx fest.

  8. Klicken Sie auf OK.

Wenn Sie sich die Quelle für Default.aspx anschauen, sehen Sie, dass die Menüelemente und Links im Steuerelement deklarativ angegeben sind.

So erstellen Sie die Zielseiten

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

  2. Klicken Sie auf Web Form, nennen Sie die Datei Products.aspx, und klicken Sie dann auf Hinzufügen.

  3. Wiederholen Sie die vorherigen Schritte, und erstellen Sie eine Datei mit dem Namen Services.aspx.

Testen des Menüs

Wenn Sie die Seiten und das Menü erstellt haben, können Sie es ausprobieren.

So testen Sie das Menu-Steuerelement

  1. Klicken Sie im Projektmappen-Explorer auf Default.aspx, und drücken Sie dann STRG+F5, um die Seite Default.aspx auszuführen.

  2. Bewegen Sie den Mauszeiger über die Elemente; auf der Statusleiste des Browsers am unteren Rand der Seite (falls sichtbar) wird angezeigt , welche Seite verknüpft ist.

  3. Klicken Sie auf einen Link, um zu der entsprechenden Seite zu wechseln.

Erstellen eines an eine Siteübersicht gebundenen Menüs

Im vorherigen Abschnitt haben Sie ein einfaches statisches Menü erstellt, das innerhalb der Seite deklarativ konfiguriert war. In diesem Abschnitt bearbeiten Sie das Menu-Steuerelement nicht direkt, sondern binden es an eine Web.sitemap-Datei, die als XML-Datenquelle fungiert. Dadurch kann die Struktur des Menu-Steuerelements in einer separaten XML-Datei gespeichert werden, die einfach aktualisiert werden kann, ohne dass die Seite geändert oder der Designer verwendet werden muss.

Für dieses Beispiel verwenden Sie ein zweites Menu-Steuerelement.

So erstellen Sie ein zweites Menu-Steuerelement

  • Ziehen Sie ein zweites Menu-Steuerelement aus der Gruppe Navigation der Toolbox auf die Seite Default.aspx.

Als Nächstes benötigen Sie eine Web.sitemap-Datei, zu der eine Bindung hergestellt werden kann.

So erstellen Sie eine Siteübersichtsdatei

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

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen <Websitename> auf Siteübersicht.

  3. Klicken Sie auf Hinzufügen.

  4. Fügen Sie den folgenden XML-Code in die Datei Web.sitemap ein.

    Der XML-Code stellt die Struktur des Menüs dar. Geschachtelte Knoten werden zu untergeordneten Menüelementen von Menüelementen übergeordneter Knoten.

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

Binden an eine Siteübersicht

Nun können Sie eine Navigationsdatenquelle erstellen, die auf die Datei Web.sitemap zeigt, und Ihr Menu-Steuerelement daran binden.

So binden Sie ein Menu-Steuerelement an eine Siteübersicht

  1. Öffnen Sie die Datei Default.aspx, und wechseln Sie dann zur Entwurfsansicht.

  2. Klicken Sie auf das Smarttag, um das Dialogfeld Menu-Aufgaben anzuzeigen.

  3. Klicken Sie in der Dropdownliste Datenquelle auswählen im Dialogfeld Menu-Aufgaben auf Neue Datenquelle.

    Das Dialogfeld Assistent zum Konfigurieren von Datenquellen wird angezeigt.

  4. Klicken Sie auf Siteübersicht.

    Unter Eine ID für die Datenquelle angeben wird der Standardname SiteMapDataSource1 angezeigt.

  5. Klicken Sie auf OK.

Testen der Siteübersichtsbindung

Wenn Sie die Seiten und das Menü erstellt haben, können Sie es ausprobieren.

So testen Sie die Siteübersichtsbindung

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

  2. Bewegen Sie den Mauszeiger über das Menüelement Home des zweiten, vertikalen Menüs.

    Products und Services werden angezeigt.

  3. Bewegen Sie den Mauszeiger über Products.

    Hardware und Software werden angezeigt.

    Wenn Sie sich den Quellcode für die Seite Default.aspx anschauen, sehen Sie, dass die Elemente im Gegensatz zum ersten Menüelement nicht deklarativ angegeben sind. Stattdessen wird durch das Menu-Steuerelement auf die Datenquelle verwiesen.

Festlegen von statischen und dynamischen Ebenen

Das vertikale Menü, das Sie im vorigen Abschnitt erstellt haben, wird vollständig dynamisch angezeigt. Nur die oberste Ebene bleibt statisch. Mit dem Menu-Steuerelement können Sie angeben, ob das Menü dynamisch oder statisch sein soll, wenn der Mauszeiger auf einem Element verweilt. In diesem Abschnitt legen Sie die dynamischen und statischen Eigenschaften des Menu-Steuerelements fest.

So geben Sie an, dass zwei Ebenen des Menu-Steuerelements statisch sein sollen

  1. Klicken Sie in der Entwurfsansicht auf der Seite Default.aspx mit der rechten Maustaste auf das zweite Menu-Steuerelement, und klicken Sie dann auf Eigenschaften.

  2. Legen Sie StaticDisplayLevels auf 2 fest.

Testen des dynamischen Menüs

Wenn Sie die Seiten und das Menü erstellt haben, können Sie es ausprobieren.

So testen Sie das dynamische Menü

  • Drücken Sie STRG+F5, um die Seite Default.aspx auszuführen.

    Die ersten beiden Ebenen des Menüs werden angezeigt, die dritte Ebene ist jedoch dynamisch.

Nächste Schritte

Mithilfe des Menu-Steuerelements können Sie auf einfache Weise Navigationsmenüs erstellen. Sie können das Steuerelement für die dynamische oder statische Anzeige konfigurieren und es an eine XML-Datei für die Siteübersicht binden. Sie können auch die folgenden zusätzlichen Möglichkeiten ausprobieren:

Siehe auch

Aufgaben

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

Konzepte

Übersicht über das Menü-Steuerelement