Masterseiten und Sitenavigation (VB)

von Scott Mitchell

PDF herunterladen

Ein häufiges Merkmal von benutzerfreundlichen Websites ist, dass sie über ein konsistentes, websiteweites Seitenlayout und Navigationsschema verfügen. In diesem Tutorial erfahren Sie, wie Sie ein einheitliches Erscheinungsbild auf allen Seiten erstellen, die problemlos aktualisiert werden können.

Einführung

Ein häufiges Merkmal von benutzerfreundlichen Websites ist, dass sie über ein konsistentes, websiteweites Seitenlayout und Navigationsschema verfügen. ASP.NET 2.0 werden zwei neue Features eingeführt, die die Implementierung eines websiteweiten Seitenlayouts und eines Navigationsschemas erheblich vereinfachen: master Seiten und Websitenavigation. Gestaltungsvorlagen ermöglichen Entwicklern das Erstellen einer websiteweiten Vorlage mit bestimmten bearbeitbaren Regionen. 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 master Seite bereitstellen. Alle anderen Markups in der master Seite sind auf allen ASP.NET Seiten identisch, die die master-Seite verwenden. Dieses Modell ermöglicht Es Entwicklern, ein websiteweites Seitenlayout zu definieren und zu zentralisieren, wodurch es einfacher wird, ein einheitliches Erscheinungsbild auf allen Seiten zu erstellen, die leicht aktualisiert werden können.

Das Websitenavigationssystem bietet sowohl einen Mechanismus für Seitenentwickler zum Definieren einer Websiteübersicht als auch eine API für die programmgesteuerte Abfrage dieser Siteübersicht. Das neue Navigationsweb steuert Menu, TreeView und SiteMapPath, um die gesamte oder einen Teil der Websitekarte in einem allgemeinen Navigationsbenutzeroberflächenelement zu rendern. Wir verwenden den standardmäßigen Websitenavigationsanbieter, d. h. unsere Websiteübersicht wird in einer XML-formatierten Datei definiert.

Um diese Konzepte zu veranschaulichen und unsere Tutorials-Website nutzbarer zu machen, verwenden wir diese Lektion damit, ein websiteweites Seitenlayout zu definieren, eine Websiteübersicht zu implementieren und die Navigationsbenutzeroberfläche hinzuzufügen. Am Ende dieses Tutorials verfügen wir über ein ausgefeiltes Websitedesign zum Erstellen unserer Tutorialwebseiten.

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

Schritt 1: Erstellen der Gestaltungsvorlage

