Masterseiten

von Microsoft

Eine der wichtigsten Komponenten für eine erfolgreiche Website ist ein konsistentes Aussehen und Verhalten. In ASP.NET 1.x verwendeten Entwickler Benutzersteuerelemente, um allgemeine Seitenelemente in einer Webanwendung zu replizieren. Obwohl dies sicherlich eine funktionsfähige Lösung ist, hat die Verwendung von Benutzersteuerelementen einige Nachteile. Beispielsweise erfordert eine Änderung der Position eines Benutzersteuerelements eine Änderung an mehreren Seiten auf einer Website. Benutzersteuerelemente werden auch nicht in der Entwurfsansicht gerendert, nachdem sie auf einer Seite eingefügt wurden.

Eine der wichtigsten Komponenten für eine erfolgreiche Website ist ein konsistentes Aussehen und Verhalten. In ASP.NET 1.x verwendeten Entwickler Benutzersteuerelemente, um allgemeine Seitenelemente in einer Webanwendung zu replizieren. Obwohl dies sicherlich eine funktionsfähige Lösung ist, hat die Verwendung von Benutzersteuerelementen einige Nachteile. Beispielsweise erfordert eine Änderung der Position eines Benutzersteuerelements eine Änderung an mehreren Seiten auf einer Website. Benutzersteuerelemente werden auch nicht in der Entwurfsansicht gerendert, nachdem sie auf einer Seite eingefügt wurden.

ASP.NET 2.0 führt Gestaltungsvorlagen ein, um ein einheitliches Aussehen und Verhalten beizubehalten, und wie Sie bald sehen werden, stellen Gestaltungsvorlagen eine deutliche Verbesserung gegenüber der Benutzersteuerungsmethode dar.

Warum Gestaltungsvorlagen?

Sie fragen sich vielleicht, warum master Seiten in ASP.NET 2.0 benötigt wurden. Schließlich verwenden Websiteentwickler bereits Benutzersteuerelemente in ASP.NET 1.x, um Inhaltsbereiche zwischen Seiten freizugeben. Es gibt mehrere Gründe, warum Benutzersteuerelemente eine weniger als optimale Lösung zum Erstellen eines gemeinsamen Layouts sind.

Benutzersteuerelemente definieren das Seitenlayout nicht. Stattdessen definieren sie das Layout und die Funktionalität für einen Teil einer Seite. Die Unterscheidung zwischen diesen beiden ist wichtig, da sie die Verwaltbarkeit einer Benutzersteuerungslösung erheblich erschwert. Wenn Sie beispielsweise die Position eines Benutzersteuerelements auf Ihrer Seite ändern möchten, müssen Sie die tatsächliche Seite bearbeiten, auf der das Benutzersteuerelement angezeigt wird. Das ist in Ordnung, wenn Sie nur wenige Seiten haben, aber bei großen Websites wird es schnell zu einem Albtraum der Websiteverwaltung!

Ein weiterer Nachteil der Verwendung von Benutzersteuerelementen zum Definieren eines gemeinsamen Layouts liegt in der Architektur von ASP.NET selbst. Wenn ein öffentliches Element eines Benutzersteuerelements geändert wird, müssen Sie alle Seiten, die das Benutzersteuerelement verwenden, neu kompilieren. Im Gegenzug werden ASP.NET Ihre Seiten erneut jit, wenn sie zum ersten Mal aufgerufen werden. Dies führt wiederum zu einer nicht skalierbaren Architektur und einem Standortverwaltungsproblem für größere Standorte.

Beide Probleme (und viele mehr) werden von master Seiten in ASP.NET 2.0 ansprechend behandelt.

Funktionsweise von Gestaltungsvorlagen

Eine master Seite entspricht einer Vorlage für andere Seiten. Seitenelemente, die für andere Seiten freigegeben werden sollen (z. B. Menüs, Rahmen usw.), werden der master Seite hinzugefügt. Wenn der Website neue Seiten hinzugefügt werden, können Sie sie einer master-Seite zuordnen. Eine Seite, die einer master Seite zugeordnet ist, wird als Inhaltsseite bezeichnet. Standardmäßig übernimmt eine Inhaltsseite das Aussehen der master Seite. Wenn Sie jedoch eine master Seite erstellen, können Sie Teile der Seite definieren, die die Inhaltsseite durch ihren eigenen Inhalt ersetzen kann. Diese Teile werden mithilfe eines neuen Steuerelements definiert, das in ASP.NET 2.0 eingeführt wurde. das ContentPlaceHolder-Steuerelement .

