Navigation und Masterseiten

Hierarchie-Icon In diesem Thema wollen wir uns mit zwei wichtigen Themen beschäftigen, die vor allem bei der Erstellung von kompletten Websites und komplexeren Webanwendungen interessant sind. Dabei geht es hier zum einen um die Seitennavigation, welche nur einmal definiert wird und an mehreren Stellen in verschiedenen Formen eingebunden werden kann, und zum anderen um die sogenannten Masterseiten, wodurch ASP.NET uns eine Art Template-Engine anbietet. Dazu jedoch später mehr.

In den folgenden Beispielen werden wir verschiedene Navigationsleisten vorstellen. Hierfür bietet uns ASP.NET bereits einige vorgefertigte Webserver-Steuerelemente an. Diese greifen im Regelfall auf ein Webserver-Dokument zu, welches die Sitemap der (kompletten) Website enthält. Bei diesem Dokument, mit dem Namen Web.sitemap, handelt es sich um ein XML-Dokument. Als Wurzelelement wird siteMap verwendet. Dort wird über das Attribut xmlns, der Namensraum des Dokuments festgelegt. Als Unterelemente werden siteMapNode-Elemente angegeben, welche nach Belieben verschachtelt werden können. Üblicherweise werden im siteMapNode-Element die Attribute url (Pfad zur Seite), title (anzuzeigender Name) und description (anzuzeigender Tool-Tip-Text) angegeben. In den folgenden vier Beispielen verwenden wir die folgende Sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/" title="ASP.NET Beispiel" description="ASP.NET Beispiel">
      <siteMapNode url="~/Default.aspx" title="Startseite" description="Startseite" />
      <siteMapNode url="~/DirA/" title="Verzeichnis A" description="Verzeichnis A">
        <siteMapNode url="~/DirA/Page1.aspx" title="Seite A.1" description="Seite A.1" />
        <siteMapNode url="~/DirA/Page2.aspx" title="Seite A.2" description="Seite A.2" />
        <siteMapNode url="~/DirA/Page3.aspx" title="Seite A.3" description="Seite A.3" />
      </siteMapNode>
      <siteMapNode url="~/DirB/" title="Verzeichnis B" description="Verzeichnis B">
        <siteMapNode url="~/DirB/Page1.aspx" title="Seite B.1" description="Seite B.1" />
        <siteMapNode url="~/DirB/Page2.aspx" title="Seite B.2" description="Seite B.2" />
        <siteMapNode url="~/DirB/Page3.aspx" title="Seite B.3" description="Seite B.3" />
      </siteMapNode>
    </siteMapNode>
</siteMap>

Übrigens: Das Kürzel ~/ dient zur Pfadangabe und bezieht sich auf das Root-Verzeichnis der Anwendung / des Projekts.

Klassisches Menü

Unter einem klassischen Menü versteht man ein Menü, welches vertikal oder horizontal positioniert ist und üblicherweise nur 1 Navigationsebene (auf einmal) anzeigt. Ein solches Menü kann mittels des Webserver-Steuerelements Menu realisiert werden. Um das Steuerelement nutzen zu können, müssen wir diesem eine Datenquelle zuweisen. Hierfür benötigen wir noch das Webserver-Steuerelement SiteMapDataSource. Die ID, welche diesem Element zugewiesen wird, muss im Steuerelement Menu der Eigenschaft DataSourceID zugewiesen werden. Für das Element SiteMapDataSource gibt es zwei wichtige Eigenschaften: ShowStartingNode und StartingNodeOffset. ShowStartingNode legt fest, ob das Wurzelelement bzw. der sogenannte Startknoten im Menü angezeigt werden soll oder nicht. Die Eigenschaft StartingNodeOffset gibt die Hierarchieebene an, ab welcher das Menü „starten“ soll. Im Webserver-Steuerelement Menu wird über die Eigenschaft Orientation festgelegt, ob das Menü horizontal (Horizontal) oder vertikal (Vertical) angeordnet ist. Im Beispiel wird zudem StaticEnableDefaultPopOutImage auf false gesetzt, um das Standard Erweiterungssymbol zu deaktivieren. Da die Eigenschaft StaticPopOutImageUrl, welche die URL des Erweiterungssymbols festlegt, nicht gesetzt ist, wird kein Symbol angezeigt. Um für die verschiedenen Ebenen unterschiedliche bzw. individuelle Style festzulegen, können wir der Eigenschaft LevelMenuItemStyles MenuItemStyle-Steuerelemente unterordnen. Jedes MenuItemStyle-Element repräsentiert dabei eine Ebene / Hierarchie.

