Erstellen eines websiteweiten Layouts mit Masterseiten (VB)

von Scott Mitchell

PDF herunterladen

In diesem Tutorial werden die Grundlagen master Seite erläutert. Was sind master Seiten, wie erstellt man eine master Seite, was sind Inhaltsplatzhalter, wie erstellt man eine ASP.NET Seite, die eine master Seite verwendet, wie sich das Ändern der master Seite automatisch in den zugehörigen Inhaltsseiten widerspiegelt usw.

Einführung

Ein Attribut einer gut gestalteten Website ist ein konsistentes seitenweites Seitenlayout. Beispiel : www.asp.net Website. Zum Zeitpunkt dieses Schreibens verfügt jede Seite oben und unten auf der Seite über denselben Inhalt. Wie Abbildung 1 zeigt, wird ganz oben auf jeder Seite ein grauer Balken mit einer Liste von Microsoft-Communitys angezeigt. Darunter befinden sich das Websitelogo, die Liste der Sprachen, in die die Website übersetzt wurde, und die Hauptabschnitte: Start, Erste Schritte, Lernen, Downloads usw. Ebenso enthält das Ende der Seite Informationen über Werbung auf www.asp.net, eine Copyright-Erklärung und einen Link zur Datenschutzerklärung.

Abbildung 01: Die www.asp.net Website verwendet ein einheitliches Erscheinungsbild für alle Seiten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Ein weiteres Attribut einer gut gestalteten Website ist die Leichtigkeit, mit der das Erscheinungsbild der Website geändert werden kann. Abbildung 1 zeigt die www.asp.net Homepage ab März 2008, aber bis zur Veröffentlichung dieses Tutorials hat sich das Aussehen und Verhalten möglicherweise geändert. Vielleicht werden die Menüelemente oben erweitert, um einen neuen Abschnitt für das MVC-Framework zu enthalten. Oder vielleicht wird ein radikal neues Design mit verschiedenen Farben, Schriftarten und Layouts enthüllt. Das Anwenden solcher Änderungen auf die gesamte Website sollte ein schneller und einfacher Prozess sein, der keine Änderung der Tausenden von Webseiten erfordert, aus denen die Website besteht.

Das Erstellen einer websiteweiten Seitenvorlage in ASP.NET ist durch die Verwendung von master Seiten möglich. Kurz gesagt, eine master-Seite ist ein spezieller Typ von ASP.NET Seite, der das Markup definiert, das für alle Inhaltsseiten sowie für Regionen gilt, die auf Inhaltsseitenseite angepasst werden können. (Eine Inhaltsseite ist eine ASP.NET Seite, die an die master Seite gebunden ist.) Wenn das Layout oder die Formatierung einer master Seite geändert wird, wird die Ausgabe aller Inhaltsseiten ebenfalls sofort aktualisiert, was das Anwenden websiteweiter Darstellungsänderungen so einfach macht, wie das Aktualisieren und Bereitstellen einer einzelnen Datei (nämlich die master Seite).

Dies ist das erste Tutorial in einer Reihe von Tutorials, in denen die Verwendung von master-Seiten erläutert wird. Im Verlauf dieser Tutorialreihe werden folgende Schritte ausgeführt:

• Untersuchen sie das Erstellen master Seiten und der zugehörigen Inhaltsseiten,
• Besprechen Sie eine Vielzahl von Tipps, Tricks und Fallen,
• Identifizieren von häufigen master Seitenfehlern und Untersuchen von Problemumgehungen
• Erfahren Sie, wie Sie von einer Inhaltsseite aus auf die seite master zugreifen und umgekehrt.
• Erfahren Sie, wie Sie die master Seite einer Inhaltsseite zur Laufzeit angeben, und
• Weitere erweiterte master-Seitenthemen.

Diese Tutorials sind darauf ausgerichtet, kurz zu sein, und bieten Schritt-für-Schritt-Anweisungen mit vielen Screenshots, um Sie visuell durch den Prozess zu führen. Jedes Tutorial ist in C#- und Visual Basic-Versionen verfügbar und enthält einen Download des vollständigen verwendeten Codes.

