Masterseiten und Seitennavigation (C#)

2025-05-03

Ein gängiges Merkmal für benutzerfreundliche Websites ist, dass sie über ein einheitliches, websiteweites Seitenlayout und Navigationsschema verfügen. In diesem Lernprogramm wird erläutert, wie Sie ein einheitliches Aussehen und Verhalten auf allen Seiten erstellen können, die problemlos aktualisiert werden können.

Einleitung

Ein gängiges Merkmal für benutzerfreundliche Websites ist, dass sie über ein einheitliches, websiteweites Seitenlayout und Navigationsschema verfügen. ASP.NET 2.0 führt zwei neue Funktionen ein, die die Implementierung eines website-weiten Seitenlayouts und eines Navigationsschemas erheblich vereinfachen: Masterseiten und Websitenavigation. Masterseiten ermöglichen es Entwicklern, eine webseitenweite Vorlage mit bestimmten bearbeitbaren Bereichen zu erstellen. Diese Vorlage kann dann auf ASP.NET Seiten auf der Website angewendet werden. Solche ASP.NET-Seiten müssen nur Inhalte für die angegebenen bearbeitbaren Bereiche der Masterseite bereitstellen. Alle anderen Markups auf der Masterseite sind identisch für alle ASP.NET-Seiten, die die Masterseite verwenden. Mit diesem Modell können Entwickler ein websiteweites Seitenlayout definieren und zentralisieren, wodurch es einfacher wird, ein einheitliches Aussehen und Verhalten auf allen Seiten zu erstellen, die problemlos aktualisiert werden können.

Das Websitenavigationssystem bietet sowohl einen Mechanismus für Seitenentwickler zum Definieren einer Sitemap als auch eine API für diese Sitemap, die programmgesteuert abgefragt werden kann. Das neue Navigationsweb steuert das Menü, die Strukturansicht und SiteMapPath, wodurch das Rendern aller oder eines Teils der Websitekarte in einem allgemeinen Navigationsbenutzeroberflächenelement erleichtert wird. Wir verwenden den Standardmäßigen Websitenavigationsanbieter, was bedeutet, dass unsere Websitezuordnung in einer XML-formatierten Datei definiert wird.

Um diese Konzepte zu veranschaulichen und unsere Lernprogramme-Website nutzbarer zu machen, verbringen wir diese Lektion mit der Definition eines websiteweiten Seitenlayouts, der Implementierung einer Websitekarte und dem Hinzufügen der Navigationsbenutzeroberfläche. Am Ende dieses Lernprogramms haben wir ein ansprechendes Websitedesign zum Erstellen unserer Lernprogrammwebseiten.

Abbildung 1: Das Endergebnis dieses Lernprogramms (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 1: Erstellen der Masterseite

Der erste Schritt besteht darin, die Masterseite für die Website zu erstellen. Jetzt besteht unsere Website nur aus dem Typed DataSet (Northwind.xsdim App_Code Ordner), den BLL-Klassen (ProductsBLL.cs, CategoriesBLL.csusw., alle im App_Code Ordner), der Datenbank (NORTHWND.MDFim App_Data Ordner), der Konfigurationsdatei (Web.config) und einer CSS-Stylesheetdatei (Styles.css). Ich habe diese Seiten und Dateien bereinigt, die die Verwendung von DAL und BLL aus den ersten beiden Lernprogrammen demonstrieren, da wir diese Beispiele in zukünftigen Lernprogrammen genauer wiederverwenden werden.

Die Dateien in unserem Projekt

Abbildung 2: Die Dateien in unserem Projekt

Um eine Masterseite zu erstellen, klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen und wählen Sie "Neues Element hinzufügen" aus. Wählen Sie dann den Masterseitentyp aus der Vorlagenliste aus und benennen Sie ihn Site.master.

Abbildung 3: Hinzufügen einer neuen Gestaltungsvorlage zur Website (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Definieren Sie das globale Seitenlayout hier auf der Masterseite. Sie können die Entwurfsansicht verwenden und beliebige Layout- oder Websteuerelemente hinzufügen, oder Sie können das Markup manuell in der Quellansicht hinzufügen. In meiner Masterseite verwende ich Cascading Style Sheets für die Positionierung und Formatierungen mit den CSS-Einstellungen, die in der externen Datei Style.css definiert sind. Sie können zwar nicht aus dem unten gezeigten Markup erkennen, die CSS-Regeln werden so definiert, dass der Inhalt der Navigation <div>absolut positioniert ist, sodass es links angezeigt wird und eine feste Breite von 200 Pixel aufweist.

Site.master

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                 runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

Eine Gestaltungsvorlage definiert sowohl das statische Seitenlayout als auch die Bereiche, die von den ASP.NET Seiten bearbeitet werden können, die die Gestaltungsvorlage verwenden. Diese bearbeitbaren Inhaltsbereiche werden durch das ContentPlaceHolder-Steuerelement angegeben, das innerhalb des Inhalts <div>angezeigt werden kann. Unsere Gestaltungsvorlage weist einen einzelnen ContentPlaceHolder (MainContent) auf, die Gestaltungsvorlage verfügt jedoch möglicherweise über mehrere ContentPlaceHolders.

Wenn das oben eingegebene Markup angezeigt wird, zeigt der Wechsel zur Entwurfsansicht das Layout der Gestaltungsvorlage an. Alle ASP.NET Seiten, die diese Gestaltungsvorlage verwenden, verfügen über dieses einheitliche Layout, mit der Möglichkeit, das Markup für den MainContent Bereich anzugeben.

Abbildung 4: Die Masterseite in der Entwurfsansicht (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 2: Hinzufügen einer Homepage zur Website

Nachdem die Masterseite definiert wurde, können wir nun die ASP.NET Seiten für die Website hinzufügen. Beginnen wir mit dem Hinzufügen der Homepage unserer Website Default.aspx. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie "Neues Element hinzufügen" aus. Wählen Sie die Webformularoption aus der Vorlagenliste aus, und benennen Sie die Datei Default.aspx. Aktivieren Sie auch das Kontrollkästchen "Masterseite auswählen".

Abbildung 5: Hinzufügen eines neuen Webformulars, Aktivieren des Kontrollkästchens "Masterseite auswählen" (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach dem Klicken auf die Schaltfläche "OK" werden wir aufgefordert, auszuwählen, welche Gestaltungsvorlage diese neue ASP.NET Seite verwenden soll. Sie können zwar mehrere Gestaltungsvorlagen in Ihrem Projekt haben, aber wir haben nur eine.

Abbildung 6: Wählen Sie die Gestaltungsvorlage für diese ASP.NET Seite aus (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach dem Auswählen der Gestaltungsvorlage enthalten die neuen ASP.NET Seiten das folgende Markup:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

In der @Page Direktive gibt es einen Verweis auf die verwendete Gestaltungsvorlagendatei (MasterPageFile="~/Site.master"), und das Markup der ASP.NET Seite enthält ein Inhaltssteuerelement für jedes der in der Gestaltungsvorlage definierten ContentPlaceHolder-Steuerelemente, wobei das ContentPlaceHolderID Inhaltssteuerelement einem bestimmten ContentPlaceHolder zugeordnet wird. Das Inhaltssteuerelement ist der Ort, an dem Sie das Markup platzieren, das im entsprechenden ContentPlaceHolder angezeigt werden soll. Legen Sie das Attribut der @Page Direktive auf "Start" fest, und fügen Sie dem Inhaltssteuerelement einige Begrüßungsinhalte Title hinzu:

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials that
illustrate some of the new data access and databinding features in
ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that
demonstrate:</p>

    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

Das Title Attribut in der @Page Direktive ermöglicht es uns, den Titel der Seite von der ASP.NET-Seite festzulegen, obwohl das <title> Element in der Masterseite definiert ist. Wir können den Titel auch programmgesteuert mithilfe von Page.Title. Beachten Sie außerdem, dass die Verweise der Gestaltungsvorlage auf Stylesheets (z Style.css. B. ) automatisch aktualisiert werden, sodass sie auf jeder ASP.NET Seite funktionieren, unabhängig davon, in welchem Verzeichnis sich die ASP.NET Seite relativ zur Gestaltungsvorlage befindet.

Wenn Sie zur Entwurfsansicht wechseln, können wir sehen, wie unsere Seite in einem Browser aussieht. Beachten Sie, dass in der Entwurfsansicht für die ASP.NET-Seite nur die bearbeitbaren Inhaltsbereiche bearbeitet werden können und das nicht zum ContentPlaceHolder gehörende Markup, das in der Masterseite definiert ist, ausgegraut ist.

Abbildung 7: Die Entwurfsansicht für die ASP.NET Seite zeigt sowohl die bearbeitbaren als auch nicht bearbeitbaren Bereiche an (Klicken, um das Bild in voller Größe anzuzeigen)

Wenn die Default.aspx Seite von einem Browser besucht wird, führt die ASP.NET-Engine automatisch den Inhalt der Masterseite und den ASP.NET-Inhalt zusammen und rendert die zusammengeführten Inhalte in den endgültigen HTML-Code, der an den anfordernden Browser gesendet wird. Wenn der Inhalt der Gestaltungsvorlage aktualisiert wird, werden alle ASP.NET-Seiten, die diese Gestaltungsvorlage verwenden, bei der nächsten Anforderung mit dem Inhalt der neuen Gestaltungsvorlage zusammengeführt. Kurz gesagt, ermöglicht das Gestaltungsvorlagenmodell, dass eine einzelne Seitenlayoutvorlage (die Gestaltungsvorlage) definiert werden kann, deren Änderungen sofort auf der gesamten Website widergespiegelt werden.

Hinzufügen zusätzlicher ASP.NET Seiten zur Website

Nehmen wir uns einen Moment Zeit, um der Website zusätzliche ASP.NET Seitenstumbs hinzuzufügen, die schließlich die verschiedenen Berichterstellungsdemos enthalten. Insgesamt werden mehr als 35 Demos vorhanden sein, anstatt alle Stubseiten zu erstellen, erstellen wir einfach die ersten. Da es auch viele Kategorien von Demos gibt, um die Demos besser zu verwalten, fügen Sie einen Ordner für die Kategorien hinzu. Fügen Sie jetzt die folgenden drei Ordner hinzu:

BasicReporting
Filtering
CustomFormatting

Fügen Sie schließlich neue Dateien hinzu, wie im Projektmappen-Explorer in Abbildung 8 dargestellt. Denken Sie daran, das Kontrollkästchen "Masterseite auswählen" zu aktivieren, wenn Sie jede Datei hinzufügen.

Hinzufügen der folgenden Dateien

Abbildung 8: Hinzufügen der folgenden Dateien

Schritt 2: Erstellen einer Websitekarte

Eine der Herausforderungen beim Verwalten einer Website, die aus mehr als einer Handvoll Seiten besteht, ist eine einfache Möglichkeit für Besucher, durch die Website zu navigieren. Zunächst muss die Navigationsstruktur der Website definiert werden. Als Nächstes muss diese Struktur in navigierbare Benutzeroberflächenelemente wie Menüs oder Breadcrumbs übersetzt werden. Schließlich muss dieser gesamte Prozess beibehalten und aktualisiert werden, da der Website neue Seiten hinzugefügt und vorhandene entfernt werden. Vor ASP.NET 2.0 waren Entwickler eigenständig, um die Navigationsstruktur der Website zu erstellen, sie beizubehalten und in navigierbare Benutzeroberflächenelemente zu übersetzen. Mit ASP.NET 2.0 können Entwickler jedoch das sehr flexible integrierte Websitenavigationssystem nutzen.

Das ASP.NET 2.0-Websitenavigationssystem bietet eine Möglichkeit für einen Entwickler, eine Websitekarte zu definieren und dann über eine programmgesteuerte API auf diese Informationen zuzugreifen. ASP.NET wird mit einem Websitekartenanbieter ausgeliefert, der erwartet, dass Websitekartendaten in einer XML-Datei gespeichert werden, die auf eine bestimmte Weise formatiert ist. Da das Websitenavigationssystem jedoch auf dem Anbietermodell basiert, kann es erweitert werden, um alternative Möglichkeiten zum Serialisieren der Websiteübersichtsinformationen zu unterstützen. Jeff Prosises Artikel , der SQL Site Map Provider, auf den Sie gewartet haben , zeigt, wie Sie einen Websiteübersichtsanbieter erstellen, der die Websitekarte in einer SQL Server-Datenbank speichert; Eine weitere Möglichkeit besteht darin, einen Websitezuordnungsanbieter basierend auf der Dateisystemstruktur zu erstellen.

In diesem Lernprogramm verwenden wir jedoch den Standardmäßigen Websitekartenanbieter, der mit ASP.NET 2.0 ausgeliefert wird. Um die Websitekarte zu erstellen, klicken Sie einfach mit der rechten Maustaste auf den Projektnamen im Projektmappen-Explorer, wählen Sie "Neues Element hinzufügen" und dann die Option "Websiteübersicht" aus. Behalten Sie den Namen bei Web.sitemap , und klicken Sie auf die Schaltfläche "Hinzufügen".

Abbildung 9: Hinzufügen einer Websiteübersicht zu Ihrem Projekt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Die Sitemap-Datei ist eine XML-Datei. Beachten Sie, dass Visual Studio IntelliSense für die Websitezuordnungsstruktur bereitstellt. Die Sitemap-Datei muss den <siteMap> Knoten als Stammknoten aufweisen, der genau ein <siteMapNode> untergeordnetes Element enthalten muss. Dieses erste <siteMapNode> Element kann dann eine beliebige Anzahl von untergeordneten <siteMapNode> Elementen enthalten.

Definieren Sie die Sitemap, um die Struktur des Dateisystems nachzubilden. Fügen Sie also ein <siteMapNode> Element für jeden der drei Ordner und untergeordnete <siteMapNode> Elemente für jede der ASP.NET Seiten in diesen Ordnern hinzu, z. B.:

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
         description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
         title="Format Colors"
         description="Format the grid s colors based
           on the underlying data." />
        <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
          title="Custom Content in a GridView"
          description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
        <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
          description="Illustrates using a FormView for a
           highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
          title="Summary Data in Footer"
          description="Display summary data in the grids footer." />
      </siteMapNode>

  </siteMapNode>

</siteMap>

Die Websiteübersicht definiert die Navigationsstruktur der Website, eine Hierarchie, die die verschiedenen Abschnitte der Website beschreibt. Jedes <siteMapNode> Element in Web.sitemap stellt einen Abschnitt in der Navigationsstruktur der Website dar.

Abbildung 10: Die Websiteübersicht stellt eine hierarchische Navigationsstruktur dar (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

ASP.NET macht die Struktur der Websitekarte über die SiteMap-Klasse von .NET Framework verfügbar. Diese Klasse verfügt über eine CurrentNode Eigenschaft, die Informationen über den Abschnitt zurückgibt, den der Benutzer gerade besucht. Die RootNode Eigenschaft gibt den Stamm der Websitekarte zurück (Start, in unserer Websitekarte). Sowohl die CurrentNode- als auch die RootNode-Eigenschaften geben SiteMapNode-Instanzen zurück, die Eigenschaften wie ParentNode, ChildNodes, NextSibling, PreviousSibling und so weiter aufweisen, die es ermöglichen, die Sitemap-Hierarchie zu durchlaufen.

Der Zugriff auf Daten in ASP.NET 2.0 kann programmgesteuert erfolgen, z. B. in ASP.NET 1.x oder deklarativ über die neuen Datenquellensteuerelemente. Es gibt mehrere integrierte Datenquellensteuerelemente wie das SqlDataSource-Steuerelement für den Zugriff auf relationale Datenbankdaten, das ObjectDataSource-Steuerelement, für den Zugriff auf Daten aus Klassen und andere. Sie können sogar eigene benutzerdefinierte Datenquellensteuerelemente erstellen.

Die Datenquellensteuerelemente dienen als Proxy zwischen Ihrer ASP.NET Seite und den zugrunde liegenden Daten. Um die abgerufenen Daten eines Datenquellensteuerelements anzuzeigen, fügen wir der Seite in der Regel ein weiteres Websteuerelement hinzu und binden es an das Datenquellensteuerelement. Wenn Sie ein Websteuerelement an ein Datenquellensteuerelement binden möchten, legen Sie einfach die Eigenschaft des DataSourceID Websteuerelements auf den Wert der Eigenschaft des Datenquellensteuerelements ID fest.

Um die Arbeit mit den Daten der Websitekarte zu unterstützen, enthält ASP.NET das SiteMapDataSource-Steuerelement, mit dem wir ein Websteuerelement an die Websitekarte unserer Website binden können. Zwei Websteuerelemente, das TreeView und das Menü, werden häufig verwendet, um eine Navigations-Benutzeroberfläche bereitzustellen. Um die Sitemap-Daten an eines dieser beiden Steuerelemente zu binden, fügen Sie ganz einfach eine SiteMapDataSource zusammen mit einem TreeView- oder Menüsteuerelement hinzu, dessen DataSourceID-Eigenschaft entsprechend eingestellt ist. Beispielsweise könnten wir der Masterseite mithilfe des folgenden Markups ein Menüsteuerelement hinzufügen.

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

Für ein genaueres Maß an Kontrolle über den ausgegebenen HTML-Code können wir das SiteMapDataSource-Steuerelement an das Repeater-Steuerelement binden, z. B.:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome"
         NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu"
          DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server"
                    NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

    <asp:SiteMapDataSource ID="SiteMapDataSource1"
      runat="server" ShowStartingNode="false" />
</div>

Das SiteMapDataSource-Steuerelement gibt die Sitemap-Hierarchie jeweils eine Ebene zurück, beginnend mit dem Stammknoten des Sitemaps (Start, in unserem Sitemap), dann der nächsten Ebene (Basisberichte, Berichtsfilterung und angepasste Formatierung) usw. Beim Binden der SiteMapDataSource an einen Repeater durchläuft sie die erste zurückgegebene Ebene und instanziiert die ItemTemplate für jede SiteMapNode Instanz auf dieser ersten Ebene. Um auf eine bestimmte Eigenschaft des SiteMapNode Steuerelements zuzugreifen, können wir Eval(propertyName) nutzen, um die SiteMapNode- und Url-Eigenschaften jedes Title für das HyperLink-Steuerelement abzurufen.

Im obigen Repeater-Beispiel wird das folgende Markup gerendert:

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
     Customized Formatting</a>
</li>

Diese Knoten der Sitemap (Grundlegende Berichterstellung, Filterberichte und angepasste Formatierung) umfassen die zweite Ebene der gerade gerenderten Sitemap, nicht die erste. Dies liegt daran, dass die Eigenschaft des SiteMapDataSource ShowStartingNode auf "False" festgelegt ist, wodurch der SiteMapDataSource den Stamm-Site-Map-Knoten umgeht und stattdessen mit der zweiten Ebene in der Site-Map-Hierarchie beginnt.

Um die untergeordneten Elemente für grundlegende Berichte, Filterberichte und angepasste Formatierungen SiteMapNode anzuzeigen, können wir dem ursprünglichen Repeater ItemTemplate einen weiteren Repeater hinzufügen. Dieser zweite Repeater wird wie folgt an die Eigenschaft der SiteMapNode Instanz ChildNodes gebunden:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server"
             NavigateUrl='<%# Eval("Url") %>'>
             <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
                DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl='<%# Eval("Url") %>'>
                         <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

Diese beiden Repeater führen zum folgenden Markup (einige Markups wurden aus Platzgründen entfernt):

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">
            Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">
            Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">
            Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
      Customized Formatting</a>
    ...
</li>

Die CSS-Formatvorlagen aus Rachel Andrews Buch "The CSS Anthology: 101 Essential Tips, Tricks, & Hacks" gestalten die <ul> und <li> Elemente so, dass das Markup die folgende visuelle Ausgabe erzeugt:

Ein Menü, das aus zwei Repeatern und einigen CSS verfasst wurde

Abbildung 11: Ein Menü, das aus zwei Repeatern und einigen CSS besteht

Dieses Menü befindet sich auf der Masterseite und ist an die in der Web.sitemap definierten Websitekarte gebunden, was bedeutet, dass alle Änderungen an der Websitekarte sofort auf allen Seiten widergespiegelt werden, die die Masterseite Site.master verwenden.

Deaktivieren von ViewState

Alle ASP.NET-Steuerelemente können optional ihren Zustand im Ansichtszustand beibehalten, der als ausgeblendetes Formularfeld im gerenderten HTML-Code serialisiert wird. Der Ansichtszustand wird von Steuerelementen verwendet, um ihren programmgesteuerten Zustand über Postbacks hinweg zu merken, z. B. die Daten, die an ein Daten-Websteuerelement gebunden sind. Während der Ansichtszustand das Speichern von Informationen bei Postbacks zulässt, erhöht er die Größe des Markups, das an den Client gesendet werden muss, und kann zu einem starken Aufblähen der Seite führen, wenn er nicht genau überwacht wird. Datenwebsteuerelemente, insbesondere gridView, sind besonders bekannt für das Hinzufügen von Dutzenden zusätzlicher Kilobytes an Markup zu einer Seite. Während eine solche Erhöhung für Breitband- oder Intranetbenutzer vernachlässigbar sein kann, kann der View-State die Rundreise für DFÜ-Benutzer um mehrere Sekunden verlängern.

Um die Auswirkungen des Ansichtszustands anzuzeigen, besuchen Sie eine Seite in einem Browser, und zeigen Sie dann die von der Webseite gesendete Quelle an (wechseln Sie in Internet Explorer zum Menü "Ansicht", und wählen Sie die Option "Quelle" aus). Sie können die Seitenablaufverfolgung auch aktivieren, um die ansichtszustandszuordnung anzuzeigen, die von jedem der Steuerelemente auf der Seite verwendet wird. Die Ansichtsstatusinformationen werden in einem ausgeblendeten Formularfeld namens __VIEWSTATEserialisiert, das sich unmittelbar nach dem öffnenden <div> Tag in einem <form> Element befindet. Der Ansichtszustand wird nur beibehalten, wenn ein Webformular verwendet wird. wenn Ihre ASP.NET Seite keine deklarative Syntax enthält <form runat="server"> , wird kein ausgeblendetes __VIEWSTATE Formularfeld im gerenderten Markup vorhanden sein.

Das durch die Gestaltungsvorlage generierte __VIEWSTATE-Formularfeld fügt dem Markup der generierten Seite ungefähr 1.800 Byte hinzu. Diese zusätzliche Aufblähung ist hauptsächlich auf das Repeater-Steuerelement zurückzuführen, da der Inhalt des SiteMapDataSource-Steuerelements im ViewState beibehalten wird. Während zusätzliche 1.800 Bytes vielleicht nicht so viel erscheinen, kann der View State bei Verwendung einer GridView mit vielen Feldern und Datensätzen leicht um einen Faktor von 10 oder mehr anwachsen.

Der Ansichtszustand kann auf Seiten- oder Steuerelementebene deaktiviert werden, indem die EnableViewState-Eigenschaft auf false gesetzt wird, wodurch die Größe des gerenderten Markups reduziert wird. Da der Ansichtszustand für ein Datenwebsteuerelement die An das Datenwebsteuerelement gebundenen Daten über Postbacks hinweg speichert, muss beim Deaktivieren des Ansichtszustands für ein Datenwebsteuerelement die Daten an jedes und jedes Postback gebunden sein. In ASP.NET Version 1.x fiel diese Verantwortung auf die Schultern des Seitenentwicklers; mit ASP.NET 2.0 werden die Daten-Websteuerelemente, wenn nötig, erneut an das Datenquellensteuerelement gebunden.

Um den Ansichtszustand der Seite zu reduzieren, legen wir die Eigenschaft des EnableViewState Repeater-Steuerelements auf false. Dies kann über das Eigenschaftenfenster im Designer oder deklarativ in der Quellansicht erfolgen. Nachdem Sie diese Änderung vorgenommen haben, sollte das deklarative Markup des Repeaters wie folgt aussehen:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

Nach dieser Änderung ist die gerenderte Ansichtszustandsgröße der Seite auf nur 52 Byte zurückgegangen, 97% Einsparungen bei der Ansichtszustandsgröße! In den Lernprogrammen in dieser Reihe deaktivieren wir standardmäßig den Ansichtszustand der Datenwebsteuerelemente, um die Größe des gerenderten Markups zu verringern. In den meisten Beispielen wird die EnableViewState-Eigenschaft festgelegt false, und das ohne Erwähnung. Der einzige Zeitansichtszustand wird in Szenarien erläutert, in denen er aktiviert werden muss, damit das Datenwebsteuerelement seine erwartete Funktionalität bereitstellt.

Um die Master-Seite abzuschließen, fügen wir jeder Seite ein Breadcrumb-Navigations-Element hinzu. Das Breadcrumb zeigt Benutzern schnell ihre aktuelle Position innerhalb der Websitehierarchie an. Das Hinzufügen eines Breadcrumbs in ASP.NET 2.0 ist einfach: Fügen Sie einfach ein SiteMapPath-Steuerelement zur Seite hinzu, und es ist kein Code erforderlich.

Fügen Sie für unsere Website dieses Steuerelement zur Kopfzeile <div>hinzu:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

Der Navigationspfad zeigt die aktuelle Seite an, die der Benutzer in der Sitemap-Hierarchie besucht, sowie die "Vorfahren" des Sitemap-Knotens, bis hin zum Stamm (Start, in unserer Sitemap).

Das Breadcrumb zeigt die aktuelle Seite und deren Vorgänger in der Websitezuordnungshierarchie an.

Abbildung 12: Das Breadcrumb zeigt die aktuelle Seite und ihre Vorgänger in der Websitezuordnungshierarchie an.

Schritt 5: Hinzufügen der Standardseite für jeden Abschnitt

Die Lernprogramme auf unserer Website sind in verschiedene Kategorien "Grundlegende Berichterstellung", "Filterung", "Benutzerdefinierte Formatierung" usw. mit einem Ordner für jede Kategorie und den entsprechenden Lernprogrammen als ASP.NET Seiten innerhalb dieses Ordners unterteilt. Darüber hinaus enthält jeder Ordner eine Default.aspx Seite. Auf dieser Standardseite werden nun alle Tutorials für den aktuellen Abschnitt angezeigt. Das heißt, für den Default.aspx im BasicReporting-Ordner haben wir Links zu SimpleDisplay.aspx, DeclarativeParams.aspx und ProgrammaticParams.aspx. Hier können wir die SiteMap Klasse und ein Websteuerelement verwenden, um diese Informationen basierend auf der in Web.sitemap definierten Sitemap anzuzeigen.

Wir zeigen noch einmal eine ungeordnete Liste mit einem Repeater an, aber diesmal zeigen wir den Titel und die Beschreibung der Tutorials an. Da das Markup und der Code dazu für jede Default.aspx Seite wiederholt werden müssen, können wir diese Ui-Logik in einem Benutzersteuerelement kapseln. Erstellen Sie einen Ordner in der aufgerufenen Website UserControls , und fügen Sie diesem ein neues Element vom Typ Web User Control mit dem Namen SectionLevelTutorialListing.ascxhinzu, und fügen Sie das folgende Markup hinzu:

Abbildung 13: Hinzufügen eines neuen Webbenutzersteuerelements zum Ordner (UserControls Bilds mit voller Größe klicken)

SectionLevelTutorialListing.ascx

<%@ Control Language="CS" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.cs"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class UserControls_SectionLevelTutorialListing : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // If SiteMap.CurrentNode is not null,
        // bind CurrentNode ChildNodes to the GridView
        if (SiteMap.CurrentNode != null)
        {
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes;
            TutorialList.DataBind();
        }
    }
}

Im vorherigen Repeater-Beispiel binden wir die SiteMap Daten deklarativ an den Repeater. SectionLevelTutorialListing Das Benutzersteuerelement führt dies jedoch programmgesteuert aus. Page_Load Im Ereignishandler wird eine Überprüfung durchgeführt, um sicherzustellen, dass die URL dieser Seite einem Knoten in der Websitekarte zugeordnet ist. Wenn dieses Benutzersteuerelement auf einer Seite verwendet wird, die keinen entsprechenden <siteMapNode> Eintrag enthält, wird SiteMap.CurrentNode zurückgegeben und keine Daten werden an den Repeater gebunden. Vorausgesetzt, wir haben ein CurrentNode, binden wir seine ChildNodes-Kollektion an den Repeater. Da unsere Websiteübersicht so eingerichtet ist, dass die Default.aspx Seite in jedem Abschnitt der übergeordnete Knoten aller Lernprogramme in diesem Abschnitt ist, zeigt dieser Code Links zu und Beschreibungen aller Lernprogramme des Abschnitts an, wie im folgenden Screenshot dargestellt.

Nachdem dieser Repeater erstellt wurde, öffnen Sie die Default.aspx Seiten in den einzelnen Ordnern, wechseln Sie zur Entwurfsansicht, und ziehen Sie einfach die Benutzersteuerung aus dem Projektmappen-Explorer auf die Entwurfsoberfläche, auf der die Tutorialliste angezeigt werden soll.

Abbildung 14: Das Benutzersteuerelement wurde hinzugefügt Default.aspx (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 15: Die grundlegenden Lernprogramme zur Berichterstellung sind aufgelistet (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Nachdem die Sitemap definiert und die Gestaltungsvorlage abgeschlossen ist, verfügen wir nun über ein einheitliches Seitenlayout und ein Navigationsschema für unsere datenbezogenen Lernprogramme. Unabhängig davon, wie viele Seiten wir zu unserer Website hinzufügen, ist das Aktualisieren des websiteweiten Seitenlayouts oder der Websitenavigationsinformationen ein schneller und einfacher Vorgang, da diese Informationen zentralisiert werden. Insbesondere werden die Seitenlayoutinformationen in der Gestaltungsvorlage Site.master und in der Websitekarte Web.sitemapdefiniert. Wir mussten keinen Code schreiben , um diesen websiteweiten Seitenlayout- und Navigationsmechanismus zu erreichen, und wir behalten die vollständige WYSIWYG-Designerunterstützung in Visual Studio bei.

Nachdem sie die Datenzugriffsschicht und die Geschäftslogikebene abgeschlossen und ein einheitliches Seitenlayout und eine Websitenavigation definiert haben, können wir mit der Untersuchung allgemeiner Berichtsmuster beginnen. In den nächsten drei Lernprogrammen befassen wir uns mit grundlegenden Berichterstellungsaufgaben, die Daten anzeigen, die aus der BLL in den Steuerelementen GridView, DetailsView und FormView abgerufen wurden.

Glückliche Programmierung!

Weitere Informationen

Weitere Informationen zu den in diesem Lernprogramm erläuterten Themen finden Sie in den folgenden Ressourcen:

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

Besonderer Dank an

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Leitende Prüfer für dieses Lernprogramm waren Liz Shulok, Dennis Patterson und Hilton Giesenow. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn ja, schicken Sie mir eine Nachricht an mitchell@4GuysFromRolla.com.

Zurück Weiter

Freigeben über

Masterseiten und Webseitennavigation (C#)