Erstellen eines websiteweiten Layouts mit Masterseiten (VB)

von Scott Mitchell

PDF herunterladen

Dieses Tutorial stellt die Grundlagen der Masterseite vor. Was sind Gestaltungsvorlagen, wie erstellt man eine Gestaltungsvorlage, was sind Inhaltsplatzhalter, wie erstellt man eine ASP.NET Seite, die eine Gestaltungsvorlage verwendet, wie das Ändern der Gestaltungsvorlage automatisch in den zugehörigen Inhaltsseiten widerschlägt usw.

Einführung

Ein Attribut einer gut gestalteten Website ist ein einheitliches websiteweites Seitenlayout. Nehmen Sie beispielsweise die www.asp.net-Website an. Zum Zeitpunkt dieses Schreibens verfügt jede Seite über denselben Inhalt am oberen und unteren Rand der Seite. In Abbildung 1 wird oben auf jeder Seite eine graue Leiste mit einer Liste von Microsoft Communities angezeigt. Darunter befindet 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 zu den Datenschutzbestimmungen.

Abbildung 01: Die www.asp.net Website verwendet ein einheitliches Aussehen und Verhalten auf allen Seiten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Ein weiteres Attribut einer gut gestalteten Website ist die Leichtigkeit, mit der die Darstellung der Website geändert werden kann. Abbildung 1 zeigt die www.asp.net Homepage Stand März 2008, aber zwischen dem Zeitpunkt und der Veröffentlichung dieses Tutorials hat sich das Aussehen und die Atmosphäre möglicherweise geändert. Vielleicht werden die Menüelemente am oberen Rand erweitert, um einen neuen Abschnitt für das MVC-Framework einzuschließen. Oder vielleicht wird ein radikal neues Design mit unterschiedlichen Farben, Schriftarten und Layout vorgestellt. Das Anwenden solcher Änderungen auf die gesamte Website sollte ein schneller und einfacher Vorgang sein, der keine Änderung der Tausende von Webseiten erfordert, aus denen die Website besteht.

Das Erstellen einer siteweiten Vorlage in ASP.NET ist durch die Verwendung von Masterpages möglich. Zusammengefasst ist eine Masterseite eine spezielle Art von ASP.NET-Seite, die das Markup definiert, das für alle Inhaltsseiten gemeinsam ist, sowie Regionen, die auf einer Inhaltsseite nach Inhaltsseite angepasst werden können. (Eine Inhaltsseite ist eine ASP.NET Seite, die an die Gestaltungsvorlage gebunden ist.) Immer wenn das Layout oder die Formatierung einer Gestaltungsvorlage geändert wird, wird die gesamte Ausgabe der Inhaltsseiten ebenfalls sofort aktualisiert, wodurch das Anwenden von websiteweiten Darstellungsänderungen so einfach wie das Aktualisieren und Bereitstellen einer einzelnen Datei (nämlich der Gestaltungsvorlage) erleichtert wird.

Dies ist das erste Tutorial in einer Reihe von Tutorials, die die Verwendung von Masterseiten erkunden. Im Laufe dieser Lernprogrammreihe haben wir folgende Aufgaben:

• Untersuchen des Erstellens von Gestaltungsvorlagen und der zugehörigen Inhaltsseiten,
• Diskutieren Sie eine Vielzahl von Hinweisen, Tricks und Fallstricken.
• Identifizieren Sie häufige Fallstricke bei Masterseiten und erkunden Sie mögliche Lösungen.
• Erfahren Sie, wie Sie von einer Inhaltsseite auf die Masterseite zugreifen und umgekehrt.
• Erfahren Sie, wie Sie die Masterseite einer Inhaltsseite zur Laufzeit angeben und
• Weitere Themen zu fortgeschrittenen Masterseiten.

Diese Lernprogramme sind darauf ausgerichtet, präzise zu sein und schrittweise Anleitungen mit vielen Screenshots bereitzustellen, um Sie visuell durch den Prozess zu führen. Jedes Lernprogramm ist in C#- und Visual Basic-Versionen verfügbar und enthält einen Download des vollständigen verwendeten Codes.

Dieses erste Tutorial beginnt mit einem Blick auf die Grundlagen der Masterseite. Wir besprechen, wie Gestaltungsvorlagen funktionieren, betrachten das Erstellen einer Gestaltungsvorlage und zugehörige Inhaltsseiten mithilfe von Visual Web Developer und sehen, wie Änderungen an einer Gestaltungsvorlage sofort in ihren Inhaltsseiten widerzuspiegeln sind. Legen wir los.