Eine master Seite kann eine beliebige Anzahl von ContentPlaceHolder-Steuerelementen (oder gar keine) enthalten. Auf der Inhaltsseite wird der Inhalt der ContentPlaceHolder-Steuerelemente innerhalb von Inhaltssteuerelementen angezeigt, einem weiteren neuen Steuerelement in ASP.NET 2.0. Standardmäßig sind die Inhaltssteuerelemente für Inhaltsseiten leer, sodass Sie Ihre eigenen Inhalte bereitstellen können. Wenn Sie den Inhalt der seite master innerhalb der Inhaltssteuerelemente verwenden möchten, können Sie dies tun, wie Sie später in diesem Modul sehen werden. Das Content-Steuerelement wird dem ContentPlaceHolder-Steuerelement über das ContentPlaceHolderID-Attribut des Content-Steuerelements zugeordnet. Der folgende Code ordnet ein Content-Steuerelement einem ContentPlaceHolder-Steuerelement namens mainBody auf einer master Seite zu.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Hinweis

Sie hören häufig, dass Benutzer master Seiten als Basisklasse für andere Seiten beschreiben. Das stimmt eigentlich nicht. Die Beziehung zwischen master Seiten und Inhaltsseiten ist keine Vererbung.

Abbildung 1 zeigt eine master Seite und eine zugeordnete Inhaltsseite, wie sie in Visual Studio 2005 angezeigt werden. Das ContentPlaceHolder-Steuerelement wird auf der Seite master und das entsprechende Inhaltssteuerelement auf der Inhaltsseite angezeigt. Beachten Sie, dass der master Seiteninhalte außerhalb des ContentPlaceHolder-Inhalts sichtbar, aber auf der Inhaltsseite abgeblendet ist. Nur der Inhalt innerhalb von ContentPlaceHolder kann durch die Inhaltsseite ersetzt werden. Alle anderen Inhalte, die von der seite master stammen, sind unveränderlich.

Abbildung 1: Eine master Seite und die zugehörige Inhaltsseite

Erstellen einer Gestaltungsvorlage

So erstellen Sie eine neue master Seite:

1. Öffnen Sie Visual Studio 2005, und erstellen Sie eine neue Website.
2. Klicken Sie auf Datei, Neu, Datei.
3. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Masterdatei aus, wie in Abbildung 2 dargestellt.
4. Klicken Sie auf Hinzufügen.

Abbildung 2: Erstellen einer neuen Gestaltungsvorlage

Beachten Sie, dass die Dateierweiterung für eine master Seite .master ist. Dies ist eine der Möglichkeiten, wie sich eine master Seite von einer gewöhnlichen Seite unterscheidet. Der andere Hauptunterschied besteht darin, dass anstelle einer @Page Direktive die Seite master eine @Master Direktive enthält. Wechseln Sie zur Quellansicht für die master Seite, die Sie gerade erstellt haben, und überprüfen Sie den Code.

Eine neue master Seite verfügt standardmäßig über ein ContentPlaceHolder-Steuerelement. In den meisten Fällen ist es sinnvoller, zuerst die allgemeinen Seitenelemente zu erstellen und dann ContentPlaceHolder-Steuerelemente einzufügen, wo benutzerdefinierter Inhalt gewünscht wird. In diesen Fällen sollten Entwickler das standardmäßige ContentPlaceHolder-Steuerelement löschen und neue Steuerelemente einfügen, während die Seite entwickelt wird. ContentPlaceHolder-Steuerelemente können die Größe nicht ändern, obwohl sie Ziehpunkte für die Größenanpassung anzeigen. Das ContentPlaceHolder-Steuerelement wird automatisch basierend auf dem inhalt, den es enthält, mit einer Ausnahme. Wenn Sie ein ContentPlaceHolder-Steuerelement innerhalb eines Blockelements wie einer Tabellenzelle platzieren, wird die Größe entsprechend der Größe des Elements festgelegt.

Lab 1 Arbeiten mit Gestaltungsvorlagen

In diesem Lab erstellen Sie eine neue master Seite und definieren drei ContentPlaceHolder-Steuerelemente. Anschließend erstellen Sie eine neue Inhaltsseite und ersetzen den Inhalt aus mindestens einem der ContentPlaceHolder-Steuerelemente.

