Geschachtelte Masterseiten (VB)

von Scott Mitchell

Zeigt, wie eine Masterseite in eine andere geschachtelt wird.

Einführung

Im Laufe der letzten neun Lernprogramme haben wir gesehen, wie sie ein Website-weites Layout mit Masterseiten implementieren. Kurz gesagt, Masterseiten ermöglichen es uns, den Seitenentwicklern, gemeinsam genutztes Markup in der Masterseite zusammen mit bestimmten Bereichen zu definieren, die für jede Inhaltsseite individuell angepasst werden können. Die ContentPlaceHolder-Steuerelemente in einer Gestaltungsvorlage kennzeichnen die anpassbaren Bereiche. Das angepasste Markup für die ContentPlaceHolder-Steuerelemente wird über Inhaltssteuerelemente auf der Inhaltsseite definiert.

Die bisher untersuchten Masterseite-Techniken sind hervorragend, wenn Sie über ein einzelnes Layout verfügen, das auf der gesamten Website verwendet wird. Viele große Websites verfügen jedoch über ein Websitelayout, das in verschiedenen Abschnitten angepasst wird. Ziehen Sie beispielsweise eine Gesundheitsanwendung in Betracht, die von Krankenhausmitarbeitern verwendet wird, um Patienteninformationen, Aktivitäten und Abrechnungen zu verwalten. In dieser Anwendung können drei Arten von Webseiten vorhanden sein:

• Mitarbeiterspezifische Seiten, auf denen Mitarbeiter die Verfügbarkeit aktualisieren, Zeitpläne anzeigen oder Urlaubszeit anfordern können.
• Patientenspezifische Seiten, auf denen Mitarbeiter Informationen für einen bestimmten Patienten anzeigen oder bearbeiten.
• Abrechnungsspezifische Seiten, auf denen Buchhalter aktuelle Anspruchsstatus und Finanzberichte überprüfen.

Jede Seite kann ein gemeinsames Layout aufweisen, z. B. ein Menü am oberen Rand und eine Reihe häufig verwendeter Links am unteren Rand. Die mitarbeiter-, patienten- und abrechnungsspezifischen Seiten müssen dieses generische Layout möglicherweise anpassen. Beispielsweise sollten möglicherweise alle mitarbeiterspezifischen Seiten einen Kalender und eine Aufgabenliste enthalten, die die Verfügbarkeit und den täglichen Zeitplan des aktuell angemeldeten Benutzers anzeigt. Vielleicht müssen alle patientenspezifischen Seiten den Namen, die Adresse und die Versicherungsinformationen für den Patienten anzeigen, deren Informationen bearbeitet werden.

Es ist möglich, solche angepassten Layouts mithilfe von geschachtelten Masterseiten zu erstellen. Um das obige Szenario zu implementieren, erstellen wir zunächst eine Gestaltungsvorlage, die das websiteweite Layout, den Menü- und Fußzeileninhalt definiert hat, wobei ContentPlaceHolders die anpassbaren Bereiche definieren. Anschließend würden wir drei geschachtelte Masterseiten erstellen, eine für jeden Typ von Webseite. Jede geschachtelte Gestaltungsvorlage definiert den Inhalt unter den Arten von Inhaltsseiten, die die Gestaltungsvorlage verwenden. Mit anderen Worten, die geschachtelte Masterseite für patientenspezifische Inhaltsseiten würde Markup und Programmlogik zum Anzeigen von Informationen über den zu bearbeitenden Patienten enthalten. Beim Erstellen einer neuen patientenspezifischen Seite würden wir diese an diese geschachtelte Masterseite binden.

Dieses Tutorial beginnt mit der Hervorhebung der Vorteile von geschachtelten Masterseiten. Anschließend wird gezeigt, wie geschachtelte Masterseiten erstellt und verwendet werden.

Die Vorteile geschachtelter Masterseiten

Viele Websites verfügen über ein übergeordnetes Websitedesign sowie angepasstere Designs, die für bestimmte Seitentypen spezifisch sind. In unserer Demowebanwendung haben wir beispielsweise einen rudimentären Verwaltungsabschnitt (die Seiten im ~/Admin Ordner) erstellt. Derzeit verwenden die Webseiten im ~/Admin Ordner dieselbe Gestaltungsvorlage wie diese Seiten, die sich nicht im Verwaltungsabschnitt befinden (nämlich Site.master oder Alternate.master, je nach Auswahl des Benutzers).

Stellen Sie sich vor, dass wir aufgefordert wurden, das Layout der Verwaltungsseiten anzupassen, um zusätzliche Informationen oder Links einzuschließen, die sonst nicht auf anderen Seiten auf der Website vorhanden wären. Es gibt vier Techniken zum Implementieren dieser Anforderung:

1. Fügen Sie die verwaltungsspezifischen Informationen und Links zu jeder Inhaltsseite im ~/Admin Ordner manuell hinzu.
2. Aktualisieren Sie die Site.master Gestaltungsvorlage so, dass sie die abschnittsspezifischen Informationen und Links der Administration enthält, und fügen Sie der Gestaltungsvorlage Code hinzu, um diese Abschnitte anzuzeigen oder auszublenden, je nachdem, ob eine der Verwaltungsseiten besucht wird.
3. Erstellen Sie eine neue Gestaltungsvorlage speziell für den Abschnitt "Verwaltung", kopieren Sie das Markup aus Site.master, fügen Sie die abschnittsspezifischen Informationen und Links für die Administration hinzu, und aktualisieren Sie dann die Inhaltsseiten im ~/Admin Ordner, um diese neue Gestaltungsvorlage zu verwenden.
4. Erstellen Sie eine geschachtelte Masterseite, die an Site.master gebunden ist, und lassen Sie die Inhaltsseiten im ~/Admin Ordner diese neue geschachtelte Masterseite verwenden. Diese geschachtelte Masterseite würde nur die zusätzlichen Informationen und Links enthalten, die speziell auf die Verwaltungsseiten zugeschnitten sind und das bereits definierte Site.master Markup nicht wiederholen müssen.

