Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Microsoft
In diesem Tutorial erfahren Sie, wie Sie ein allgemeines Seitenlayout für mehrere Seiten in Ihrer Anwendung erstellen, indem Sie die Ansicht master Seiten nutzen. Sie können eine Ansicht master Seite verwenden, um z. B. ein zweispaltiges Seitenlayout zu definieren und das zweispaltige Layout für alle Seiten in Ihrer Webanwendung zu verwenden.
Erstellen von Seitenlayouts mit Gestaltungsvorlagen anzeigen
In diesem Tutorial erfahren Sie, wie Sie ein allgemeines Seitenlayout für mehrere Seiten in Ihrer Anwendung erstellen, indem Sie die Ansicht master Seiten nutzen. Sie können eine Ansicht master Seite verwenden, um z. B. ein zweispaltiges Seitenlayout zu definieren und das zweispaltige Layout für alle Seiten in Ihrer Webanwendung zu verwenden.
Sie können auch die Vorteile der Ansicht master Seiten nutzen, um gemeinsame Inhalte auf mehreren Seiten in Ihrer Anwendung freizugeben. Beispielsweise können Sie Ihr Websitelogo, Navigationslinks und Banneranzeigen in einer Ansicht master Seite platzieren. Auf diese Weise würde jeder Seite in Ihrer Anwendung dieser Inhalt automatisch angezeigt.
In diesem Tutorial erfahren Sie, wie Sie eine neue Ansicht master Seite erstellen und basierend auf der seite master eine neue Ansichtsinhaltsseite erstellen.
Erstellen einer Gestaltungsvorlage für Ansicht
Zunächst erstellen wir eine Ansicht master Seite, die ein zweispaltiges Layout definiert. Sie fügen einem MVC-Projekt eine neue Ansicht master Seite hinzu, indem Sie mit der rechten Maustaste auf den Ordner Views\Shared klicken, die Menüoption Hinzufügen, Neues Element auswählen und die Vorlage MVC-Gestaltungsvorlage Ansichtsmasterseite auswählen (siehe Abbildung 1).
Abbildung 01: Hinzufügen einer Ansicht master Seite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Sie können mehrere Ansichten master Seite in einer Anwendung erstellen. Jede Ansicht master Seite kann ein anderes Seitenlayout definieren. Beispielsweise können Sie möchten, dass bestimmte Seiten ein zweispaltiges Layout und andere Seiten ein dreispaltiges Layout haben.
Eine Ansicht master Seite ähnelt einer Standardansicht ASP.NET MVC. Im Gegensatz zu einer normalen Ansicht enthält eine Ansicht master Seite jedoch ein oder <asp:ContentPlaceHolder> mehrere Tags. Die <contentplaceholder> Tags werden verwendet, um die Bereiche der master Seite zu markieren, die in einer einzelnen Inhaltsseite überschrieben werden können.
Beispielsweise definiert die Ansicht master Seite in Eintrag 1 ein zweispaltiges Layout. Es enthält zwei <contentplaceholder> Tags. Eine <ContentPlaceHolder> für jede Spalte.
Eintrag 1 – Views\Shared\Site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
html
{
background-color:gray;
}
.column
{
float:left;
width:300px;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:500px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<h1>My Website</h1>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Der Text der Ansicht master Seite in Listing 1 enthält zwei <div> Tags, die den beiden Spalten entsprechen. Die Cascading StyleSheet-Spaltenklasse wird auf beide <div> Tags angewendet. Diese Klasse wird in dem Stylesheet definiert, das oben auf der seite master deklariert wird. Sie können eine Vorschau anzeigen, wie die Ansicht master Seite gerendert wird, indem Sie zur Entwurfsansicht wechseln. Klicken Sie unten links im Quellcode-Editor auf die Registerkarte Entwurf (siehe Abbildung 2).
Abbildung 02: Vorschau einer master Seite im Designer (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Erstellen einer Ansichtsinhaltsseite
Nachdem Sie eine Ansicht master Seite erstellt haben, können Sie eine oder mehrere Ansichtsinhaltsseiten basierend auf der Ansicht master Seite erstellen. Sie können beispielsweise eine Inhaltsseite für die Indexansicht für den Startcontroller erstellen, indem Sie mit der rechten Maustaste auf den Ordner Ansichten\Start klicken , Hinzufügen, Neues Element auswählen, die Vorlage MVC-Ansichtsinhaltsseite auswählen, den Namen Index.aspx eingeben und auf die Schaltfläche Hinzufügen klicken (siehe Abbildung 3).
Abbildung 03: Hinzufügen einer Ansichtsinhaltsseite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Nachdem Sie auf die Schaltfläche Hinzufügen geklickt haben, wird ein neues Dialogfeld angezeigt, in dem Sie eine Ansicht master Seite auswählen können, die der Ansichtsinhaltsseite zugeordnet werden soll (siehe Abbildung 4). Sie können zur Website navigieren. master master Seite anzeigen, die wir im vorherigen Abschnitt erstellt haben.
Abbildung 04: Auswählen einer master Seite (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Nachdem Sie eine neue Ansichtsinhaltsseite basierend auf der Website erstellt haben. master master Seite erhalten Sie die Datei in Listing 2.
Eintrag 2 – Views\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
Beachten Sie, dass diese Ansicht ein <asp:Content> Tag enthält, das jedem Tag in der <asp:ContentPlaceHolder> Ansicht master Seite entspricht. Jedes <asp:Content> Tag enthält ein ContentPlaceHolderID-Attribut, das auf das Bestimmte <asp:ContentPlaceHolder> verweist, das es überschreibt.
Beachten Sie außerdem, dass die Inhaltsansichtsseite in Listing 2 keine der normalen öffnenden und schließenden HTML-Tags enthält. Sie enthält beispielsweise nicht die Öffnenden und Schließenden <html> - oder <head> -Tags. Alle normalen öffnenden und schließenden Tags sind in der Ansicht master Seite enthalten.
Alle Inhalte, die sie auf einer Ansichtsinhaltsseite anzeigen möchten, müssen in einem <asp:Content> Tag platziert werden. Wenn Sie HTML- oder andere Inhalte außerhalb dieser Tags platzieren, erhalten Sie eine Fehlermeldung, wenn Sie versuchen, die Seite anzuzeigen.
Sie müssen nicht jedes <asp:ContentPlaceHolder> Tag einer master-Seite in einer Inhaltsansichtsseite überschreiben. Sie müssen ein <asp:ContentPlaceHolder> Tag nur überschreiben, wenn Sie das Tag durch einen bestimmten Inhalt ersetzen möchten.
Beispielsweise enthält die geänderte Indexansicht in Listing 3 nur zwei <asp:Content> Tags. Jedes der <asp:Content> Tags enthält Text.
Eintrag 3 – Views\Home\Index.aspx (modified)
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Content in first column!</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h1>Content in second column!</h1>
</asp:Content>
Wenn die Ansicht in Listing 3 angefordert wird, wird die Seite in Abbildung 5 gerendert. Beachten Sie, dass die Ansicht eine Seite mit zwei Spalten rendert. Beachten Sie außerdem, dass der Inhalt der Ansichtsinhaltsseite mit dem Inhalt der Ansicht master Seite zusammengeführt wird.
Abbildung 05: Inhaltsseite der Indexansicht (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)
Ändern des Gestaltungsvorlageninhalts der Ansicht
Ein Problem, das bei der Arbeit mit ansichts- master-Seiten fast sofort auftritt, ist das Problem beim Ändern der Ansicht master Seiteninhalts, wenn unterschiedliche Seiten mit Ansichtsinhalt angefordert werden. Beispielsweise soll jede Seite in Ihrer Webanwendung über einen eindeutigen Titel verfügen. Der Titel wird jedoch in der Ansicht master Seite und nicht auf der Ansichtsinhaltsseite deklariert. Wie passen Sie also den Seitentitel für jede Ansichtsinhaltsseite an?
Es gibt zwei Möglichkeiten, den titel zu ändern, der von einer Ansichtsinhaltsseite angezeigt wird. Zunächst können Sie dem title-Attribut der <%@ page %> Direktive, die oben auf einer Ansichtsinhaltsseite deklariert wurde, einen Seitentitel zuweisen. Wenn Sie beispielsweise der Indexansicht den Seitentitel "Super Great Website" zuweisen möchten, können Sie oben in der Indexansicht die folgende Direktive einfügen:
<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>
Wenn die Indexansicht im Browser gerendert wird, wird der gewünschte Titel in der Titelleiste des Browsers angezeigt:
Es gibt eine wichtige Anforderung, die eine master Ansichtsseite erfüllen muss, damit das title-Attribut funktioniert. Die Ansicht master Seite muss ein <head runat="server"> Tag anstelle eines normalen <head> Tags für die Kopfzeile enthalten. Wenn das <head> Tag das attribut runat="server" nicht enthält, wird der Titel nicht angezeigt. Die Standardansicht master Seite enthält das erforderliche <head runat="server"> Tag.
Ein alternativer Ansatz zum Ändern master Seiteninhalts einer einzelnen Ansichtsinhaltsseite besteht darin, den Bereich, den Sie ändern möchten, in einem <asp:ContentPlaceHolder> Tag umzuschließen. Angenommen, Sie möchten nicht nur den Titel ändern, sondern auch die Metatags, die von einer master Ansichtsseite gerendert werden. Die master Ansichtsseite in Listing 4 enthält ein <asp:ContentPlaceHolder> Tag in seinem <head> Tag.
Eintrag 4 – Views\Shared\Site2.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
<title>Please change my title</title>
<meta name="description" content="Please provide a description" />
<meta name="keywords" content="keyword1,keyword2" />
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Beachten Sie, dass das <asp:ContentPlaceHolder> Tag in Listing 4 Standardinhalte enthält: einen Standardtitel und Standardmetatags. Wenn Sie dieses <asp:ContentPlaceHolder> Tag nicht auf einer einzelnen Ansichtsinhaltsseite überschreiben, wird der Standardinhalt angezeigt.
Die Inhaltsansichtsseite in Listing 5 setzt das <asp:ContentPlaceHolder> Tag außer Kraft, um einen benutzerdefinierten Titel und benutzerdefinierte Metatags anzuzeigen.
Auflistung 5 – Views\Home\Index2.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>The Index2 Page</title>
<meta name="description" content="Description of Index2 page" />
<meta name="keywords" content="asp.net,mvc,cool,groovy" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Just some content in the body of the page.
</asp:Content>
Zusammenfassung
In diesem Tutorial erhalten Sie eine grundlegende Einführung zum Anzeigen master und Anzeigen von Inhaltsseiten. Sie haben gelernt, wie Sie eine neue Ansicht master Seiten erstellen und basierend darauf Seiten mit Ansichtsinhalten erstellen. Wir haben auch untersucht, wie Sie den Inhalt einer Ansicht master Seite von einer bestimmten Ansichtsinhaltsseite aus ändern können.