1. Erstellen Sie eine master Seite, und fügen Sie ContentPlaceHolder-Steuerelemente ein.

   1. Erstellen Sie wie oben beschrieben eine neue master Seite.
   2. Löschen Sie das Standardmäßige ContentPlaceHolder-Steuerelement.
   3. Wählen Sie das Steuerelement ContentPlaceHolder aus, indem Sie auf den schattierten oberen Rahmen des Steuerelements klicken, und löschen Sie es dann, indem Sie die ENTF-Taste auf der Tastatur drücken.
   4. Fügen Sie eine neue Tabelle mithilfe der Kopfzeilen- und Seitenvorlage ein, wie in Abbildung 3 dargestellt. Ändern Sie die Breite und Höhe auf jeweils 90 %, damit die gesamte Tabelle im Designer sichtbar ist.

Abbildung 3

1. Platzieren Sie den Cursor in jede Zelle der Tabelle, und legen Sie die valign-Eigenschaft auf oben fest.
2. Fügen Sie aus der Toolbox ein ContentPlaceHolder-Steuerelement in die obere Zelle der Tabelle (die Kopfzeilenzelle) ein.
3. Wenn Sie dieses ContentPlaceHolder-Steuerelement einfügen, werden Sie feststellen, dass die Zeilenhöhe fast die gesamte Seite einnimmt, wie in Abbildung 4 dargestellt. Machen Sie sich an diesem Punkt keine Sorgen.

Abbildung 4: Der leere Leerraum befindet sich in derselben Zelle wie der ContentPlaceHolder.

1. Platzieren Sie ein ContentPlaceHolder-Steuerelement in den anderen beiden Zellen. Nachdem die anderen ContentPlaceHolder-Steuerelemente eingefügt wurden, sollte die Größe der Tabellenzellen erwartungsgemäß sein. Die Seite sollte nun wie die in Abbildung 5 dargestellte Seite aussehen.

Abbildung 5: Der Master mit allen ContentPlaceHolder-Steuerelementen. Beachten Sie, dass die Zellenhöhe für die Kopfzeilenzelle jetzt die gewünschte Größe aufweist.

1. Geben Sie in jedes der drei ContentPlaceHolder-Steuerelemente Text Ihrer Wahl ein.
2. Speichern Sie die seite master als exercise1.master.
3. Erstellen Sie ein neues Webformular, und ordnen Sie es der Übung1 zu. master master Seite.
4. Wählen Sie Datei, Neu, Datei in Visual Studio 2005 aus.
5. Wählen Sie im Dialogfeld Neues Element hinzufügen die Option Webformular aus.
6. Stellen Sie sicher, dass das Kontrollkästchen Master Seite auswählen aktiviert ist, wie in Abbildung 6 dargestellt.

Abbildung 6: Hinzufügen einer neuen Inhaltsseite

1. Klicken Sie auf Hinzufügen.
2. Wählen Sie übung1 aus. master im Dialogfeld Master Seite auswählen aus, wie in Abbildung 7 dargestellt.
3. Klicken Sie auf OK, um die neue Inhaltsseite hinzuzufügen.

Die neue Inhaltsseite wird in Visual Studio mit einem Content-Steuerelement für jedes ContentPlaceHolder-Steuerelement auf der seite master angezeigt. Standardmäßig sind die Inhaltssteuerelemente leer, sodass Sie Eigene Inhalte hinzufügen können. Wenn Sie möchten, dass sie den Inhalt des ContentPlaceHolder-Steuerelements auf der Seite master verwenden, klicken Sie einfach auf das Smarttagsymbol (den kleinen schwarzen Pfeil in der oberen rechten Ecke des Steuerelements), und wählen Sie Standard in Masterinhalt aus dem Smarttag aus, wie in Abbildung 8 dargestellt. Wenn Sie dies tun, ändert sich das Menüelement in Benutzerdefinierten Inhalt erstellen. Wenn Sie an diesem Punkt darauf klicken, wird der Inhalt von der seite master entfernt, sodass Sie benutzerdefinierte Inhalte für dieses bestimmte Inhaltssteuerelement definieren können.

Abbildung 7: Festlegen eines Inhaltssteuerelements auf Standard für den Gestaltungsvorlageninhalt

Verbinden von Gestaltungsvorlagen und Inhaltsseiten

Die Zuordnung zwischen einer master-Seite und einer Inhaltsseite kann auf eine von vier verschiedenen Arten konfiguriert werden:

• Das MasterPageFile-Attribut der @Page -Direktive
• Festlegen der Page.MasterPageFile-Eigenschaft im Code.
• Das <pages-Element> in der Anwendungskonfigurationsdatei (web.config im Stammordner der Anwendung)
• Das <pages-Element> in einer Unterordnerkonfigurationsdatei (web.config in einem Unterordner)

MasterPageFile-Attribut