Dieses einführungstutorial beginnt mit einem Blick auf master Grundlagen der Seite. Wir besprechen, wie master Seiten funktionieren, sehen uns das Erstellen einer master-Seite und zugeordneter Inhaltsseiten mithilfe von Visual Web Developer an und sehen, wie Änderungen an einer master Seite sofort in ihren Inhaltsseiten widerzuspiegeln sind. Jetzt geht‘s los!

Grundlegendes zur Funktionsweise von Gestaltungsvorlagen

Das Erstellen einer Website mit einem konsistenten websiteweiten Seitenlayout erfordert, dass jede Webseite zusätzlich zum benutzerdefinierten Inhalt ein gemeinsames Formatierungsmarkup ausgibt. Während beispielsweise jeder Tutorial- oder Forenbeitrag auf www.asp.net über einen eigenen eindeutigen Inhalt verfügt, rendert jede dieser Seiten auch eine Reihe allgemeiner <div> Elemente, die die Abschnittslinks der obersten Ebene anzeigen: Start, Erste Schritte, Lernen usw.

Es gibt eine Vielzahl von Techniken zum Erstellen von Webseiten mit einem konsistenten Aussehen und Verhalten. Ein naiver Ansatz besteht darin, das allgemeine Layoutmarkup einfach zu kopieren und in alle Webseiten einzufügen, aber dieser Ansatz hat eine Reihe von Nachteilen. Zunächst einmal müssen Sie bei jedem Erstellen einer neuen Seite daran denken, den freigegebenen Inhalt zu kopieren und in die Seite einzufügen. Solche Kopier- und Einzufügenvorgänge sind fehlerreif, da Sie versehentlich nur eine Teilmenge des freigegebenen Markups in eine neue Seite kopieren können. Darüber hinaus macht dieser Ansatz das Ersetzen des vorhandenen websiteweiten Erscheinungsbilds durch ein neues zu einem echten Problem, da jede einzelne Seite auf der Website bearbeitet werden muss, um das neue Erscheinungsbild zu verwenden.

Vor ASP.NET Version 2.0 haben Seitenentwickler häufig allgemeines Markup in Benutzersteuerelemente platziert und dann diese Benutzersteuerelemente zu jeder einzelnen Seite hinzugefügt. Dieser Ansatz erforderte, dass der Seitenentwickler sich daran erinnerte, die Benutzersteuerelemente manuell zu jeder neuen Seite hinzuzufügen, war jedoch für einfachere websiteweite Änderungen zulässig, da beim Aktualisieren des allgemeinen Markups nur die Benutzersteuerelemente geändert werden mussten. Leider haben Visual Studio .NET 2002 und 2003 - die Versionen von Visual Studio zum Erstellen ASP.NET 1.x-Anwendungen - Benutzersteuerelemente in der Entwurfsansicht als graue Felder gerendert. Daher hatten Seitenentwickler, die diesen Ansatz verwendeten, keine WYSIWYG-Entwurfszeitumgebung.

Die Mängel bei der Verwendung von Benutzersteuerelementen wurden in ASP.NET Version 2.0 und Visual Studio 2005 mit der Einführung von master Seiten behoben. Eine master Seite ist ein spezieller Typ von ASP.NET Seite, die sowohl das websiteweite Markup als auch die Regionen definiert, in denen zugeordnete Inhaltsseiten ihr benutzerdefiniertes Markup definieren. Wie wir in Schritt 1 sehen werden, werden diese Bereiche durch ContentPlaceHolder-Steuerelemente definiert. Das ContentPlaceHolder-Steuerelement bezeichnet einfach eine Position in der Steuerelementhierarchie der master Seite, an der benutzerdefinierter Inhalt von einer Inhaltsseite eingefügt werden kann.

Hinweis

Die kernigen Konzepte und Funktionen von master Seiten haben sich seit ASP.NET Version 2.0 nicht geändert. Visual Studio 2008 bietet jedoch Entwurfszeitunterstützung für geschachtelte master Seiten, ein Feature, das in Visual Studio 2005 fehlte. In einem zukünftigen Tutorial wird die Verwendung geschachtelter master Seiten erläutert.

Abbildung 2 zeigt, wie die seite master für www.asp.net aussehen könnte. Beachten Sie, dass die master Seite das allgemeine websiteweite Layout - das Markup oben, unten und rechts auf jeder Seite - sowie einen ContentPlaceHolder in der Mitte links definiert, in dem sich der eindeutige Inhalt für jede einzelne Webseite befindet.