Die erste Option ist die am wenigsten schmackhafte. Der Hauptzweck der Verwendung von Masterseiten besteht darin, sich davon zu entfernen, allgemeines Markup manuell auf neue ASP.NET-Seiten kopieren und einfügen zu müssen. Die zweite Option ist akzeptabel, macht die Anwendung jedoch weniger wartungsfreundlich, da sie die Masterseiten mit Markup aufbläht, das nur gelegentlich angezeigt wird, und erfordert, dass entwickler die Masterseite bearbeiten, um dieses Markup zu umgehen und sich daran zu erinnern, wann genau bestimmtes Markup angezeigt wird und wann es ausgeblendet ist. Dieser Ansatz wäre weniger tragfähig, da Anpassungen von mehr und mehr Webseitentypen von dieser einzelnen Masterseite berücksichtigt werden müssen.

Die dritte Option beseitigt die Unübersichtlichkeit und Komplexitätsprobleme, die mit der zweiten Option aufgetreten sind. Der Hauptnachteil von Option 3 besteht jedoch darin, dass wir das allgemeine Layout von Site.master auf die spezifische Masterseite des neuen Administrationsbereichs kopieren und einfügen müssen. Wenn wir uns später entscheiden, das websiteweite Layout zu ändern, müssen wir es an zwei Stellen ändern.

Die vierte Option, geschachtelte Gestaltungsvorlagen, geben uns das Beste aus den zweiten und dritten Optionen. Die websiteweiten Layoutinformationen werden in einer Datei – der Gestaltungsvorlage der obersten Ebene – verwaltet, während der inhalt, der für bestimmte Regionen spezifisch ist, in verschiedene Dateien getrennt wird.

Dieses Tutorial beginnt mit einem Blick auf die Erstellung und Verwendung einer einfachen verschachtelten Masterseite. Wir erstellen eine brandneue Masterseite auf oberster Ebene, zwei geschachtelte Masterseiten und zwei Inhaltsseiten. Beginnend mit "Verwendung einer geschachtelten Masterseite für den Verwaltungsabschnitt", wird die vorhandene Masterseitenarchitektur aktualisiert, um die Nutzung geschachtelter Masterseiten zu integrieren. Insbesondere erstellen wir eine geschachtelte Masterseite und verwenden sie, um zusätzlichen benutzerdefinierten Inhalt für die Inhaltsseiten im ~/Admin Ordner einzubinden.

Schritt 1: Erstellen einer einfachen Masterseite

Das Erstellen eines geschachtelten Masters basierend auf einer der vorhandenen Gestaltungsvorlagen und anschließendes Aktualisieren einer vorhandenen Inhaltsseite, um diese neue geschachtelte Gestaltungsvorlage anstelle der Gestaltungsvorlage auf oberster Ebene zu verwenden, erfordert eine gewisse Komplexität, da die vorhandenen Inhaltsseiten bereits bestimmte ContentPlaceHolder-Steuerelemente erwarten, die in der Gestaltungsvorlage der obersten Ebene definiert sind. Daher muss die geschachtelte Master-Seite auch dieselben ContentPlaceHolder-Steuerelemente mit denselben Namen enthalten. Darüber hinaus verfügt unsere spezielle Demoanwendung über zwei Gestaltungsvorlagen (Site.master und Alternate.master) die dynamisch einer Inhaltsseite basierend auf den Vorlieben eines Benutzers zugewiesen werden, was dieser Komplexität weiter hinzufügt. Wir werden später in diesem Tutorial die vorhandene Anwendung aktualisieren, um geschachtelte Masterseiten zu verwenden. Konzentrieren wir uns jedoch zuerst auf ein einfaches Beispiel für geschachtelte Masterseiten.

Erstellen Sie einen neuen Ordner namens NestedMasterPages , und fügen Sie dann eine neue Gestaltungsvorlagendatei zu diesem Ordner mit dem Namen Simple.masterhinzu. (Einen Screenshot des Solution Explorer nach dem Hinzufügen dieses Ordners und der Datei finden Sie in Abbildung 1.) Ziehen Sie die AlternateStyles.css Stylesheet-Datei aus dem Solution Explorer auf den Designer. Dadurch wird dem <head> Element in der Stylesheetdatei ein <link> Element hinzugefügt, nach dem das Markup des <head> Elements der Masterseite wie folgt aussehen soll:

<head runat="server"> 
 <title>Untitled Page</title> 
 <asp:ContentPlaceHolder id="head" runat="server"> 
 </asp:ContentPlaceHolder>
 <link href="../AlternateStyles.css" rel="stylesheet" type="text/css" /> 
</head>

Fügen Sie als Nächstes das folgende Markup in das Webformular von Simple.master ein:

<div id="topContent"> 
 <asp:HyperLink ID="lnkHome" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx" 
 Text="Nested Master Pages Tutorial (Simple)" /> 
</div> 
<div id="mainContent"> 
 <asp:ContentPlaceHolder id="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
</div>