Das MasterPageFile-Attribut erleichtert das Anwenden einer master Seite auf eine bestimmte ASP.NET Seite. Dies ist auch die Methode, die verwendet wird, um die master Seite anzuwenden, wenn Sie das Kontrollkästchen Gestaltungsvorlage auswählen aktivieren, wie Sie es in Übung 1 getan haben.

Festlegen von Page.MasterPageFile im Code

Durch Festlegen der MasterPageFile-Eigenschaft im Code können Sie zur Laufzeit eine bestimmte master Seite auf Ihren Inhalt anwenden. Dies ist nützlich, wenn Sie möglicherweise eine bestimmte master Seite basierend auf einer Benutzerrolle oder anderen Kriterien anwenden müssen. Die MasterPageFile-Eigenschaft muss in der PreInit-Methode festgelegt werden. Wenn sie nach der PreInit-Methode festgelegt ist, wird eine InvalidOperationException ausgelöst. Die Seite, auf der diese Eigenschaft festgelegt wird, muss auch über ein Content-Steuerelement als Steuerelement der obersten Ebene für die Seite verfügen. Andernfalls wird beim Festlegen der MasterPageFile-Eigenschaft eine HttpException ausgelöst.

Verwenden des <pages-Elements>

Sie können eine master Seite für Ihre Seiten konfigurieren, indem Sie das masterPageFile-Attribut im <pages-Element> der web.config-Datei festlegen. Beachten Sie bei Der Verwendung dieser Methode, dass web.config Dateien, die niedriger in der Anwendungsstruktur sind, diese Einstellung überschreiben können. Jedes masterPageFile-Attribut, das in einer @Page -Direktive festgelegt ist, setzt diese Einstellung ebenfalls außer Kraft. Mithilfe des <pages-Elements> können Sie ganz einfach eine master master Seite erstellen, die bei Bedarf in bestimmten Ordnern oder Dateien überschrieben werden kann.

Eigenschaften in Gestaltungsvorlagen

Eine master Seite kann Eigenschaften verfügbar machen, indem diese Eigenschaften einfach auf der seite master öffentlich gemacht werden. Der folgende Code definiert beispielsweise eine Eigenschaft namens SomeProperty:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

Um auf die SomeProperty-Eigenschaft über die Seite Content zuzugreifen, müssen Sie die Master-Eigenschaft wie folgt verwenden:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Verschachteln von Gestaltungsvorlagen

Gestaltungsvorlagen sind die perfekte Lösung, um ein gemeinsames Aussehen und Verhalten in einer großen Webanwendung sicherzustellen. Es ist jedoch nicht ungewöhnlich, dass bestimmte Teile einer großen Website eine gemeinsame Schnittstelle gemeinsam nutzen, während andere Teile eine andere Schnittstelle verwenden. Um diesen Anforderungen gerecht zu werden, sind mehrere master Seiten die perfekte Lösung. Dies geht jedoch immer noch nicht auf die Tatsache ein, dass eine große Anwendung über bestimmte Komponenten (z. B. ein Menü) verfügen kann, die für alle Seiten freigegeben sind, und andere Komponenten, die nur von bestimmten Abschnitten der Website gemeinsam genutzt werden. Für diese Art von Situation erfüllen geschachtelte master Seiten den Bedarf gut. Wie Sie gesehen haben, besteht eine normale master-Seite aus einer master-Seite und einer Inhaltsseite. In einer geschachtelten master-Seitensituation gibt es zwei master Seiten: ein übergeordnetes master und ein untergeordnetes master. Die untergeordnete master Seite ist ebenfalls eine Inhaltsseite, und die master ist die übergeordnete master Seite.

Hier ist der Code für eine typische master Seite:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!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>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

In einem geschachtelten master Szenario wäre dies die übergeordnete master. Eine andere master Seite würde diese Seite als master Seite verwenden, und dieser Code würde wie folgt aussehen:

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Beachten Sie, dass in diesem Szenario die untergeordnete master auch eine Inhaltsseite für die übergeordnete master ist. Der gesamte Inhalt des untergeordneten master wird in einem Content-Steuerelement angezeigt, das den Inhalt aus dem ContentPlaceHolder-Steuerelement des übergeordneten Elements abruft.

Hinweis

Designer Unterstützung ist für geschachtelte master-Seiten nicht verfügbar. Wenn Sie die Entwicklung mit geschachtelten Mastern durchführen, müssen Sie die Quellansicht verwenden.

Dieses Video zeigt eine exemplarische Vorgehensweise zur Verwendung geschachtelter master Seiten.

Full-Screen Video öffnen

Abbildung 8: Auswählen einer Gestaltungsvorlage