Grundlegendes zur Funktionsweise von Gestaltungsvorlagen

Das Erstellen einer Website mit einem konsistenten websiteweiten Seitenlayout erfordert, dass jede Webseite zusätzlich zu ihren benutzerdefinierten Inhalten allgemeine Formatierungsmarkups ausgibt. Während beispielsweise jeder Lernprogramm- oder Forumbeitrag auf www.asp.net über einen eigenen eindeutigen Inhalt verfügt, rendern jede dieser Seiten auch eine Reihe allgemeiner <div> Elemente, die die Abschnittslinks auf oberster 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, einfach das allgemeine Layoutmarkup in alle Webseiten zu kopieren und einzufügen, aber dieser Ansatz hat eine Reihe von Nachteilen. Zu Beginn müssen Sie bei jeder Erstellung einer neuen Seite daran denken, den freigegebenen Inhalt in die Seite zu kopieren und einzufügen. Solche Kopier- und Einzufügenvorgänge sind fehlerreif, da Sie versehentlich nur eine Teilmenge des freigegebenen Markups auf eine neue Seite kopieren können. Und als ob das nicht schon genug wäre, 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 diese Benutzersteuerelemente dann jeder seite hinzugefügt. Dieser Ansatz erforderte, dass der Seitenentwickler daran erinnert, die Benutzersteuerelemente manuell jeder neuen Seite hinzuzufügen, es ist jedoch für einfachere websiteweite Änderungen zulässig, da beim Aktualisieren des allgemeinen Markups nur die Benutzersteuerelemente geändert werden müssen. Leider hat Visual Studio .NET 2002 und 2003 – die Versionen von Visual Studio zum Erstellen ASP.NET 1.x-Anwendungen – in der Entwurfsansicht als graue Felder gerendert. Daher hatten Seitenentwickler, die diesen Ansatz verwendeten, keine WYSIWYG-Design-Umgebung.

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 Pages behoben. Eine Masterseite ist ein spezieller Typ von einer ASP.NET-Seite, die sowohl das Webseiten-weite Markup als auch die Regionen definiert, in denen die zugehörigen Inhaltsseiten ihr benutzerdefiniertes Markup festlegen. Wie wir in Schritt 1 sehen, sind diese Regionen durch ContentPlaceHolder-Steuerelemente gekennzeichnet. Das ContentPlaceHolder-Steuerelement zeigt einfach eine Position in der Steuerelementhierarchie der Masterseite an, an der benutzerdefinierte Inhalte von einer Inhaltsseite eingefügt werden können.

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

Abbildung 02: Eine Gestaltungsvorlage definiert das websiteweite Layout und die bereiche, die auf einer Inhaltsseite nach Inhaltsseite bearbeitet werden können.

Nachdem eine Masterseite definiert wurde, kann sie über das Anklicken eines Kontrollkästchens an neue ASP.NET-Seiten gebunden werden. Diese ASP.NET-Seiten, die als Inhaltsseiten bezeichnet werden, enthalten ein Inhaltssteuerelement für jedes der ContentPlaceHolder-Steuerelemente der Masterseite. Wenn die Inhaltsseite über einen Browser besucht wird, erstellt die ASP.NET-Engine die Steuerelementhierarchie der Masterseite 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 der Masterseite außerhalb der ContentPlaceHolder-Steuerelemente definiert ist, als auch das seitenspezifische Markup, das in den eigenen Inhaltssteuerelementen definiert ist. Abbildung 3 veranschaulicht dieses Konzept.

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

Nachdem wir nun erläutert haben, wie Gestaltungsvorlagen funktionieren, werfen wir einen Blick auf das Erstellen einer Gestaltungsvorlage und zugehöriger Inhaltsseiten mithilfe von Visual Web Developer.

Schritt 1: Erstellen einer Masterseite

Bevor wir das Erstellen und Verwenden von Gestaltungs- und Inhaltsseiten erkunden können, benötigen wir zuerst eine ASP.NET Website. Erstellen Sie zunächst eine neue dateisystembasierte ASP.NET Website. Starten Sie dazu Visual Web Developer, und wechseln Sie dann zum Menü "Datei", und wählen Sie "Neue Website" aus, in dem das Dialogfeld "Neue Website" angezeigt wird (siehe Abbildung 4). Wählen Sie die ASP.NET-Websitevorlage aus, legen Sie die Dropdownliste "Speicherort" auf "Dateisystem" fest, wählen Sie einen Ordner aus, in dem die Website platziert werden soll, 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.