Der erste Schritt besteht darin, die seite master für die Website zu erstellen. Im Moment besteht unsere Website nur aus dem typisierten DataSet (Northwind.xsdim App_Code Ordner), den BLL-Klassen (ProductsBLL.vb, CategoriesBLL.vbusw., alle im App_Code Ordner), der Datenbank (NORTHWND.MDF, im 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 Tutorials veranschaulichten, da wir diese Beispiele in zukünftigen Tutorials ausführlicher untersuchen werden.

Abbildung 2: Die Dateien in unserem Projekt

Um eine master Seite 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 Gestaltungsvorlagentyp aus der Liste der Vorlagen aus, und nennen 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 websiteweite Seitenlayout hier auf der seite master. Sie können die Entwurfsansicht verwenden und beliebige Layout- oder Websteuerelemente hinzufügen, die Sie benötigen, oder Sie können das Markup manuell in der Quellansicht hinzufügen. Auf meiner master Seite verwende ich Cascading Stylesheets für die Positionierung und Stile mit den CSS-Einstellungen, die in der externen Datei Style.cssdefiniert sind. Sie können das unten gezeigte Markup nicht erkennen, die CSS-Regeln sind jedoch so definiert, dass der Inhalt der Navigation <div>absolut so positioniert ist, dass er auf der linken Seite angezeigt wird und eine feste Breite von 200 Pixel aufweist.

Site.master

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" 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 master Seite definiert sowohl das statische Seitenlayout als auch die Bereiche, die von den ASP.NET Seiten bearbeitet werden können, die die master Seite verwenden. Diese bearbeitbaren Inhaltsbereiche werden durch das ContentPlaceHolder-Steuerelement angegeben, das innerhalb des Inhalts <div>angezeigt werden kann. Unsere master Seite hat einen einzelnen ContentPlaceHolder (MainContent), aber master Seite kann mehrere ContentPlaceHolders aufweisen.

Nachdem das oben eingegebene Markup eingegeben wurde, wird beim Wechseln zur Entwurfsansicht das Layout der master Seite angezeigt. Alle ASP.NET Seiten, die diese master Seite verwenden, verfügen über dieses einheitliche Layout, mit der Möglichkeit, das Markup für den MainContent Bereich anzugeben.

Abbildung 4: Die Gestaltungsvorlage, wenn sie durch die Entwurfsansicht angezeigt wird (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 2: Hinzufügen einer Homepage zur Website

Nachdem die master Seite definiert ist, können wir die ASP.NET Seiten für die Website hinzufügen. Fügen Sie zunächst die Homepage unserer Website hinzu 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 in der Vorlagenliste die Option WebFormular aus, und nennen Sie die Datei Default.aspx. Aktivieren Sie auch das Kontrollkästchen "Master Seite auswählen".

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

Nachdem Sie auf die Schaltfläche OK geklickt haben, werden wir aufgefordert, auszuwählen, welche master Seite diese neue ASP.NET Seite verwenden soll. Während Sie mehrere master Seiten in Ihrem Projekt haben können, verfügen wir nur über eine.

Abbildung 6: Auswählen der Gestaltungsvorlage, die diese ASP.NET Seite verwenden sollte (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach dem Auswählen der seite master enthält die neue ASP.NET das folgende Markup:

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    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 master verwendete Seitendatei (MasterPageFile="~/Site.master"), und das Markup der ASP.NET Seite enthält ein Content-Steuerelement für jedes in der master Seite definierte ContentPlaceHolder-Steuerelement, wobei das Steuerelement ContentPlaceHolderID das Content-Steuerelement einem bestimmten ContentPlaceHolder zugeordnet. Im Content-Steuerelement platzieren Sie das Markup, das im entsprechenden ContentPlaceHolder angezeigt werden soll. Legen Sie das -Attribut der @Page Direktive Title auf Home fest, und fügen Sie dem Inhaltssteuerelement einige einladende Inhalte hinzu:

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    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>

Mit Title dem -Attribut in der @Page -Direktive können wir den Titel der Seite ASP.NET festlegen, obwohl das <title> Element in der master-Seite definiert ist. Wir können den Titel auch programmgesteuert mit Page.Titlefestlegen. Beachten Sie außerdem, dass die Verweise der master Seite auf Stylesheets (zStyle.css. B. ) automatisch aktualisiert werden, sodass sie in jeder ASP.NET Seite funktionieren, unabhängig davon, in welchem Verzeichnis sich die ASP.NET Seite im Verhältnis zur master Seite befindet.

Wenn Sie zur Entwurfsansicht wechseln, können Sie sehen, wie unsere Seite in einem Browser aussieht. Beachten Sie, dass in der Entwurfsansicht für die Seite ASP.NET, dass nur die bearbeitbaren Inhaltsbereiche bearbeitet werden können, das in der master Seite definierte Nicht-ContentPlaceHolder-Markup abgeblendet ist.

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

Wenn die Default.aspx Seite von einem Browser aufgerufen wird, führt die ASP.NET-Engine automatisch den master Seiteninhalt der Seite und den ASP zusammen. Net-Inhalt und rendert den zusammengeführten Inhalt in den endgültigen HTML-Code, der an den anfordernden Browser gesendet wird. Wenn der Inhalt der master Seite aktualisiert wird, werden alle ASP.NET Seiten, die diese master Seite verwenden, ihre Inhalte beim nächsten Anfordern mit dem inhalt der neuen master Seite umgehängt. Kurz gesagt, das master Seitenmodell ermöglicht es, eine einzelne Seitenlayoutvorlage (die master Seite) zu definieren, 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-Seitenstubs hinzuzufügen, die schließlich die verschiedenen Berichtsdemos enthalten. Es wird insgesamt mehr als 35 Demos geben. Anstatt also alle Stubseiten zu erstellen, erstellen wir einfach die ersten paar. Da es auch viele Kategorien von Demos geben wird, fügen Sie zur besseren Verwaltung der Demos einen Ordner für die Kategorien hinzu. Fügen Sie vorerst die folgenden drei Ordner hinzu:

• BasicReporting
• Filtering
• CustomFormatting

Fügen Sie schließlich neue Dateien hinzu, wie in der Projektmappen-Explorer in Abbildung 8 gezeigt. Wenn Sie jede Datei hinzufügen, denken Sie daran, das Kontrollkästchen "Master Seite auswählen" zu aktivieren.

Abbildung 8: Hinzufügen der folgenden Dateien

Schritt 2: Erstellen einer Site Map

Eine der Herausforderungen bei der Verwaltung einer Website, die aus mehr als einer Handvoll Seiten besteht, ist die Bereitstellung einer einfachen 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, wenn der Website neue Seiten hinzugefügt und vorhandene entfernt werden. Vor ASP.NET 2.0 waren Entwickler auf eigene Faust dabei, die Navigationsstruktur der Website zu erstellen, zu pflegen 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 entwicklern eine Möglichkeit, eine Websiteübersicht zu definieren und dann über eine programmgesteuerte API auf diese Informationen zuzugreifen. ASP.NET wird mit einem Siteübersichtsanbieter ausgeliefert, der erwartet, dass Siteübersichtsdaten 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 Methoden zum Serialisieren der Siteübersichtsinformationen zu unterstützen. Jeff Prosise's Artikel The SQL Site Map Provider You've Been Waiting For zeigt, wie Sie einen Siteübersichtsanbieter erstellen, der die Siteübersicht in einer SQL Server-Datenbank speichert.

Für dieses Tutorial verwenden wir jedoch den Standardmäßiganbieter für die Standortzuordnung, der im Lieferumfang von ASP.NET 2.0 enthalten ist. Klicken Sie zum Erstellen der Websiteübersicht einfach mit der rechten Maustaste auf den Projektnamen in der Projektmappen-Explorer, wählen Sie Neues Element hinzufügen und dann die Option Siteü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 Siteübersichtsdatei ist eine XML-Datei. Beachten Sie, dass Visual Studio IntelliSense für die Siteübersichtsstruktur bereitstellt. Die Siteübersichtsdatei muss den <siteMap> Knoten als Stammknoten aufweisen, der genau ein <siteMapNode> untergeordnetes Element enthalten muss. Dieses erste <siteMapNode> Element kann dann eine beliebige Anzahl absteigender <siteMapNode> Elemente enthalten.

Definieren Sie die Siteübersicht, um die Dateisystemstruktur nachzuahmen. Das heißt, fügen Sie ein <siteMapNode> Element für jeden der drei Ordner und untergeordnete <siteMapNode> Elemente für jede der ASP.NET Seiten in diesen Ordnern wie folgt hinzu:

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, d. h. 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 Websiteübersicht über die SiteMap-Klasse des .NET Framework verfügbar. Diese Klasse verfügt über eine CurrentNode -Eigenschaft, die Informationen zu dem Abschnitt zurückgibt, den der Benutzer derzeit besucht. Die RootNode Eigenschaft gibt den Stamm der Websiteübersicht (Home, in unserer Websiteübersicht) zurück. Sowohl die - als RootNode auch -CurrentNodeEigenschaft geben SiteMapNode-Instanzen zurück, die Eigenschaften wie ParentNode, ChildNodes, NextSibling, PreviousSiblingusw. aufweisen, die das Durchlaufen der Siteübersichtshierarchie ermöglichen.

Schritt 3: Anzeigen eines Menüs basierend auf der Websiteübersicht

Der Zugriff auf Daten in ASP.NET 2.0 kann programmgesteuert wie in ASP.NET 1.x oder deklarativ über die neuen Datenquellensteuerelemente erfolgen. 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 anderes Websteuerelement hinzu und binden es an das Datenquellensteuerelement. Um ein Websteuerelement an ein Datenquellensteuerelement zu binden, legen Sie einfach die Eigenschaft des Websteuerelements DataSourceID auf den Wert der Eigenschaft des Datenquellensteuerelements ID fest.

Um die Arbeit mit den Daten der Websiteübersicht zu unterstützen, enthält ASP.NET das SiteMapDataSource-Steuerelement, das es uns ermöglicht, ein Websteuerelement an die Websiteübersicht unserer Website zu binden. Die beiden Websteuerelemente TreeView und Menu werden häufig verwendet, um eine Navigations-Benutzeroberfläche bereitzustellen. Um die Siteübersichtsdaten an eines dieser beiden Steuerelemente zu binden, fügen Sie der Seite einfach eine SiteMapDataSource zusammen mit einem TreeView- oder Menu-Steuerelement hinzu, dessen DataSourceID Eigenschaft entsprechend festgelegt ist. Beispielsweise könnten wir der seite master 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 feineres Maß an Kontrolle über den ausgegebenen HTML-Code können wir das SiteMapDataSource-Steuerelement wie folgt an das Repeater-Steuerelement binden:

<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 Hierarchie der Siteübersicht jeweils eine Ebene nacheinander zurück, beginnend mit dem Stammknoten der Websiteübersicht (Home, in unserer Websiteübersicht), dann mit der nächsten Ebene (Grundlegende Berichterstellung, Filtern von Berichten und angepasste Formatierung) usw. Beim Binden der SiteMapDataSource an einen Repeater werden die zurückgegebene erste Ebene aufgelistet und für jede SiteMapNode instance in dieser ItemTemplate ersten Ebene instanziiert. Um auf eine bestimmte Eigenschaft von SiteMapNodezuzugreifen, können wir verwendenEval(propertyName), wodurch wir die eigenschaften SiteMapNodeUrl und Title für das HyperLink-Steuerelement abrufen.

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 Siteübersichtsknoten (Grundlegende Berichterstellung, Filterung von Berichten und angepasste Formatierungen) umfassen die zweite Ebene der zu renderenden Siteübersicht, nicht die erste. Dies liegt daran, dass die SiteMapDataSource-Eigenschaft ShowStartingNode auf False festgelegt ist, was dazu führt, dass SiteMapDataSource den Stammknoten der Siteübersicht umgeht und stattdessen die zweite Ebene in der Siteübersichtshierarchie zurückgibt.

Um die untergeordneten Elemente für die Grundlegenden Berichte, Filterberichte und angepasste Formatierung SiteMapNode anzuzeigen, können wir dem ursprünglichen Repeater einen weiteren Repeater ItemTemplatehinzufügen. Dieser zweite Repeater wird wie folgt an die SiteMapNode Eigenschaft des ChildNodes instance 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="<%# CType(Container.DataItem,
             SiteMapNode).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 zu folgendem Markup (einige Markups wurden aus Gründen der Kürze 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>

Bei Verwendung von CSS-Stilen, die aus Rachel Andrews Buch The CSS Anthology: 101 Essential Tips, Tricks, & Hacks ausgewählt wurden, werden die <ul> Elemente und <li> so formatiert, dass das Markup die folgende visuelle Ausgabe erzeugt:

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

Dieses Menü befindet sich in der master Seite und ist an die in Web.sitemapdefinierte Standortübersicht gebunden, was bedeutet, dass jede Änderung der Websiteübersicht sofort auf allen Seiten widerspiegelt wird, die die Site.master master Seite 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 Ansichtsstatus wird von Steuerelementen verwendet, um ihren programmgesteuert geänderten Zustand über Postbacks hinweg zu speichern, z. B. die an ein Datenwebsteuerelement gebundenen Daten. Während der Ansichtszustand ermöglicht, dass Informationen über Postbacks hinweg gespeichert werden können, erhöht er die Größe des Markups, das an den Client gesendet werden muss, und kann zu einer starken Seitenaufblähung führen, wenn sie nicht genau überwacht wird. Datenwebsteuerelemente, insbesondere gridView, sind besonders dafür bekannt, einer Seite Dutzende zusätzlicher Kilobyte Markup hinzuzufügen. Während eine solche Erhöhung für Breitband- oder Intranetbenutzer vernachlässigbar ist, kann der Ansichtsstatus für DFÜ-Benutzer mehrere Sekunden zur Hin- und Rückfahrt hinzufügen.

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 auch die Seitenablaufverfolgung aktivieren, um die Ansichtsstatuszuordnung anzuzeigen, die von den einzelnen Steuerelementen auf der Seite verwendet wird. Die Ansichtsstatusinformationen werden in einem ausgeblendeten Formularfeld namens __VIEWSTATEserialisiert, das sich in einem <div> Element direkt nach dem öffnenden <form> Tag befindet. Der Ansichtsstatus wird nur beibehalten, wenn ein Webformular verwendet wird. wenn Ihre ASP.NET Seite keinen <form runat="server"> in der deklarativen Syntax enthält, gibt es kein ausgeblendetes __VIEWSTATE Formularfeld im gerenderten Markup.

Das __VIEWSTATE vom master Seite generierte Formularfeld fügt dem generierten Markup der Seite etwa 1.800 Bytes hinzu. Diese zusätzliche Aufblähung ist in erster Linie auf das Repeater-Steuerelement zurückzuführen, da der Inhalt des SiteMapDataSource-Steuerelements zum Anzeigen des Zustands beibehalten wird. Während zusätzliche 1.800 Bytes möglicherweise nicht viel zu begeistern scheinen, kann der Ansichtszustand bei Verwendung einer GridView mit vielen Feldern und Datensätzen leicht um den Faktor 10 oder mehr anschwellen.

Der Ansichtszustand kann auf Seiten- oder Steuerelementebene deaktiviert werden, indem die EnableViewState -Eigenschaft auf Falsefestgelegt wird, wodurch die Größe des gerenderten Markups reduziert wird. Da der Ansichtszustand für ein Datenwebsteuerelement die Daten, die an das Datenwebsteuerelement gebunden sind, postbacksübergreifend beibehalten, müssen die Daten beim Deaktivieren des Ansichtszustands für ein Datenwebsteuerelement an 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 Datenwebsteuerelemente bei Bedarf jedoch bei jedem Postback an ihr Datenquellensteuerelement rebiniert.

Um den Ansichtszustand der Seite zu reduzieren, legen wir die Eigenschaft des EnableViewState Repeater-Steuerelements auf fest False. Dies kann über die Eigenschaftenfenster im Designer oder deklarativ in der Quellansicht erfolgen. Nach dieser Änderung 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 Größe des gerenderten Ansichtszustands der Seite auf nur noch 52 Bytes geschrumpft, was eine Ersparnis von 97 % bei der Größe des Ansichtszustands ermöglicht! In den Tutorials in dieser Reihe deaktivieren wir standardmäßig den Ansichtsstatus der Datenwebsteuerelemente, um die Größe des gerenderten Markups zu verringern. In den meisten Beispielen wird die EnableViewState -Eigenschaft auf False festgelegt, und dies geschieht ohne Erwähnung. Der einzige Zeitansichtsstatus wird in Szenarien erläutert, in denen er aktiviert werden muss, damit das Datenwebsteuerelement seine erwartete Funktionalität bereitstellen kann.

Schritt 4: Hinzufügen der Breadcrumb-Navigation

Um die master Seite abzuschließen, fügen wir jeder Seite ein Breadcrumb-Navigations-UI-Element hinzu. Die Breadcrumb zeigt Benutzern schnell ihre aktuelle Position in der Websitehierarchie an. Das Hinzufügen eines Breadcrumbs in ASP.NET 2.0 ist einfach das Hinzufügen eines SiteMapPath-Steuerelements zur Seite. Es ist kein Code erforderlich.

Fügen Sie für unsere Website dieses Steuerelement zum Header <div>hinzu:

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

Das Breadcrumb zeigt die aktuelle Seite, die der Benutzer in der Siteübersichtshierarchie besucht, sowie die "Vorgänger" des Site map-Knotens bis zum Stamm (Home, in unserer Websiteübersicht).

Abbildung 12: Die Breadcrumb zeigt die aktuelle Seite und die zugehörigen Vorgänger in der Hierarchie der Websiteübersicht an.

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

Die Tutorials auf unserer Website sind in verschiedene Kategorien Grundlegende Berichterstellung, Filterung, benutzerdefinierte Formatierung usw. mit einem Ordner für jede Kategorie und den entsprechenden Tutorials als ASP.NET Seiten innerhalb dieses Ordners unterteilt. Darüber hinaus enthält jeder Ordner eine Default.aspx Seite. Auf dieser Standardseite zeigen wir alle Tutorials für den aktuellen Abschnitt an. Das heißt, für den Default.aspxBasicReporting im Ordner hätten wir Links zu SimpleDisplay.aspx, DeclarativeParams.aspxund ProgrammaticParams.aspx. Auch hier können wir die SiteMap -Klasse und ein Datenwebsteuerelement verwenden, um diese Informationen basierend auf der in Web.sitemapdefinierten Siteübersicht anzuzeigen.

Lassen Sie uns eine nicht sortierte Liste erneut mithilfe eines Repeaters anzeigen, aber dieses Mal zeigen wir den Titel und die Beschreibung der Tutorials an. Da das Markup und der Code, um dies zu erreichen, für jede Default.aspx Seite wiederholt werden müssen, können wir diese UI-Logik in einem Benutzersteuerelement kapseln. Erstellen Sie einen Ordner auf der Website namens UserControls , fügen Sie diesem ein neues Element vom Typ Webbenutzersteuerelement mit dem Namen SectionLevelTutorialListing.ascxhinzu, und fügen Sie das folgende Markup hinzu:

Abbildung 13: Hinzufügen eines neuen Webbenutzersteuerelements UserControls zum Ordner (Klicken Sie, um das bild in voller Größe anzuzeigen)

SectionLevelTutorialListing.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    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.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

Im vorherigen Repeater-Beispiel haben wir die SiteMap Daten deklarativ an den Repeater gebunden. Das SectionLevelTutorialListing Benutzersteuerelement tut dies jedoch programmgesteuert. Page_Load Im Ereignishandler wird überprüft, ob die URL dieser Seite einem Knoten in der Siteübersicht zugeordnet ist. Wenn dieses Benutzersteuerelement auf einer Seite ohne entsprechenden <siteMapNode> Eintrag verwendet wird, wird zurückgegebenNothing, SiteMap.CurrentNode und es werden keine Daten an den Repeater gebunden. Vorausgesetzt, wir verfügen über einen CurrentNode, binden wir seine ChildNodes Auflistung an den Repeater. Da unsere Websiteübersicht so eingerichtet ist, dass die Default.aspx Seite in jedem Abschnitt der übergeordnete Knoten aller Tutorials in diesem Abschnitt ist, zeigt dieser Code Links und Beschreibungen aller Tutorials des Abschnitts an, wie im Screenshot unten gezeigt.

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

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

Abbildung 15: Die Grundlegenden Tutorials für die Berichterstellung sind aufgelistet (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Zusammenfassung

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

Nachdem die Datenzugriffsebene und die Geschäftslogikebene abgeschlossen sind und ein einheitliches Seitenlayout und die Websitenavigation definiert sind, können wir mit der Untersuchung gängiger Berichtsmuster beginnen. In den nächsten drei Tutorials werden grundlegende Berichterstellungsaufgaben behandelt, die aus der BLL abgerufene Daten in den Steuerelementen GridView, DetailsView und FormView anzeigen.

Viel Spaß beim Programmieren!

Weitere Informationen

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

• Übersicht über ASP.NET Gestaltungsvorlagen
• Gestaltungsvorlagen in ASP.NET 2.0
• ASP.NET 2.0-Entwurfsvorlagen
• Übersicht über die ASP.NET-Websitenavigation
• Untersuchen der Websitenavigation von ASP.NET 2.0
• ASP.NET 2.0 Websitenavigationsfeatures
• Grundlegendes zu ASP.NET Ansichtsstatus
• Gewusst wie: Aktivieren der Ablaufverfolgung für eine ASP.NET-Seite
• benutzersteuerelemente ASP.NET

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderen Dank an

Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitende Prüfer für dieses Tutorial waren Liz Shulok, Dennis Patterson und Hilton Giesenow. Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

Zurück