1. Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : Creating Page Layouts with View Master Pages
2. Introduction▲
Dans ce tutoriel, vous allez apprendre à créer une page de design commune pour toutes les autres pages de votre application, grâce aux View Master Pages. Par exemple, vous pouvez utiliser une View Master Page, pour définir un design à deux colonnes et utiliser ce même design pour toutes les pages de votre application web.
Vous pouvez également utiliser les View Master Pages pour partager un contenu commun à toutes vos pages. Par exemple, vous pouvez placer votre logo, votre menu et votre bannière publicitaire dans votre View Master Page. De cette façon, chaque page de votre application affichera ce même contenu.
Dans ce tutoriel, vous allez apprendre à créer une nouvelle View Master Page ainsi qu'une nouvelle View Content Page basé sur la Master Page.
3. Créer une View Master Page▲
Commençez tout d'abord par créer une View Master page pour un design à deux colonnes. Vous ajoutez une nouvelle View Master Page à un projet MVC en faisant un clic droit sur le répertoire Views\Shared, puis en sélectionnant le menu Add -> New Item, et finalement en sélectionnant MVC View Master Page.
Vous pouvez créer plus d'une View Master Page par application. Chaque View Master Page peut définir un design différent. Par exemple, vous pouvez vouloir pour certaines pages un design à deux colonnes, et pour d'autres un à trois colonnes.
Une View Master Page ressemble beaucoup à une View de ASP.NET MVC. En revanche, contrairement à une View normale, une View Master Page contiens un ou plusieurs tags <asp:ContentPlaceHolder>. Ces tags sont utilisés pour marquer les zones de la Master Page qui peuvent être redéfinis dans les View Content Page.
Par exemple, la View Master Page ci-dessous définit un design à deux colonnes. Il contient également deux tags <asp:ContentPlaceHolder>, un pour chaque colonne.
<%@ 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>Le corps de la View Master Page contient deux <div> qui correspondent aux deux colonnes. Un CSS, défini plus haut, est appliqué à ces deux div. Vous pouvez prévisualiser le rendu de votre page en passant en mode Design dans Visual Studio. Cliquez sur le bouton Design en bas à gauche de l'éditeur.
4. Créer une View Content Page▲
Après avoir créer une View Master Page, vous pouvez créer une ou plusieurs View Content Pages basées sur la View Master Page. Par exemple, vous pouvez créer un index pour le Controller Home, en cliquant droit sur le répertoire Views\Home, puis en sélectionnant Add -> New Item et ensuite MVC View Content Page. Entrez le nom Index.aspx puis cliquez sur le bouton Add.
Après avoir cliqué sur le bouton, une nouvelle fenêtre apparaît permettant de sélectionner le View Master Page de votre View Content Page. Vous pouvez naviguer jusqu'à la View Master Page créée précédemment.
Après avoir créé la View Content Page basée sur votre Master Page, vous vous retrouvez avec ce fichier.
<%@ 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>Notez que cette View contient autant de <asp:Content> que de <asp:ContentPlaceHolder> définis dans la View Master Page. Chaque <asp:Content> contient un attribut ContentPlaceHolderID qui défini le <asp:ContentPlaceHolder> à redéfinir.
Notez de plus, que votre View Content Page ne contient aucun tag HTML "normal". Par exemple, il ne contient aucun tag <html> ou <head>. Tous ces tags sont contenus dans la View Master Page.
Tous les différents contenus que vous voudrez afficher devront se trouver dans un des <asp:Content>. Si vous placez du HTML en dehors de ces balises, vous aurez une erreur quand vous essaierai de voir la page.
Vous n'avez pas besoin de redéfinir chaque <asp:ContentPlaceHolder> de votre Master Page dans votre View Content Page. Vous avez seulement besoin de redéfinir ceux dont vous voulez remplacer le contenu.
Par exemple, le code de la page Index.aspx ci-dessous, contient deux <asp:Content> incluant du texte.
<%@ 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>Voici le rendu de Index.aspx.
Notez que vous avez bien vos deux colonnes et que le contenu de votre View Master Page est bien présent.
5. Modifier le contenu d'une View Master Page.▲
Un problème que l'on peut rencontrer en travaillant avec des View Master Pages est la modification du contenu de cette dernière, quand différentes View Content Pages sont appelées. Par exemple, vous pouvez vouloir que chaque page de votre application web ait un titre unique. En revanche, le titre est déclaré dans la View Master Page et non dans la View Content Page. Donc, comment modifier le titre de la plage à partir de la View Content Page ?
Il existe deux moyens pour modifier le titre affiché par la View Content Page. Premièrement, on peut ajouter un attribut Title à la directive <@ Page %> déclaré tout en haut de votre View Content Page. Par exemple, si vous voulez assigner le titre "Super Great Website" à votre View Index, vous pouvez ajouter la directive suivant tout en haut de la page.
<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>Lorsque la page est affichée dans le navigateur, le titre choisi apparait.
Pour que l'attribut Title fonctionne, la View Master Page doit satisfaire une importante condition. La View Master Page doit contenir le tag suivant <head runat="server"> au lieu de celui ci <head> pour son header. Si ce tag ne contient pas l'attribut runat="server" le titre n'apparaitra pas. La View Master Page créée par défaut contient ce tag.
Une autre solution pour modifier le contenu de la View Master Page est d'entourer la zone que vous voulez modifier avec un <asp:ContentPlaceHolder>. Par exemple, imaginez que vous ne vouliez pas seulement modifier que le titre, mais aussi les meta tags. Le code ci dessous contiens un <asp:ContentPlaceHolder> dans le tag <head>.
<%@ 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>Notez que le <asp:ContentPlaceHolder> contient un contenu par défaut : un titre et des meta tags. Si vous ne redéfinissez pas ce <asp:ContentPlaceHolder> dans les View Content Pages, ce contenu par défaut sera affiché.
La View Content Page ci dessous redéfinit le <asp:ContentPlaceHolder> afin d'afficher un titre et des meta tags personnalisés.
<%@ 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>6. Conclusion▲
Ce tutoriel vous a fourni une introduction basique aux View Master Pages et aux View Content Pages. Vous avez appris comment créer une View Master Page ainsi qu'une View Content Page basé sur cette dernière. Vous avez aussi vu comment modifier le contenu de votre View Master Page à partir d'une View Content Page.