Abbildung 04: Erstellen einer neuen dateisystembasierten Website (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Fügen Sie als Nächstes der Website im Stammverzeichnis eine Masterseite hinzu, indem Sie mit der rechten Maustaste auf den Projektnamen klicken, "Neues Element hinzufügen" auswählen und die Vorlage "Masterseite" auswählen. Beachten Sie, dass Gestaltungsvorlagen mit der Dateiendung .master enden. Benennen Sie diese neue Masterseite Site.master und klicken Sie auf "Hinzufügen".

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

Beim Hinzufügen einer neuen Masterseiten-Datei über Visual Web Developer wird eine Masterseite 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 Direktive. Die @Master Direktive ähnelt der @Page Direktive , die auf ASP.NET Seiten angezeigt wird. Es definiert die serverseitige Sprache (VB) und Informationen zum Speicherort und zur Vererbung der Code-Behind-Klasse der Masterseite.

Das DOCTYPE und das deklarative Markup der Seite erscheint unterhalb der @Master-Direktive. Die Seite enthält statischen HTML-Code zusammen mit vier serverseitigen Steuerelementen:

• Ein Webformular (das) <form runat="server"> – da alle ASP.NET Pages in der Regel ein Webformular haben - und da die Masterseite möglicherweise Websteuerelemente enthält, die in einem Webformular angezeigt werden müssen, müssen Sie das Webformular Ihrer Masterseite hinzufügen (anstatt jeder Inhaltsseite ein Webformular hinzuzufügen).
• Ein ContentPlaceHolder-Steuerelement namens ContentPlaceHolder1 - dieses ContentPlaceHolder-Steuerelement wird im Webformular angezeigt und dient als Bereich für die Benutzeroberfläche der Inhaltsseite.
• Ein serverseitiges <head> Element – das Element verfügt über das <head>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>-bezogene Markups programmgesteuert hinzugefügt oder angepasst werden können. Das Festlegen der Eigenschaft Title einer ASP.NET-Seite ändert beispielsweise das vom Serversteuerelement <head> gerenderte Element <title>.
• Ein ContentPlaceHolder-Steuerelement namens head - dieses ContentPlaceHolder-Steuerelement wird innerhalb des <head> Serversteuerelements angezeigt und kann verwendet werden, um dem <head> Element deklarativ Inhalte hinzuzufügen.

Dieses deklarative Standard-HTML-Markup der Masterseite dient als Grundlage für das Entwerfen eigener Masterseiten. Sie können den HTML-Code bearbeiten oder der Masterseite zusätzliche Websteuerelemente oder ContentPlaceHolders hinzufügen.

Erstellen eines einfachen Websitelayouts

Erweitern wir nun das Site.master standardmäßige deklarative Markup, um ein Websitelayout zu erstellen, in dem alle Seiten ein gemeinsames Layout verwenden: eine gemeinsame Kopfzeile; eine linke Spalte mit Navigation, Nachrichten und anderen website-weiten Inhalten sowie eine Fußzeile, die das Symbol "Unterstützt durch Microsoft ASP.NET" anzeigt. Abbildung 6 zeigt das Endergebnis der Masterseite, wenn eine ihrer Inhaltsseiten in einem Browser betrachtet wird. Der rote kreisförmige Bereich in Abbildung 6 ist spezifisch für die seite, die besucht wird (Default.aspx); der andere Inhalt wird in der Gestaltungsvorlage definiert und ist daher auf allen Inhaltsseiten konsistent.

Abbildung 06: Die Gestaltungsvorlage definiert das Markup für die oberen, linken und unteren Teile (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Um das in Abbildung 6 dargestellte Websitelayout zu erreichen, aktualisieren Sie zunächst die Site.master Gestaltungsvorlage so, dass 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 Gestaltungsvorlage wird mithilfe einer Reihe von <div> HTML-Elementen definiert. Das topContent<div> enthält das Markup, das oben auf jeder Seite angezeigt wird, während die mainContent, leftContentund footerContent<div> s verwendet werden, um den Inhalt der Seite, die linke Spalte und das Symbol "Unterstützt von Microsoft ASP.NET" anzuzeigen. Zusätzlich zum Hinzufügen dieser <div> Elemente habe ich auch die ID Eigenschaft des primären ContentPlaceHolder-Steuerelements von ContentPlaceHolder1 in " MainContentumbenannt.

Die Formatierungs- und Layoutregeln für diese verschiedenen <div> Elemente sind im Cascading Stylesheet (CSS) definiert, das über ein <link> Element in dem Element der Masterseite <head> angegeben wird. Diese verschiedenen Regeln definieren das Aussehen und Verhalten jedes <div> oben aufgeführten Elements. Beispielsweise hat das topContent<div> Element, das den Text und Link "Tutorials zu Masterseiten" anzeigt, seine Formatierungsregeln in Styles.css wie folgt angegeben:

#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 am Computer mitmachen, werden Sie den begleitenden Code dieses Tutorials herunterladen und die Styles.css Datei in Ihr Projekt einfügen müssen. Ebenso müssen Sie einen Ordner mit dem Namen Images erstellen und das Symbol "Unterstützt von Microsoft ASP.NET" von der heruntergeladenen Demowebsite in Ihr Projekt kopieren.

** Erstellen einer Masterseite mithilfe einer vorhandenen Designvorlage.

Im Laufe der Jahre habe ich eine Reihe von ASP.NET Webanwendungen für kleine bis mittlere Unternehmen aufgebaut. Einige meiner Kunden hatten ein vorhandenes Websitelayout, das sie verwenden wollten; andere haben einen kompetenten Grafikdesigner eingestellt. Ein paar haben mir das Design des Websitelayouts anvertraut. Wie Sie anhand von Abbildung 6 feststellen können, ist es in der Regel so klug, einem Programmierer das Layout einer Website gestalten zu lassen, wie einem Buchhalter eine Herzoperation zu überlassen, während Ihr Arzt Ihre Steuererklärung macht.

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

Schritt 2: Erstellen zugeordneter Inhaltsseiten

Nachdem die Masterseite erstellt wurde, können wir mit dem Erstellen der ASP.NET-Seiten beginnen, die mit der Masterseite verknüpft sind. Solche Seiten werden als Inhaltsseiten bezeichnet.

Fügen wir dem Projekt eine neue ASP.NET-Seite hinzu und binden sie an die Site.master Masterseite. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen Sie die Option "Neues Element hinzufügen" aus. Wählen Sie die Webformularvorlage aus, geben Sie den Namen About.aspx ein, und aktivieren Sie dann das Kontrollkästchen "Masterseite auswählen". Überprüfen Sie abschließend die Darstellung in Abbildung 7. Dadurch wird das Dialogfeld "Masterseite auswählen" (siehe Abbildung 8) angezeigt, aus dem Sie die Masterseite auswählen können, die Sie verwenden möchten.

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

Abbildung 08: Wählen Sie die Gestaltungsvorlage Site.master (Klicken Sie, 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 Masterseite zurückverweist, sowie ein Inhaltssteuerelement für jede der ContentPlaceHolder-Steuerelemente der Masterseite.

<%@ 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>

Beim Rendern einer Inhaltsseite muss die ASP.NET Engine die Inhaltssteuerelemente der Seite mit den ContentPlaceHolder-Steuerelementen der Gestaltungsvorlage verbinden. Die ASP.NET-Engine bestimmt die Masterseite der Inhaltsseite aus dem Attribut der @Page-Direktive MasterPageFile. Wie das obige Markup zeigt, ist diese Inhaltsseite an ~/Site.master gebunden.

Da die Masterseite über zwei ContentPlaceHolder-Steuerelemente - head und MainContent - verfügt, hat Visual Web Developer zwei Inhaltssteuerelemente generiert. Jedes Inhaltssteuerelement verweist über seine ContentPlaceHolderID Eigenschaft auf einen bestimmten ContentPlaceHolder.

Wo Masterseiten gegenüber früheren Website-weiten Vorlagentechniken glänzen, ist ihre Unterstützung bei der Entwurfszeit. Abbildung 9 zeigt die Inhaltsseite, wenn sie in der About.aspx Entwurfsansicht von Visual Web Developer angezeigt wird. Beachten Sie, dass der Inhalt der Masterseite zwar sichtbar, aber ausgegraut ist und nicht geändert werden kann. Die Inhaltssteuerelemente, die den ContentPlaceHolders der Masterseite entsprechen, können jedoch bearbeitet werden. Und genau wie bei jeder anderen ASP.NET Seite können Sie die Benutzeroberfläche der Inhaltsseite erstellen, indem Sie Websteuerelemente über die Quell- oder Entwurfsansichten hinzufügen.

Abbildung 09: In der Entwurfsansicht der Inhaltsseite werden sowohl die seitenspezifischen als auch die Master-Seiten-Inhalte angezeigt (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 mit 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 Masterseite vollständig zu einer Einheit verschmolzen und dann auf dem Webserver gerendert werden. Der Browser des Endbenutzers wird dann den resultierenden, verschmolzenen HTML-Code gesendet. Um dies zu überprüfen, zeigen Sie den vom Browser empfangenen HTML-Code 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 einzelnen Fenster gibt.

Binden einer Masterseite 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 "Gestaltungsvorlage auswählen" und auswählen der Gestaltungsvorlage. Leider ist das Umwandeln einer vorhandenen ASP.NET-Seite in eine Masterseite nicht so einfach.

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

1. Fügen Sie das MasterPageFile-Attribut zur Direktive der ASP.NET-Seite hinzu und verweisen Sie auf die entsprechende Masterseite @Page.
2. Fügen Sie Inhaltssteuerelemente für jeden der ContentPlaceholders in der Masterseite 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 Masterseite ausgedrückt wird, z. B. das DOCTYPE, das <html>-Element und das Webformular.

Schrittweise Anleitungen zu diesem Prozess sowie Screenshots finden Sie im Lernprogramm "Verwenden von Gestaltungsvorlagen und Websitenavigation" von Scott Guthrie. Im Abschnitt "Aktualisieren Default.aspx und DataSample.aspx zur Verwendung der Masterseite" werden die folgenden Schritte beschrieben.

Da es viel einfacher ist, neue Inhaltsseiten zu erstellen, als vorhandene ASP.NET Seiten in Inhaltsseiten zu konvertieren, empfiehlt es sich, jedes Mal, wenn Sie eine neue ASP.NET Website erstellen, eine Gestaltungsvorlage zur Website hinzuzufügen. Binden Sie alle neuen ASP.NET-Seiten an diese Masterseite. Machen Sie sich keine Sorgen, wenn die anfängliche Masterseite sehr einfach oder schlicht ist; Sie können die Masterseite später aktualisieren.

Schritt 3: Aktualisieren des Markups der Master-Seite

Einer der Hauptvorteile von Gestaltungsvorlagen besteht darin, dass eine einzelne Gestaltungsvorlage verwendet werden kann, um das Gesamtlayout für zahlreiche Seiten auf der Website zu definieren. Daher muss beim Aktualisieren des Aussehens und der Anmutung der Website eine einzelne Datei – die Masterseite – aktualisiert werden.

Um dieses Verhalten zu veranschaulichen, aktualisieren wir unsere Gestaltungsvorlage so, dass das aktuelle Datum oben in der linken Spalte enthalten ist. Fügen Sie ein Label mit dem Namen DateDisplay zum leftContent<div> 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 Masterseite 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 Uhrzeit fest, formatiert als Wochentag, Monatsname und zweistelliger Tag (siehe Abbildung 11). Mit dieser Änderung können Sie eine Ihrer Inhaltsseiten erneut aufrufen. Wie in Abbildung 11 dargestellt, wird das resultierende Markup sofort aktualisiert, um die Änderung in die Masterseite aufzunehmen.

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

Zusammenfassung

Masterseiten ermöglichen ASP.NET-Entwicklern das Entwerfen eines konsistenten seitenweiten Layouts, das problemlos aktualisiert werden kann. Das Erstellen von Gestaltungsvorlagen und den zugehörigen Inhaltsseiten ist so einfach wie das Erstellen von Standard-ASP.NET Seiten, da Visual Web Developer umfassende Unterstützung für die Entwurfszeit bietet.

Das in diesem Lernprogramm erstellte Masterseitenbeispiel enthält zwei ContentPlaceHolder-Steuerelemente, head und MainContent. Wir haben jedoch nur Markup für das MainContent ContentPlaceHolder-Steuerelement auf unserer Inhaltsseite angegeben. Im nächsten Lernprogramm betrachten wir die Verwendung mehrerer Inhaltssteuerelemente auf der Inhaltsseite. Außerdem erfahren Sie, wie Sie Standardmarkup für Inhaltssteuerelemente innerhalb der Gestaltungsvorlage definieren und zwischen der Verwendung des in der Gestaltungsvorlage definierten Standardmarkups umschalten und benutzerdefiniertes Markup von der Inhaltsseite bereitstellen.

Glückliche Programmierung!

Weitere Lektüre

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

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

Zum Autor

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

Besonderer Dank an

Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn dies der Fall ist, schreiben Sie mir unter mitchell@4GuysFromRolla.com.