<form runat="server">
	<asp:SiteMapDataSource ID="SitemapData" ShowStartingNode="false" runat="server" />
	<asp:Menu DataSourceID="SitemapData" Orientation="Vertical" StaticEnableDefaultPopOutImage="false" runat="server">
		<LevelMenuItemStyles>
			<asp:MenuItemStyle BackColor="Blue" ForeColor="White" Width="150" BorderColor="Red" BorderWidth="1" BorderStyle="Solid" HorizontalPadding="10" VerticalPadding="10" />
			<asp:MenuItemStyle BackColor="LightBlue" ForeColor="White" Width="100" HorizontalPadding="10" VerticalPadding="10" />
		</LevelMenuItemStyles>
	</asp:Menu>
</form>

Baumansicht

Eine Baumansicht in ASP.NET kann mittels des Steuerelements asp:TreeView dargestellt werden. Eine Baumansicht zeigt mehrere Ebenen auf einmal an. Die Zuordnung zur Sitemap wird auch hier über das Element SiteMapDataSource und die Eigenschaft DataSourceID durchgeführt. Die Eigenschaft NodeIndent legt die sogenannte Einzugsgröße in Pixeln fest. Das Festlegen von Anzeige-Stylen ist auch hier möglich: Für die Baumansicht werden jedoch die Elemente TreeNodeStyle und die Eigenschaft LevelStyles verwendet.

<form runat="server">
	<asp:SiteMapDataSource ID="SitemapData" ShowStartingNode="false" runat="server" />
	<asp:TreeView DataSourceID="SitemapData" NodeIndent="25" runat="server">
		<LevelStyles>
			<asp:TreeNodeStyle BackColor="Blue" ForeColor="White" Width="150" BorderColor="Red" BorderWidth="1" BorderStyle="Solid" HorizontalPadding="10" VerticalPadding="10" />
			<asp:TreeNodeStyle BackColor="LightBlue" ForeColor="White" Width="125" HorizontalPadding="10" VerticalPadding="10" />
		</LevelStyles>
	</asp:TreeView>
</form>

Navigationspfad

Der Navigationspfad (auch bekannt als Breadcrumb-Navigation oder Brotkrümel-Navigation) ist eine spezielle Navigation, welche den aktuellen Standpunkt in der Sitemap anzeigt und als eine Leiste dargestellt wird. Das Webserver-Steuerelement SiteMapPath, welches einen Navigationspfad repräsentiert, besitzt unter anderem die Eigenschaften PathDirection, PathSeparator und RenderCurrentNodeAsLink. PathDirection legt die Reihenfolge des Navigationspfads fest: von links nach rechts (RootToCurrent) oder von rechts nach links (CurrentToRoot). PathSeparator legt das Zeichen bzw. die Zeichenkette fest, welche zwischen den Pfadelementen angezeigt werden soll. RenderCurrentNodeAsLink erwartet als Parameter einen Wert vom Typ bool. Wird hier true festgelegt, so wird das aktuelle Element ebenfalls als Link angezeigt. Das Element SiteMapPath benötigt kein SiteMapDataSource-Element. Im Beispiel wird dieses Element lediglich für das Steuerelement Menu benötigt.

<form runat="server">
	<asp:SiteMapPath RenderCurrentNodeAsLink="true" ID="SitemapPath" runat="server" /><br /><br />
	<asp:SiteMapDataSource ID="SitemapData" StartingNodeOffset="0" ShowStartingNode="false" runat="server" />
	<asp:Menu DataSourceID="SitemapData" Orientation="Vertical" StaticEnableDefaultPopOutImage="false" runat="server">
		<LevelMenuItemStyles>
			<asp:MenuItemStyle BackColor="Blue" ForeColor="White" Width="150" BorderColor="Red" BorderWidth="1" BorderStyle="Solid" HorizontalPadding="10" VerticalPadding="10" />
			<asp:MenuItemStyle BackColor="LightBlue" ForeColor="White" Width="100" HorizontalPadding="10" VerticalPadding="10" />
		</LevelMenuItemStyles>
	</asp:Menu>
</form>

Masterseiten

Mit Masterseiten haben Sie die Möglichkeit, das HTML-Layout nur einmal (in der Masterseite) zu definieren, diese Seite auf den sogenannten Inhaltsseiten einzubinden und über Platzhalter Informationen in die Seite einzufügen. Dieses Feature erlaubt uns, ein durchgängiges Layout leicht erstellen zu können. Von Vorteil ist dies vor allem dann, wenn das Layout geändert werden soll: Im Idealfall muss nur die Masterseite (und CSS-Skripte) geändert werden, da die Platzhalter gleich bleiben und somit sich an den Inhaltsseiten nichts direkt ändert. Resultat der Masterseiten ist also zum einen die einfache Möglichkeit einer Layout-Änderung und zum anderen natürlich ein wesentlich kürzerer Code, da der HTML-Code für Seitenbestandteile wie Kopfzeile, Navigation und Fußzeile nur einmal definiert ist. PHP kennt so eine Funktion, welche der Masterseiten ähnlich ist, nicht, jedoch wird hier oft ein einfacher Trick angewendet: Es gibt die Dateien header.php und footer.php, welche von allen Inhaltsseiten inkludiert werden, wovon der Inhalt der Seite zwischen den include-Befehlen notiert wird. Enthält die Seite mehrere Platzhalter, so ist dies nicht mehr so einfach möglich, was hingegen in ASP.NET ziemlich leicht realisierbar ist.