Abbildung 02: Eine Gestaltungsvorlage definiert das Site-Wide Layout und die bearbeitbaren Regionen auf einer Inhaltsseite basierend auf einer Inhaltsseite

Nachdem eine master Seite definiert wurde, kann sie über das Häkchen eines Kontrollkästchens an neue ASP.NET Seiten gebunden werden. Diese ASP.NET Seiten – die als Inhaltsseiten bezeichnet werden – enthalten ein Content-Steuerelement für jedes ContentPlaceHolder-Steuerelement der master Seite. Wenn die Inhaltsseite über einen Browser aufgerufen wird, erstellt die ASP.NET-Engine die Steuerungshierarchie der master Seite und fügt die Steuerelementhierarchie der Inhaltsseite an die entsprechenden Stellen ein. Diese kombinierte Steuerelementhierarchie wird gerendert, und der resultierende HTML-Code wird an den Browser des Endbenutzers zurückgegeben. Folglich gibt die Inhaltsseite sowohl das allgemeine Markup aus, das in ihrer master Seite außerhalb der ContentPlaceHolder-Steuerelemente definiert ist, als auch das seitenspezifische Markup, das in ihren eigenen Content-Steuerelementen definiert ist. Abbildung 3 veranschaulicht dieses Konzept.

Abbildung 03: Das Markup der angeforderten Seite wird mit der Gestaltungsvorlage verschmolzen (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem wir die Funktionsweise von master Seiten erläutert haben, sehen wir uns nun das Erstellen einer master-Seite und der zugehörigen Inhaltsseiten mithilfe von Visual Web Developer an.

Hinweis

Um ein möglichst breites Publikum zu erreichen, wird die ASP.NET Website, die wir in dieser Tutorialreihe erstellen, mit ASP.NET 3.5 mit der kostenlosen Version von Visual Studio 2008 von Microsoft, Visual Web Developer 2008, erstellt. Wenn Sie noch kein Upgrade auf ASP.NET 3.5 durchgeführt haben, machen Sie sich keine Sorgen: Die in diesen Tutorials erläuterten Konzepte funktionieren mit ASP.NET 2.0 und Visual Studio 2005 gleichermaßen. Einige Demoanwendungen verwenden jedoch möglicherweise Features, die mit der .NET Framework Version 3.5 neu sind. Wenn 3.5-spezifische Features verwendet werden, fügen Sie einen Hinweis hinzu, der erläutert, wie ähnliche Funktionen in Version 2.0 implementiert werden. Beachten Sie, dass die Demoanwendungen, die in jedem Tutorial zum Download verfügbar sind, auf die .NET Framework Version 3.5 abzielen, was zu einer Web.config Datei führt, die 3.5-spezifische Konfigurationselemente enthält. Kurz gesagt, wenn Sie .NET 3.5 noch auf Ihrem Computer installieren müssen, funktioniert die herunterladbare Webanwendung nicht, ohne zuerst das 3.5-spezifische Markup aus zu Web.configentfernen. Weitere Informationen zu diesem Thema finden Sie Web.config unter Datei .

Schritt 1: Erstellen einer Gestaltungsvorlage

Bevor wir das Erstellen und Verwenden von master- und Inhaltsseiten untersuchen können, benötigen wir zunächst eine ASP.NET Website. Erstellen Sie zunächst eine neue dateisystembasierte ASP.NET-Website. Um dies zu erreichen, starten Sie Visual Web Developer, wechseln Sie dann zum Menü Datei, und wählen Sie Neue Website aus, und zeigen Sie das Dialogfeld Neue Website an (siehe Abbildung 4). Wählen Sie die Vorlage ASP.NET Website aus, legen Sie die Dropdownliste Speicherort auf Dateisystem fest, wählen Sie einen Ordner aus, um die Website zu platzieren, und legen Sie die Sprache auf Visual Basic fest. Dadurch wird eine neue Website mit einer Default.aspx ASP.NET Seite, einem App_Data Ordner und einer Web.config Datei erstellt.

Hinweis

Visual Studio unterstützt zwei Modi der Projektverwaltung: Websiteprojekte und Webanwendungsprojekte. Websiteprojekte fehlen eine Projektdatei, während Webanwendungsprojekte die Projektarchitektur in Visual Studio .NET 2002/2003 imitieren. Sie enthalten eine Projektdatei und kompilieren den Quellcode des Projekts in einer einzelnen Assembly, die /bin im Ordner abgelegt wird. Visual Studio 2005 unterstützte anfänglich nur Websiteprojekte, obwohl das Webanwendungsprojektmodell mit Service Pack 1 wieder eingeführt wurde. Visual Studio 2008 bietet beide Projektmodelle. Die Visual Web Developer 2005- und 2008-Editionen unterstützen jedoch nur Websiteprojekte. Ich verwende das Websiteprojektmodell für meine Demos in dieser Tutorialreihe. Wenn Sie eine Nicht-Express-Edition verwenden und stattdessen das Webanwendungsprojektmodell verwenden möchten, können Sie dies tun, aber beachten Sie, dass es möglicherweise einige Abweichungen zwischen dem, was auf dem Bildschirm angezeigt wird, und den erforderlichen Schritten im Vergleich zu den in diesen Tutorials gezeigten Screenshots und Anweisungen gibt.

Abbildung 04: Erstellen einer neuen Datei System-Based Website (Klicken Sie hier, um ein Bild in voller Größe anzuzeigen)

Fügen Sie als Nächstes der Website im Stammverzeichnis eine master Seite hinzu, indem Sie mit der rechten Maustaste auf den Projektnamen klicken, Neues Element hinzufügen und dann die Vorlage Gestaltungsvorlage auswählen. Beachten Sie, dass master Seiten mit der Erweiterung .masterenden. Benennen Sie diese neue master Seite, Site.master und klicken Sie auf Hinzufügen.

Abbildung 05: Hinzufügen einer Gestaltungsvorlage namens Site.master zur Website (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wenn Sie eine neue master-Seitendatei über Visual Web Developer hinzufügen, wird eine master Seite mit dem folgenden deklarativen Markup erstellt:

<%@ Master Language="VB" 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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

Die erste Zeile im deklarativen Markup ist die @Master -Anweisung. Die @Master Direktive ähnelt der Direktive, die @Page auf ASP.NET Seiten angezeigt wird. Sie definiert die serverseitige Sprache (VB) und Informationen zum Speicherort und der Vererbung der CodeBehind-Klasse der master Seite.

Das DOCTYPE deklarative Markup der Seite und wird unter der @Master Direktive angezeigt. Die Seite enthält statisches HTML zusammen mit vier serverseitigen Steuerelementen:

• Ein Webformular (das <form runat="server">) – da alle ASP.NET Seiten in der Regel über ein Webformular verfügen und die master Seite möglicherweise Websteuerelemente enthält, die in einem Webformular angezeigt werden müssen – achten Sie darauf, das Webformular ihrer master Seite hinzuzufügen (anstatt jeder Inhaltsseite ein Webformular hinzuzufügen).
• Ein ContentPlaceHolder-Steuerelement mit dem Namen ContentPlaceHolder1 – Dieses ContentPlaceHolder-Steuerelement wird im Webformular angezeigt und dient als Region für die Benutzeroberfläche der Inhaltsseite.
• Ein serverseitiges <head> Element : Das <head> -Element verfügt über das runat="server" -Attribut, sodass es über serverseitigen Code zugänglich ist. Das <head> -Element wird auf diese Weise implementiert, sodass der Titel der Seite und andere <head>Markups programmgesteuert hinzugefügt oder angepasst werden können. Wenn Sie beispielsweise die Eigenschaft einer ASP.NET Seite Title festlegen, wird das <title> vom <head> Serversteuerelement gerenderte Element geändert.
• Ein ContentPlaceHolder-Steuerelement mit dem Namen head – Dieses ContentPlaceHolder-Steuerelement wird im <head> Serversteuerelement angezeigt und kann verwendet werden, um dem <head> Element deklarativ Inhalte hinzuzufügen.

Dieses standardmäßige master deklaratives Seitenmarkup dient als Ausgangspunkt für das Entwerfen eigener master Seiten. Sie können den HTML-Code bearbeiten oder der seite master weitere Websteuerelemente oder ContentPlaceHolders hinzufügen.

Hinweis

Stellen Sie beim Entwerfen einer master Seite sicher, dass die master Seite ein Webformular enthält und mindestens ein ContentPlaceHolder-Steuerelement in diesem Webformular angezeigt wird.

Erstellen eines einfachen Websitelayouts

Erweitern Site.masterwir das standardmäßige deklarative Markup, um ein Websitelayout zu erstellen, in dem alle Seiten gemeinsam sind: eine gemeinsame Kopfzeile, eine linke Spalte mit Navigation, Nachrichten und anderen websiteweiten Inhalten sowie eine Fußzeile, in der das Symbol "Powered by Microsoft ASP.NET" angezeigt wird. Abbildung 6 zeigt das Endergebnis der master Seite, wenn eine ihrer Inhaltsseiten über einen Browser angezeigt wird. Der rot eingekreiste Bereich in Abbildung 6 ist spezifisch für die besuchte Seite (Default.aspx); der andere Inhalt wird in der master Seite definiert und ist daher für alle Inhaltsseiten konsistent.

Abbildung 06: Die Gestaltungsvorlage definiert das Markup für den oberen, linken und unteren Teil (klicken, um das bild in voller Größe anzuzeigen)

Um das in Abbildung 6 dargestellte Websitelayout zu erreichen, aktualisieren Sie zunächst die Site.master master Seite, sodass sie das folgende deklarative Markup enthält:

<%@ Master Language="VB" 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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

Das Layout der master Seite wird mithilfe einer Reihe von <div> HTML-Elementen definiert. Enthält topContent<div> das Markup, das oben auf jeder Seite angezeigt wird, während die mainContent- leftContent, - und footerContent<div> -s zum Anzeigen des Seiteninhalts, der linken Spalte und des Symbols "Powered by Microsoft ASP.NET" verwendet werden. Zusätzlich zum Hinzufügen dieser <div> Elemente habe ich auch die ID Eigenschaft des primären ContentPlaceHolder-Steuerelements in ContentPlaceHolder1MainContentumbenannt.

Die Formatierungs- und Layoutregeln für diese sortierten <div> Elemente werden in der CSS-Datei Styles.css(Cascading Stylesheet) beschrieben, die über ein <link> Element im Element der master Seite <head> angegeben wird. Diese verschiedenen Regeln definieren das Aussehen und Verhalten jedes <div> oben erwähnten Elements. Für das topContent<div> -Element, das den Text und den Link "Masterseiten-Tutorials" anzeigt, sind die Formatierungsregeln wie folgt angegeben Styles.css :

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Wenn Sie auf Ihrem Computer folgen, müssen Sie den zugehörigen Code dieses Tutorials herunterladen und die Styles.css Datei ihrem Projekt hinzufügen. Ebenso müssen Sie einen Ordner mit dem Namen Images erstellen und das Symbol "Powered by Microsoft ASP.NET" von der heruntergeladenen Demowebsite in Ihr Projekt kopieren.

Hinweis

Eine Diskussion über CSS- und Webseitenformatierung sprengt den Rahmen dieses Artikels. Weitere Informationen zu CSS finden Sie in den CSS-Tutorials unter W3Schools.com. Ich ermutige Sie auch, den zugehörigen Code dieses Tutorials herunterzuladen und mit den CSS-Einstellungen in Styles.css zu spielen, um die Auswirkungen verschiedener Formatierungsregeln zu sehen.

Erstellen einer Gestaltungsvorlage mithilfe einer vorhandenen Entwurfsvorlage

Im Laufe der Jahre habe ich eine Reihe von ASP.NET Webanwendungen für kleine bis mittelständische Unternehmen erstellt. Einige meiner Kunden hatten ein vorhandenes Websitelayout, das sie verwenden wollten. andere haben einen kompetenten Grafikdesigner eingestellt. Einige haben mich mit der Gestaltung des Website-Layouts beauftragt. Wie Sie anhand von Abbildung 6 erkennen können, ist die Aufgabe eines Programmierers, das Layout einer Website zu entwerfen, in der Regel so ratsam, dass Ihr Buchhalter operationen am offenen Herzen durchführt, während Ihr Arzt Ihre Steuern übernimmt.

Glücklicherweise gibt es unzählige Websites, die kostenlose HTML-Designvorlagen bieten - Google hat mehr als sechs Millionen Ergebnisse für den Suchbegriff "kostenlose Websitevorlagen" zurückgegeben. Einer meiner Lieblings ist OpenDesigns.org. Sobald Sie eine Websitevorlage gefunden haben, die Ihnen gefällt, fügen Sie die CSS-Dateien und Bilder zu Ihrem Websiteprojekt hinzu, und integrieren Sie den HTML-Code der Vorlage in Ihre master Seite.

Hinweis

Microsoft bietet auch eine Reihe kostenloser ASP.NET Design Start Kit-Vorlagen an, die in das Dialogfeld Neue Website in Visual Studio integriert werden.

Schritt 2: Erstellen zugeordneter Inhaltsseiten

Nachdem die master Seite erstellt wurde, können Wir mit dem Erstellen ASP.NET Seiten beginnen, die an die master Seite gebunden sind. Solche Seiten werden als Inhaltsseiten bezeichnet.

Fügen Sie dem Projekt eine neue seite ASP.NET hinzu und binden sie an die Site.master seite master. Klicken Sie mit der rechten Maustaste auf den Projektnamen in Projektmappen-Explorer, und wählen Sie die Option Neues Element hinzufügen aus. Wählen Sie die Webformularvorlage aus, geben Sie den Namen About.aspxein, und aktivieren Sie dann das Kontrollkästchen "Master Seite auswählen", wie in Abbildung 7 dargestellt. Dadurch wird das Dialogfeld Gestaltungsvorlage auswählen angezeigt (siehe Abbildung 8), in dem Sie die zu verwendende master Seite auswählen können.

Hinweis

Wenn Sie Ihre ASP.NET Website mithilfe des Webanwendungsprojektmodells anstelle des Websiteprojektmodells erstellt haben, wird im Dialogfeld Neues Element hinzufügen in Abbildung 7 das Kontrollkästchen "Master Seite auswählen" nicht angezeigt. Um eine Inhaltsseite bei Verwendung des Webanwendungsprojektmodells zu erstellen, müssen Sie anstelle der Webformularvorlage die Vorlage Webinhaltsformular auswählen. Nachdem Sie die Vorlage Webinhaltsformular ausgewählt und auf Hinzufügen geklickt haben, wird dasselbe Dialogfeld Gestaltungsvorlage auswählen angezeigt, das in Abbildung 8 dargestellt ist.

Abbildung 07: Hinzufügen einer neuen Inhaltsseite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 08: Auswählen der Gestaltungsvorlage Site.master (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wie das folgende deklarative Markup zeigt, enthält eine neue Inhaltsseite eine @Page Direktive, die auf ihre master Seite verweist, und ein Content-Steuerelement für jedes der ContentPlaceHolder-Steuerelemente der master Seite.

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Hinweis

Im Abschnitt "Erstellen eines einfachen Websitelayouts" in Schritt 1 habe ich in MainContentumbenanntContentPlaceHolder1. Wenn Sie dieses ContentPlaceHolder-Steuerelement ID nicht auf die gleiche Weise umbenannt haben, unterscheidet sich das deklarative Markup Ihrer Inhaltsseite geringfügig von dem oben gezeigten Markup. Das zweite Content-Steuerelement ContentPlaceHolderID spiegelt nämlich das ID des entsprechenden ContentPlaceHolder-Steuerelements auf Ihrer master Seite wider.

Beim Rendern einer Inhaltsseite muss das ASP.NET-Modul die Inhaltssteuerelemente der Seite mit den ContentPlaceHolder-Steuerelementen der master Seite verschmelzen. Die ASP.NET-Engine bestimmt die master Seite der Inhaltsseite aus dem Attribut der @Page AnweisungMasterPageFile. Wie das obige Markup zeigt, ist diese Inhaltsseite an ~/Site.mastergebunden.

Da die seite master über zwei ContentPlaceHolder-Steuerelemente verfügt – head und MainContent Visual Web Developer zwei Content-Steuerelemente generiert hat. Jedes Content-Steuerelement verweist über seine ContentPlaceHolderID Eigenschaft auf einen bestimmten ContentPlaceHolder.

Wo master Seiten gegenüber früheren websiteweiten Vorlagentechniken glänzen, ist ihre Entwurfszeitunterstützung. Abbildung 9 zeigt die Inhaltsseite, wenn sie über die About.aspx Entwurfsansicht von Visual Web Developer angezeigt wird. Beachten Sie, dass der Master Seiteninhalt zwar sichtbar ist, aber abgeblendet ist und nicht geändert werden kann. Die Inhaltssteuerelemente, die den ContentPlaceHolders der master Seite entsprechen, können jedoch bearbeitet werden. Wie bei jeder anderen ASP.NET Seite können Sie die Benutzeroberfläche der Inhaltsseite erstellen, indem Sie Websteuerelemente über die Quell- oder Entwurfsansicht hinzufügen.

Abbildung 09: Die Entwurfsansicht der Inhaltsseite zeigt sowohl den Page-Specific- als auch den Gestaltungsvorlageninhalt an (klicken, um das bild in voller Größe anzuzeigen)

Hinzufügen von Markup- und Websteuerelementen zur Inhaltsseite

Nehmen Sie sich einen Moment Zeit, um Inhalte für die About.aspx Seite zu erstellen. Wie Sie in Abbildung 10 sehen können, habe ich eine Überschrift "Über den Autor" und ein paar Absätze Text eingegeben, aber sie können auch Websteuerelemente hinzufügen. Nachdem Sie diese Schnittstelle erstellt haben, besuchen Sie die About.aspx Seite über einen Browser.

Abbildung 10: Aufrufen der About.aspx Seite über einen Browser (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Es ist wichtig zu verstehen, dass die angeforderte Inhaltsseite und die zugehörige master Seite vollständig auf dem Webserver als Ganzes gerendert werden. Der Browser des Endbenutzers sendet dann den resultierenden, verschmolzenen HTML-Code. Um dies zu überprüfen, zeigen Sie den vom Browser empfangenen HTML an, indem Sie zum Menü Ansicht wechseln und Quelle auswählen. Beachten Sie, dass es keine Frames oder andere spezielle Techniken zum Anzeigen von zwei verschiedenen Webseiten in einem einzigen Fenster gibt.

Binden einer Gestaltungsvorlage an eine vorhandene ASP.NET Seite

Wie wir in diesem Schritt gesehen haben, ist das Hinzufügen einer neuen Inhaltsseite zu einer ASP.NET Webanwendung so einfach wie das Aktivieren des Kontrollkästchens "Master Seite auswählen" und das Auswählen der master Seite. Leider ist das Konvertieren einer vorhandenen ASP.NET Seite in eine master Seite nicht so einfach.

Um eine master Seite an eine vorhandene ASP.NET Seite zu binden, müssen Sie die folgenden Schritte ausführen:

1. Fügen Sie das MasterPageFile Attribut der Direktive der ASP.NET Seite @Page hinzu, und verweisen Sie auf die entsprechende master Seite.
2. Fügen Sie Inhaltssteuerelemente für jeden ContentPlaceHolders auf der seite master hinzu.
3. Schneiden Sie den vorhandenen Inhalt der ASP.NET Seite selektiv aus, und fügen Sie sie in die entsprechenden Inhaltssteuerelemente ein. Ich sage hier "selektiv", da die ASP.NET Seite wahrscheinlich Markup enthält, das bereits von der master Seite ausgedrückt wird, z. B. das DOCTYPE-Element <html> und das Webformular.

Eine schritt-für-Schritt-Anleitung zu diesem Prozess sowie Screenshots finden Sie im Tutorial Verwenden von Gestaltungsvorlagen und Websitenavigation von Scott Guthrie. Im Abschnitt "Aktualisieren Default.aspx und DataSample.aspx Verwenden der Gestaltungsvorlage" werden diese Schritte erläutert.

Da es viel einfacher ist, neue Inhaltsseiten zu erstellen, als vorhandene ASP.NET-Seiten in Inhaltsseiten zu konvertieren, empfehle ich, wenn Sie eine neue ASP.NET Website erstellen, der Website eine master Seite hinzuzufügen. Binden Sie alle neuen ASP.NET Seiten an diese master Seite. Machen Sie sich keine Sorgen, wenn die anfängliche master Seite sehr einfach oder einfach ist. Sie können die master Seite später aktualisieren.

Hinweis

Beim Erstellen einer neuen ASP.NET-Anwendung fügt Visual Web Developer eine Default.aspx Seite hinzu, die nicht an eine master Seite gebunden ist. Wenn Sie das Konvertieren einer vorhandenen ASP.NET-Seite in eine Inhaltsseite üben möchten, fahren Sie mit Default.aspxfort. Alternativ können Sie es löschen Default.aspx und dann erneut hinzufügen, aber dieses Mal aktivieren Sie das Kontrollkästchen "Master Seite auswählen".

Schritt 3: Aktualisieren des Markups der Gestaltungsvorlage

Einer der Hauptvorteile von master Seiten besteht darin, dass eine einzelne master Seite verwendet werden kann, um das Gesamtlayout für zahlreiche Seiten auf der Website zu definieren. Daher erfordert das Aktualisieren des Erscheinungsbilds der Website das Aktualisieren einer einzelnen Datei – der master Seite.

Um dieses Verhalten zu veranschaulichen, aktualisieren wir unsere master Seite so, dass sie das aktuelle Datum oben in der linken Spalte einschließt. Fügen Sie eine Bezeichnung mit dem leftContent<div>Namen DateDisplay hinzu.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Erstellen Sie als Nächstes einen Page_Load Ereignishandler für die seite master, und fügen Sie den folgenden Code hinzu:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

Der obige Code legt die Label-Eigenschaft Text auf das aktuelle Datum und die aktuelle Uhrzeit fest, die als Wochentag, den Namen des Monats und den zweistelligen Tag formatiert sind (siehe Abbildung 11). Besuchen Sie mit dieser Änderung erneut eine Ihrer Inhaltsseiten. Wie Abbildung 11 zeigt, wird das resultierende Markup sofort aktualisiert, um die Änderung an der master Seite einzubeziehen.

Abbildung 11: Die Änderungen an der Gestaltungsvorlage werden beim Anzeigen der Inhaltsseite widergespiegelt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Hinweis

Wie dieses Beispiel veranschaulicht, können master Seiten serverseitige Websteuerelemente, Code und Ereignishandler enthalten.

Zusammenfassung

Gestaltungsvorlagen ermöglichen es ASP.NET Entwicklern, ein konsistentes, websiteweites Layout zu entwerfen, das problemlos aktualisiert werden kann. Das Erstellen master Seiten und der zugehörigen Inhaltsseiten ist so einfach wie das Erstellen von Standard-ASP.NET-Seiten, da Visual Web Developer umfangreiche Entwurfszeitunterstützung bietet.

Das master Seitenbeispiel, das wir in diesem Tutorial erstellt haben, enthielt zwei ContentPlaceHolder-Steuerelemente, head und MainContent. Wir haben jedoch nur Markup für das MainContent ContentPlaceHolder-Steuerelement auf unserer Inhaltsseite angegeben. Im nächsten Tutorial untersuchen wir die Verwendung mehrerer Inhaltssteuerelemente auf der Inhaltsseite. Außerdem erfahren Sie, wie Sie das Standardmarkup für Inhaltssteuerelemente auf der master Seite definieren und zwischen der Verwendung des auf der master-Seite definierten Standardmarkups und dem Bereitstellen von benutzerdefiniertem Markup auf der Inhaltsseite umschalten.

Viel Spaß beim Programmieren!

Weitere Informationen

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

• ASP.NET für Designer: Kostenlose Entwurfsvorlagen und Anleitungen zum Erstellen von ASP.NET Websites mithilfe von Webstandards
• Übersicht über ASP.NET Gestaltungsvorlagen
• Css-Tutorials (Cascading Stylesheets)
• Dynamisches Festlegen des Seitentitels
• Gestaltungsvorlagen in ASP.NET
• Schnellstartanleitungen für Gestaltungsvorlagen

Zum Autor

Scott Mitchell, Autor mehrerer ASP/ASP.NET-Bücher 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 3.5 in 24 Stunden. Scott kann unter mitchell@4GuysFromRolla.com oder über seinen Blog unter http://ScottOnWriting.NETerreicht werden.

Besonderen Dank an

Möchten Sie meine anstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter ab mitchell@4GuysFromRolla.com.

ZurückWeiter