Dieses Markup zeigt einen Link mit dem Titel "Geschachtelte Gestaltungsvorlagen (Einfach)" oben auf der Seite in einer großen weißen Schriftart auf einem Marinehintergrund an. Darunter befindet sich der MainContent ContentPlaceHolder. Abbildung 1 zeigt die Simple.master Masterseite, wenn sie im Visual Studio Designer geladen wird.

Die "Simple Dot Master"-Seite beim Laden im Visual Studio-Designer.

Abbildung 01: Die geschachtelte Masterseite definiert Inhalte, die für die Seiten im Abschnitt "Verwaltung" spezifisch sind (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Schritt 2: Erstellen einer einfach geschachtelten Masterseite

Simple.master enthält zwei ContentPlaceHolder-Steuerelemente: den ContentPlaceHolder, den MainContent wir im Webformular zusammen mit dem head ContentPlaceHolder im <head> Element hinzugefügt haben. Wenn wir eine Inhaltsseite erstellen und sie an Simple.master binden würden, hätte die Inhaltsseite zwei Inhaltssteuerelemente, die auf die beiden ContentPlaceHolder verweisen. Wenn wir eine geschachtelte Masterseite erstellen und sie an Simple.master binden, wird die geschachtelte Masterseite zwei Inhaltssteuerelemente haben.

Fügen wir nun eine neue geschachtelte Gestaltungsvorlage zum Ordner NestedMasterPages mit dem Namen SimpleNested.master hinzu. Klicken Sie mit der rechten Maustaste auf den NestedMasterPages Ordner, und wählen Sie "Neues Element hinzufügen" aus. Dadurch wird das Dialogfeld "Neues Element hinzufügen" in Abbildung 2 angezeigt. Wählen Sie den Vorlagentyp der Mastervorlage aus, und geben Sie den Namen der neuen Mastervorlage ein. Um anzugeben, dass die neue Masterseite eine geschachtelte Masterseite sein soll, aktivieren Sie das Kontrollkästchen "Masterseite auswählen".

Klicken Sie als Nächstes auf die Schaltfläche "Hinzufügen". Dadurch wird dasselbe Dialogfeld "Masterseite auswählen" angezeigt, das erscheint, wenn eine Inhaltsseite an eine Masterseite gebunden wird (siehe Abbildung 3). Wählen Sie die Masterseite Simple.master im NestedMasterPages Ordner aus und klicken Sie auf "OK".

Abbildung 02: Aktivieren des Kontrollkästchens "Gestaltungsvorlage auswählen" zum Hinzufügen einer geschachtelten Gestaltungsvorlage (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 03: Binden der geschachtelten Masterseite mit der Simple.master Masterseite (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Das deklarative Markup der geschachtelten Gestaltungsvorlage (siehe unten) enthält zwei Inhaltsbereiche, die auf die beiden ContentPlaceHolder-Steuerelemente der übergeordneten Masterseite verweisen.

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNested.master.vb" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 </asp:Content>

Mit Ausnahme der <%@ Master %> Direktive ist das anfängliche deklarative Markup der geschachtelten Master-Seite identisch mit dem Markup, das beim Binden einer Inhaltsseite an dieselbe Master-Seite auf oberster Ebene generiert wird. Ähnlich wie die Direktive einer Inhaltsseite <%@ Page %> enthält die <%@ Master %>-Direktive hier ein MasterPageFile-Attribut, das die übergeordnete Masterseite der geschachtelten Masterseite angibt. Der Hauptunterschied zwischen der geschachtelten Gestaltungsvorlage und einer Inhaltsseite, die an dieselbe Gestaltungsvorlage auf oberster Ebene gebunden ist, besteht darin, dass die geschachtelte Gestaltungsvorlage ContentPlaceHolder-Steuerelemente enthalten kann. Die ContentPlaceHolder-Steuerelemente der geschachtelten Gestaltungsvorlage definieren die Bereiche, in denen die Inhaltsseiten das Markup anpassen können.

Aktualisieren Sie diese geschachtelte Master-Seite so, dass sie den Text "Hallo von SimpleNested!" im Inhaltssteuerelement anzeigt, das dem MainContent ContentPlaceHolder-Steuerelement entspricht.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
</asp:Content>

Nachdem Sie diese Ergänzung vorgenommen haben, speichern Sie die geschachtelte Gestaltungsvorlage, und fügen Sie dann eine neue Inhaltsseite zum NestedMasterPages Ordner namens Default.aspx hinzu, und verknüpfen Sie sie mit der SimpleNested.master Gestaltungsvorlage. Wenn Sie diese Seite hinzufügen, könnten Sie überrascht sein, dass sie keine Inhaltssteuerungselemente enthält (siehe Abbildung 4)! Eine Inhaltsseite kann nur auf die ContentPlaceHolders der übergeordneten Masterseite zugreifen. SimpleNested.master enthält keine ContentPlaceHolder-Steuerelemente; Daher darf jede an diese Gestaltungsvorlage gebundene Inhaltsseite keine Inhaltssteuerelemente enthalten.

Abbildung 04: Die neue Inhaltsseite enthält keine Inhaltssteuerelemente (Klicken, um das Bild in voller Größe anzuzeigen)

Wir müssen die geschachtelte Masterseite (SimpleNested.master) aktualisieren, um ContentPlaceHolder einzuschließen. In der Regel möchten Sie, dass Ihre geschachtelten Gestaltungsvorlagen einen ContentPlaceHolder für jeden von der übergeordneten Gestaltungsvorlage definierten ContentPlaceHolder enthalten, sodass die untergeordnete Gestaltungsvorlage oder Inhaltsseite mit einem der ContentPlaceHolder-Steuerelemente der obersten Ebene arbeiten kann.

Aktualisieren Sie die Masterseite SimpleNested.master so, dass sie einen ContentPlaceHolder in ihre beiden Inhaltssteuerelemente einschließt. Weisen Sie den ContentPlaceHolder-Steuerelementen denselben Namen wie das ContentPlaceHolder-Steuerelement zu, auf das sich das Inhaltssteuerelement bezieht. Fügen Sie also ein ContentPlaceHolder-Steuerelement mit dem Namen MainContent in das Inhaltssteuerelement in SimpleNested.master ein, das auf den ContentPlaceHolder MainContent in Simple.master verweist. Führen Sie dasselbe im Inhaltssteuerelement aus, das auf den head ContentPlaceHolder verweist.

Nachdem Sie diese Ergänzungen vorgenommen haben, sollte das deklarative Markup Ihrer SimpleNested.master Masterseite wie folgt aussehen:

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNested.master.vb" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

Löschen Sie die Default.aspx soeben erstellte Inhaltsseite, und fügen Sie sie dann erneut hinzu, und binden Sie sie an die SimpleNested.master Gestaltungsvorlage. Dieses Mal fügt Visual Studio zwei Content-Steuerelemente zum Default.aspx hinzu, die die jetzt in SimpleNested.master definierten ContentPlaceHolder referenzieren (siehe Abbildung 6). Fügen Sie den Text "Hello, from Default.aspx!" in das Inhaltssteuerelement ein, auf das verwiesen wird MainContent.

Abbildung 5 zeigt die drei hier beteiligten Entitäten - Simple.masterund SimpleNested.master- und Default.aspx wie sie miteinander zusammenhängen. Wie das Diagramm zeigt, implementiert die geschachtelte Masterseite Inhaltssteuerelemente für den ContentPlaceHolder des übergeordneten Elements. Wenn diese Bereiche für die Inhaltsseite zugänglich sein sollen, muss die geschachtelte Gestaltungsvorlage eigene ContentPlaceHolders zu den Inhaltssteuerelementen hinzufügen.

Abbildung 05: Die Masterseiten der obersten Ebene und die geschachtelten Masterseiten bestimmen das Layout der Inhaltsseite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Dieses Verhalten veranschaulicht, wie eine Inhaltsseite oder Gestaltungsvorlage sich nur ihrer übergeordneten Gestaltungsvorlage bewusst ist. Dieses Verhalten wird auch vom Visual Studio-Designer angegeben. Abbildung 6 zeigt den Designer für Default.aspx. Der Designer zeigt deutlich, welche Bereiche von der Inhaltsseite bearbeitet werden können und welche Teile nicht bearbeitbar sind. Es wird jedoch nicht klargestellt, welche nicht bearbeitbaren Regionen von der verschachtelten Masterseite und welche von der Haupt-Masterseite stammen.

Abbildung 06: Die Inhaltsseite enthält jetzt Inhaltssteuerungen für die ContentPlaceHolders der verschachtelten Masterseite (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Schritt 3: Hinzufügen einer zweiten einfachen verschachtelten Masterseite

Der Vorteil geschachtelter Gestaltungsvorlagen ist deutlicher, wenn mehrere geschachtelte Gestaltungsvorlagen vorhanden sind. Um diesen Vorteil zu veranschaulichen, erstellen Sie eine weitere geschachtelte Gestaltungsvorlage im NestedMasterPages Ordner. Benennen Sie diese neue geschachtelte Gestaltungsvorlage SimpleNestedAlternate.master , und binden Sie sie an die Simple.master Gestaltungsvorlage. Fügen Sie ContentPlaceHolder-Steuerelemente in die beiden Inhaltssteuerelemente der geschachtelten Masterseite ein, wie wir es in Schritt 2 gemacht haben. Fügen Sie außerdem den Text "Hello, from SimpleNestedAlternate!" im Inhaltssteuerelement hinzu, das dem ContentPlaceHolder der Vorlage MainContent der obersten Ebene entspricht. Nachdem Sie diese Änderungen vorgenommen haben, sollte das deklarative Markup der neuen geschachtelten Masterseite wie folgt aussehen:

<%@ Master Language="VB" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNestedAlternate.master.vb" Inherits="NestedMasterPages_SimpleNestedAlternate" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <asp:ContentPlaceHolder ID="head" runat="server">
 </asp:ContentPlaceHolder> </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <p>Hello, from SimpleNestedAlternate!</p> 
 <asp:ContentPlaceHolder ID="MainContent" runat="server">
 </asp:ContentPlaceHolder> 
 </asp:Content>

Erstellen Sie eine Inhaltsseite namens Alternate.aspx im Ordner NestedMasterPages und binden Sie sie an die verschachtelte Masterseite SimpleNestedAlternate.master. Fügen Sie den Text "Hello, from Alternate!" im Inhaltssteuerelement hinzu, das entspricht MainContent. Abbildung 7 zeigt Alternate.aspx, wenn es im Visual Studio-Designer angezeigt wird.

Abbildung 07: Alternate.aspx ist an die Masterseite SimpleNestedAlternate.master gebunden (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Vergleichen Sie den Designer in Abbildung 7 mit dem Designer in Abbildung 6. Beide Inhaltsseiten verwenden das gleiche Layout, das in der Gestaltungsvorlage der obersten Ebene (Simple.master) mit dem Titel "Tutorial für geschachtelte Master-Seiten (einfach)" definiert ist. Beide haben jedoch in ihren übergeordneten Gestaltungsvorlagen unterschiedliche Inhalte definiert – der Text "Hello, from SimpleNested!" in Abbildung 6 und "Hello, from SimpleNestedAlternate!" in Abbildung 7. Zugegeben, diese Unterschiede sind hier trivial, aber Sie könnten dieses Beispiel erweitern, um aussagekräftigere Unterschiede einzuschließen. Beispielsweise kann die SimpleNested.master Seite ein Menü mit Optionen enthalten, die spezifisch für ihre Inhaltsseiten sind, während SimpleNestedAlternate.master Informationen enthält, die relevant für die Inhaltsseiten sind, die an diese gebunden sind.

Stellen Sie sich nun vor, dass wir eine Änderung am übergeordneten Websitelayout vornehmen mussten. Angenommen, wir wollten eine Liste allgemeiner Links zu allen Inhaltsseiten hinzufügen. Dazu aktualisieren wir die Masterseite der obersten Ebene. Simple.master Alle Änderungen werden sofort in ihren verschachtelten Gestaltungsvorlagen und in der Folge in ihren Inhaltsseiten widerspiegelt.

Um die Leichtigkeit zu veranschaulichen, mit der wir das übergeordnete Websitelayout ändern können, öffnen Sie die Simple.master Gestaltungsvorlage, und fügen Sie das folgende Markup zwischen den topContent Elementen mainContent<div> hinzu:

<div id="navContent"> 
 <asp:HyperLink ID="lnkDefault" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx" 
 Text="Nested Master Page Example 1" /> 
 | 
 <asp:HyperLink ID="lnkAlternate" runat="server" 
 NavigateUrl="~/NestedMasterPages/Alternate.aspx" 
 Text="Nested Master Page Example 2" /> 
</div>

Dadurch werden oben auf jeder Seite zwei Links hinzugefügt, die an Simple.master, SimpleNested.master oder SimpleNestedAlternate.master gebunden sind; diese Änderungen gelten umgehend für alle geschachtelten Master Pages und deren Inhaltsseiten. Abbildung 8 zeigt Alternate.aspx in einem Browser. Beachten Sie das Hinzufügen der Links oben auf der Seite (im Vergleich zu Abbildung 7).

Abbildung 08: Änderungen an der Gestaltungsvorlage auf oberster Ebene werden sofort in den geschachtelten Gestaltungsvorlagen und deren Inhaltsseiten widergespiegelt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Verwenden einer geschachtelten Masterseite für den Bereich "Verwaltung"

Bis zu diesem Punkt haben wir nun die Vorteile geschachtelter Masterseiten untersucht und gesehen, wie sie in einer ASP.NET-Anwendung erstellt und verwendet werden. In den Beispielen in Schritt 1, 2 und 3 wurden jedoch eine neue Masterseite auf oberster Ebene, neue geschachtelte Masterseiten und neue Inhaltsseiten erstellt. Was ist mit dem Hinzufügen einer neuen geschachtelten Masterseite zu einer Website mit einer vorhandenen Masterseite auf oberster Ebene und Inhaltsseiten?

Das Integrieren einer geschachtelten Masterseite in eine vorhandene Website und die Zuordnung zu vorhandenen Inhaltsseiten ist etwas aufwendiger, als von Grund auf neu zu beginnen. Die Schritte 4, 5, 6 und 7 untersuchen diese Herausforderungen, während wir unsere Demoanwendung erweitern, um eine neue geschachtelte Gestaltungsvorlage mit dem Namen AdminNested.master zu enthalten, die Anweisungen für den Administrator enthält und von den ASP.NET Seiten im ~/Admin Ordner verwendet wird.

Die Integration einer geschachtelten Masterseite in unsere Demoanwendung bringt die folgenden Herausforderungen mit sich:

• Die vorhandenen Inhaltsseiten im ~/Admin, Ordner haben bestimmte Erwartungen an ihre Masterseite. Zunächst erwarten sie, dass bestimmte ContentPlaceHolder-Steuerelemente vorhanden sind. Darüber hinaus rufen die ~/Admin/AddProduct.aspx Seiten die öffentliche RefreshRecentProductsGrid Methode der Masterseite auf, legen ihre GridMessageText Eigenschaft fest oder verfügen über einen Ereignishandler für ihr PricesDoubled Ereignis. Daher muss unsere geschachtelte Masterseite dieselben ContentPlaceHolders und öffentlichen Mitglieder bereitstellen.
• Im vorherigen Lernprogramm haben wir die BasePage Klasse erweitert, um die Eigenschaft des PageMasterPageFile Objekts basierend auf einer Sitzungsvariable dynamisch festzulegen. Wie unterstützen wir dynamische Masterseiten bei der Verwendung von geschachtelten Masterseiten?

Diese beiden Herausforderungen werden sichtbar, wenn wir die geschachtelte Masterseite erstellen und sie von unseren vorhandenen Inhaltsseiten aus verwenden. Wir untersuchen und überwinden diese Probleme, sobald sie auftreten.

Schritt 4: Erstellen der geschachtelten Masterseite

Unsere erste Aufgabe besteht darin, die geschachtelte Masterseite zu erstellen, die von den Seiten im Abschnitt "Verwaltung" verwendet werden soll. Wie wir in Schritt 2 gesehen haben, müssen wir beim Hinzufügen einer neuen geschachtelten Master-Seite die übergeordnete Master-Seite angeben. Aber wir haben zwei Masterseiten auf oberster Ebene: Site.master und Alternate.master. Erinnern Sie sich daran, dass wir im vorherigen Lernprogramm Alternate.master erstellt und Code in der BasePage-Klasse geschrieben haben, die die MasterPageFile-Eigenschaft des Page-Objekts zur Laufzeit auf Site.master oder Alternate.master festlegt, abhängig vom Wert der MyMasterPage-Session-Variablen.

Wie konfigurieren wir unsere geschachtelte Masterseite so, dass sie die entsprechende Masterseite auf oberster Ebene verwendet? Es gibt zwei Möglichkeiten:

• Erstellen Sie zwei geschachtelte Gestaltungsvorlagen, AdminNestedSite.master und AdminNestedAlternate.master, und binden Sie sie an die Gestaltungsvorlagen Site.master und Alternate.master der obersten Ebene, jeweils an. Anschließend legen wir BasePage das Page-Objekt MasterPageFile auf der entsprechenden geschachtelten Gestaltungsvorlage fest.
• Erstellen Sie eine einzelne geschachtelte Masterseite, und lassen Sie die Inhaltsseiten diese bestimmte Masterseite verwenden. Anschließend müssen wir zur Laufzeit die Eigenschaft der geschachtelten Gestaltungsvorlage MasterPageFile auf die entsprechende Gestaltungsvorlage auf oberster Ebene zur Laufzeit festlegen. (Wie Sie jetzt vielleicht herausgefunden haben, verfügen Masterseiten auch über eine MasterPageFile Eigenschaft.)

Lassen Sie uns die zweite Option verwenden. Erstellen Sie eine einzelne geschachtelte Masterseitendatei im ~/Admin-Ordner mit dem Namen AdminNested.master. Da sowohl Site.master als auch Alternate.master über denselben Satz von ContentPlaceHolder-Steuerelementen verfügen, ist es egal, an welche Gestaltungsvorlage Sie sie binden, obwohl ich Sie dazu ermutige, sie zur Konsistenz an Site.master zu binden.

Abbildung 09: Hinzufügen einer geschachtelten Masterseite zum ~/Admin Ordner. (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Da die geschachtelte Masterseite an eine Masterseite mit vier ContentPlaceHolder-Steuerelementen gebunden ist, fügt Visual Studio dem anfänglichen Markup der neuen geschachtelten Masterseite vier Content-Steuerelemente hinzu. Wie in Schritt 2 und 3, fügen Sie in jedem Inhaltssteuerelement ein ContentPlaceHolder-Steuerelement hinzu und benennen es gleich wie des ContentPlaceHolder-Steuerelements der übergeordneten Masterseite. Fügen Sie außerdem das folgende Markup zum Inhaltssteuerelement hinzu, das dem MainContent ContentPlaceHolder entspricht:

<div class="instructions"> 
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
</div>

Definieren Sie als Nächstes die instructions CSS-Klasse in den Styles.css und AlternateStyles.css CSS-Dateien. Die folgenden CSS-Regeln bewirken, dass HTML-Elemente, die mit der instructions Klasse formatiert sind, mit einer hellgelben Hintergrundfarbe und einem schwarzen, durchgezogenen Rahmen angezeigt werden:

.instructions 
{
 padding: 6px; 
 border: dashed 1px black; 
 background-color: #ffb; 
 margin-bottom: 10px; 
}

Da dieses Markup der geschachtelten Gestaltungsvorlage hinzugefügt wurde, wird es nur auf diesen Seiten angezeigt, die diese geschachtelte Gestaltungsvorlage verwenden (nämlich die Seiten im Abschnitt "Verwaltung").

Nachdem Sie diese Ergänzungen zu Ihrer geschachtelten Masterseite vorgenommen haben, sollte das deklarative Markup wie folgt aussehen:

<%@ Master Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="AdminNested.master.vb" Inherits="Admin_AdminNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <div class="instructions">
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
 </div>
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server"> 
 <asp:ContentPlaceHolder ID="QuickLoginUI" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server"> 
 <asp:ContentPlaceHolder ID="LeftColumnContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

Beachten Sie, dass jedes Content-Steuerelement über ein ContentPlaceHolder-Steuerelement verfügt und dass den Eigenschaften der ContentPlaceHolder-Steuerelemente ID dieselben Werte zugewiesen werden wie den entsprechenden ContentPlaceHolder-Steuerelementen auf der Masterseite der obersten Ebene. Darüber hinaus wird das Abschnittsspezifisches Markup "Administration" im MainContent ContentPlaceHolder angezeigt.

Abbildung 10 zeigt die AdminNested.master geschachtelte Masterseite, wenn sie im Visual Studio-Designer angezeigt wird. Die Anweisungen werden im gelben Feld oben im MainContent Inhaltssteuerelement angezeigt.

Abbildung 10: Die geschachtelte Master-Seite erweitert die Master-Seite der obersten Ebene und schließt Anweisungen für den Administrator ein. (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 5: Aktualisieren der vorhandenen Inhaltsseiten, um die neue geschachtelte Masterseite zu verwenden

Wenn wir dem Abschnitt "Verwaltung" eine neue Inhaltsseite hinzufügen, müssen wir sie an die Masterseite, die wir soeben erstellt haben, binden. Aber was ist mit den vorhandenen Inhaltsseiten? Derzeit leiten sich alle Inhaltsseiten auf der Website von der BasePage Klasse ab, die programmgesteuert die Masterseite der Inhaltsseite zur Laufzeit festlegt. Dies ist nicht das gewünschte Verhalten für die Inhaltsseiten im Abschnitt "Verwaltung". Stattdessen sollen diese Inhaltsseiten immer die AdminNested.master Seite verwenden. Es liegt in der Verantwortung der geschachtelten Masterseite, die richtige Inhaltsseite auf oberster Ebene zur Laufzeit auszuwählen.

Um dieses gewünschte Verhalten zu erreichen, besteht darin, eine neue benutzerdefinierte Basisseitenklasse AdminBasePage zu erstellen, die die BasePage Klasse erweitert. AdminBasePage kann dann das SetMasterPageFile überschreiben und das Page ObjektMasterPageFile auf den hart-codierten Wert "~/Admin/AdminNested.master" festlegen. Auf diese Weise verwendet jede Seite, die von AdminBasePage abgeleitet wird, AdminNested.master, während jede Seite, die von BasePage abgeleitet wird, ihre MasterPageFile Eigenschaft dynamisch entweder auf "~/Site.master" oder "~/Alternate.master" basierend auf dem Wert der MyMasterPage Sitzungsvariable festlegt.

Fügen Sie zunächst eine neue Klassendatei in den Ordner App_Code mit dem Namen AdminBasePage.vb hinzu. Erweitern Sie AdminBasePage um BasePage und überschreiben Sie dann die Methode SetMasterPageFile. Weisen Sie in dieser Methode den MasterPageFile Wert "~/Admin/AdminNested.master" zu. Nachdem Sie diese Änderungen vorgenommen haben, sollte die Klassendatei wie folgt aussehen:

Public Class AdminBasePage 
 Inherits BasePage 
 Protected Overrides Sub SetMasterPageFile() 
 Me.MasterPageFile = "~/Admin/AdminNested.master" 
 End Sub 
End Class

Wir müssen nun die vorhandenen Inhaltsseiten im Abschnitt "Verwaltung" von AdminBasePage anstelle von BasePage ableiten. Wechseln Sie zur CodeBehind-Klassendatei für jede Inhaltsseite im ~/Admin Ordner, und nehmen Sie diese Änderung vor. Ändern Sie beispielsweise die ~/Admin/Default.aspx CodeBehind-Klassendeklaration aus:

Partial Class Admin_Default 
 Inherits BasePage

An:

Partial Class Admin_Default 
 Inherits AdminBasePage

Abbildung 11 zeigt, wie die Gestaltungsvorlage der obersten Ebene (Site.master oder Alternate.master), die geschachtelte Gestaltungsvorlage (AdminNested.master) und die Inhaltsseiten des Verwaltungsabschnitts miteinander zusammenhängen.

Abbildung 11: Die geschachtelte Masterseite definiert Inhalte, die spezifisch für die Seiten im Abschnitt "Verwaltung" sind (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Schritt 6: Spiegelung der öffentlichen Methoden und Eigenschaften der Masterseite

Erinnern Sie sich daran, dass die ~/Admin/AddProduct.aspx und ~/Admin/Products.aspx Seiten programmgesteuert mit der Masterseite interagieren: ~/Admin/AddProduct.aspx ruft die öffentliche RefreshRecentProductsGrid Methode der Masterseite auf und legt deren GridMessageText Eigenschaft fest; ~/Admin/Products.aspx verfügt über einen Ereignishandler für das PricesDoubled Event. Im vorherigen Tutorial haben wir eine MustInheritBaseMasterPage Klasse erstellt, die diese öffentlichen Member definiert hat.

Die Seiten ~/Admin/AddProduct.aspx und ~/Admin/Products.aspx gehen davon aus, dass ihre Masterseite von der Klasse BaseMasterPage abgeleitet wird. Die AdminNested.master Seite erweitert derzeit die System.Web.UI.MasterPage Klasse. Daher wird beim Besuch ~/Admin/Products.aspx eines InvalidCastException Objekts mit der Meldung "Objekt vom Typ 'ASP.admin_adminnested_master' nicht in den Typ 'BaseMasterPage' umwandeln können" ausgelöst.

Um dies zu beheben, müssen wir die AdminNested.master CodeBehind-Klasse erweitern BaseMasterPage. Aktualisieren Sie die CodeBehind-Klassendeklaration der geschachtelten Masterseite von:

Partial Class Admin_AdminNested 
 Inherits System.Web.UI.MasterPage

An:

Partial Class Admin_AdminNested 
 Inherits BaseMasterPage

Wir sind noch nicht fertig. Wir müssen die als MustOverride gekennzeichneten Mitglieder überschreiben, nämlich RefreshRecentProductsGrid und GridMessageText. Diese Mitglieder werden von den obersten Masterseiten verwendet, um ihre Benutzeroberflächen zu aktualisieren. (Tatsächlich verwendet nur die Masterseite Site.master diese Methoden, obgleich beide Masterseiten auf oberster Ebene diese Methoden implementieren, da beide BaseMasterPage erweitern.)

Obwohl wir diese Member in AdminNested.master implementieren müssen, müssen alle diese Implementierungen einfach das gleiche Mitglied auf der Masterseite der obersten Ebene aufrufen, die von der geschachtelten Masterseite verwendet wird. Wenn beispielsweise eine Inhaltsseite im Abschnitt "Verwaltung" die Methode RefreshRecentProductsGrid der geschachtelten Masterseite aufruft, muss diese lediglich die Methode RefreshRecentProductsGrid von Site.master oder Alternate.master aufrufen.

Um dies zu erreichen, fügen Sie zunächst die folgende @MasterType Direktive am Anfang von AdminNested.master hinzu.

<%@ MasterType TypeName="BaseMasterPage" %>

Beachten Sie, dass die Direktive @MasterType der Code-Behind-Klasse mit dem Namen Master eine stark typisierte Eigenschaft hinzufügt. Überschreiben Sie dann die RefreshRecentProductsGrid und GridMessageText Member, und delegieren Sie einfach den Aufruf an die entsprechende Methode von Master.

Partial Class Admin_AdminNested 
 Inherits BaseMasterPage 
 Public Overrides Property GridMessageText() As String 
 Get 
 Return Master.GridMessageText 
 End Get 
 Set(ByVal value As String) 
 Master.GridMessageText = value 
 End Set 
 End Property 
 Public Overrides Sub RefreshRecentProductsGrid()
 Master.RefreshRecentProductsGrid()
 End Sub 
End Class

Mit diesem Code sollten Sie in der Lage sein, die Inhaltsseiten im Abschnitt "Verwaltung" zu besuchen und zu verwenden. Abbildung 12 zeigt die ~/Admin/Products.aspx Seite, wenn sie in einem Browser angezeigt wird. Wie Sie sehen können, enthält die Seite das Kasten "Verwaltungsanweisungen", das in der verschachtelten Masterseite definiert ist.

Abbildung 12: Die Inhaltsseiten im Abschnitt "Verwaltung" enthalten Anweisungen oben auf jeder Seite (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 7: Verwenden der geeigneten Masterseite auf oberer Ebene zur Laufzeit

Während alle Inhaltsseiten im Abschnitt "Verwaltung" voll funktionsfähig sind, verwenden sie alle die gleiche Gestaltungsvorlage auf oberster Ebene und ignorieren die vom Benutzer ausgewählte Gestaltungsvorlage ChooseMasterPage.aspx. Dieses Verhalten ist darauf zurückzuführen, dass die geschachtelte Masterseite ihre MasterPageFile-Eigenschaft in der <%@ Master %>-Direktive statisch auf Site.master gesetzt hat.

Um die vom Endbenutzer ausgewählte Masterseite der obersten Ebene zu verwenden, muss die Eigenschaft von AdminNested.master auf den Wert in der Sitzungsvariable MyMasterPage festgelegt werden. Da wir die Eigenschaften der Inhaltsseiten MasterPageFile festlegen BasePage, denken Sie möglicherweise, dass wir die Eigenschaft der geschachtelten Gestaltungsvorlage MasterPageFile in BaseMasterPage oder in der AdminNested.masterCodeBehind-Klasse festlegen würden. Dies funktioniert jedoch nicht, da die MasterPageFile-Eigenschaft bis zum Ende der PreInit-Phase festgelegt sein muss. Der früheste Zeitpunkt, zu dem wir programmgesteuert auf den Seitenlebenszyklus einer Masterseite zugreifen können, ist die Init-Phase (die nach der PreInit-Phase auftritt).

Daher müssen wir die Eigenschaft der verschachtelten Masterseite MasterPageFile von den Inhaltsseiten definieren. Die einzigen Inhaltsseiten, die die AdminNested.master Masterseite verwenden, stammen von AdminBasePage. Daher können wir diese Logik dort platzieren. In Schritt 5 haben wir die SetMasterPageFile Methode überschrieben und die Eigenschaft des MasterPageFile Page-Objekts auf "~/Admin/AdminNested.master" festgelegt. Aktualisieren Sie SetMasterPageFile, um die Eigenschaft der Master-Seite MasterPageFile ebenfalls auf das Ergebnis festzulegen, das in der Sitzung gespeichert ist.

Public Class AdminBasePage 
 Inherits BasePage 
 Protected Overrides Sub SetMasterPageFile() 
 Me.MasterPageFile = "~/Admin/AdminNested.master" 
 Page.Master.MasterPageFile = MyBase.GetMasterPageFileFromSession() 
 End Sub 
End Class

Die GetMasterPageFileFromSession Methode, die wir der BasePage Klasse im vorherigen Lernprogramm hinzugefügt haben, gibt den entsprechenden Dateipfad der Masterseite basierend auf dem Wert der Session-Variablen zurück.

Mit dieser Änderung wird die Master-Seiten-Auswahl des Benutzers in den Abschnitt "Verwaltung" übertragen. Abbildung 13 zeigt dieselbe Seite wie Abbildung 12, aber nachdem der Benutzer seine Gestaltungsvorlagenauswahl auf Alternate.master geändert hat.

Die Seite "Geschachtelte Verwaltung" verwendet die vom Benutzer ausgewählte Masterseite der obersten Ebene.

Abbildung 13: Die Seite "Geschachtelte Administrationsseite" verwendet die vom Benutzer ausgewählte Masterseite der obersten Ebene (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Ähnlich wie Inhaltsseiten an eine Master-Seite gebunden werden können, kann eine untergeordnete Master-Seite an eine übergeordnete Master-Seite gebunden werden, um geschachtelte Master-Seiten zu erstellen. Die untergeordnete Masterseite kann Inhaltssteuerelemente für jeden ContentPlaceHolder des übergeordneten Elements definieren; anschließend kann sie zu diesen Inhaltssteuerelementen eigene ContentPlaceHolder-Steuerelemente sowie weiteres Markup hinzufügen. Geschachtelte Gestaltungsvorlagen sind in großen Webanwendungen sehr nützlich, bei denen alle Seiten ein übergeordnetes Design und Erscheinungsbild aufweisen, aber bestimmte Abschnitte der Website erfordern spezifische Anpassungen.

Glückliche Programmierung!

Weitere Lektüre

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

• Geschachtelte ASP.NET Masterseiten
• Tipps für geschachtelte Masterseiten und VS 2005-Entwurfsmodus
• VS 2008 Unterstützung für verschachtelte 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

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn das der Fall ist, schreiben Sie mir eine Nachricht an mitchell@4GuysFromRolla.com