Eine Masterseite ist eine Datei mit der Endung .Master. Zudem besitzt eine Masterseite auch eine Code-Behind-Datei (Endung .Master.cs) sowie eine vom Designer generierte Datei (Endung .Master.designer.cs). Im Gegensatz zu den bisherigen Seiten enthält die Masterseite nicht die Page-Direktive, sondern die Master-Direktive. Auch hier werden für gewöhnlich die Attribute Language, AutoEventWireup, CodeBehind und Inherits festgelegt. Der Code der Seite selbst kann, so wie andere Seiten auch, HTML-Elemente, HTML-Server-Steuerelemente und Webserver-Steuerelemente enthalten. Um einen Platzhalter zu definieren, notieren wir in der Masterseite das Webserver-Steuerelement ContentPlaceHolder. Über das Attribut ID muss diesem eine ID zugewiesen werden.

In der Inhaltsseite selbst wird weiterhin die Page-Direktive verwendet. Dort werden jedoch noch zusätzlich die Attribute Title (Titel der Seite, dieser wird in das title-Element eingesetzt) und MasterPageFile (Pfad mit Dateinamen zur Masterseite) angegeben. Um einen Platzhalter mit Inhalt zu füllen, wird das Webserver-Steuerelement Content angegeben. Über das Attribut ContentPlaceHolderID wird die Referenz zum Platzhalter festgelegt.

Masterseite:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Website.master.cs" Inherits="HWhBsp.Masterseiten.Website" %>

<!DOCTYPE html>
<html>
    <head runat="server">
        <title>Masterseite - Masterseiten - ASP.NET Code-Beispiel</title>

        <meta charset="utf-8" />

        <meta name="robots" content="noindex,nofollow" />
        <meta name="publisher" content="Homepage-Webhilfe" />

        <style type="text/css">
            body
            {
                width: 800px;
                font-family: Arial;
            }
            
            #SitemapPath
            {
                display: block;
                margin: 5px 5px 10px;
                padding: 8px;
                background-color: red;
                font-size: 13px;
                color: white;
            }
            #SitemapPath a
            {
                color: white;
                text-decoration: none;
            }

            #PageMenu
            {
                float: left;
                width: 150px;
                margin: 5px;
                font-size: 14px;
            }

            #PageContent
            {
                float: right;
                width: 600px;
                font-size: 15px;
            }
        </style>
    </head>
    
    <body>
        <form runat="server">
            <asp:SiteMapPath RenderCurrentNodeAsLink="true" ID="SitemapPath" runat="server" />
            <asp:SiteMapDataSource ID="SitemapData" StartingNodeOffset="0" ShowStartingNode="false" runat="server" />
            <div id="PageMenu">
                <asp:Menu ID="SitemapMenu" SkipLinkText="" DataSourceID="SitemapData" Orientation="Vertical" StaticEnableDefaultPopOutImage="false" runat="server">
                    <LevelMenuItemStyles>
                        <asp:MenuItemStyle BackColor="Blue" ForeColor="White" Width="150" BorderColor="Red" BorderWidth="1" BorderStyle="Solid" HorizontalPadding="10" VerticalPadding="10" />
                        <asp:MenuItemStyle BackColor="LightBlue" ForeColor="White" Width="100" HorizontalPadding="10" VerticalPadding="10" />
                    </LevelMenuItemStyles>
                </asp:Menu>
            </div>
            <asp:Panel ID="PageContent" runat="server">
                <asp:ContentPlaceHolder ID="ContentPlaceholder" runat="server" />
            </asp:Panel>
        </form>
    </body>
</html>

Einzelseite (Default.aspx):

<%@ Page Title="Startseite - Masterseiten - ASP.NET Code-Beispiel" Language="C#" AutoEventWireup="true" MasterPageFile="Website.Master" CodeBehind="Default.aspx.cs" Inherits="HWhBsp.Masterseiten.Default" %>

<asp:Content ContentPlaceHolderID="ContentPlaceholder" runat="server">
    <div style="padding: 10px; text-align: center;">
        <h1 style="margin: 0px; font-size: 30px;">Startseite</h1>
        <p>
            ...
        </p>
    </div>
</asp:Content>

Wichtig: Um den Titel der Seite über die Inhaltsseite setzen zu können, muss das head-Element in der Masterseite vorhanden sein und zudem das Attribut runat mit dem Wert server besitzen. Wie Sie vielleicht gesehen haben, wird auf der Inhaltsseite kein HTML-Code (auch kein form-Element) außerhalb von den asp:Content-Elementen platziert. Dies ist ebenfalls Vorschrift.