L’objectif de ce tutoriel (module 4) est d’apprendre à utiliser les pages maitres pour uniformiser les pages d’une application web. Pour ce, nous créerons trois pages web dont la page d’accueil avec une structure à deux niveaux en utilisant les pages maitre imbriquées.
Etape 1 – Créer une page maître
- Lancez VS 2012
- Choisir Fichier -> Nouveau -> Application ASP.NET vide
- Entrez « TestMaster » dans la zone « Nom »
- Cliquez sur OK
- Cliquez sur le bouton droit sur « TestMaster » dans l’explorateur de solutions
- Sélectionnez « Ajouter un nouvel élément »
- Dans le modèle sélectionnez « Page Maître »
- Dans la zone « Nom », entrez « Main »
- Appuyez sur OK
- Ouvrez la page maître en mode source
- Vérifiez que VS l’a créée avec la directive « Master » au lieu de « Page »
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="TestMaster.Main" %>
- Vérifiez que VS a inséré deux conteneurs (ContentPlaceHolder) dans la page maître
- Insérez une balise de type entête (Header) juste avant le second conteneur avec la classe CSS «header »
- Entourez le deuxième conteneur dans une div avec la classe « content »
<form id="form1" runat="server">
<header class="header">
</header>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
- Ouvrez la page maître en mode conception
- Ajoutez un menu dans l’entête en glissant un menu à partir de la boîte à outils
- Dans la zone de propriétés du menu, cliquez sur « Items »
- Ajoutez deux éléments « Page 1 » et « Page 2 »
- Dans l’élément « Page 2 », ajoutez deux sous-éléments, « Page 2.1 » et « Page 2.2 »
- Cliquez sur OK
- Modifiez la page maître en mode source comme suit :
<form id="form1" runat="server">
<header class="header">
<asp:Menu ID="Menu1" runat="server" CssClass="siteMenu" ForeColor="White" Orientation="Horizontal">
<DynamicHoverStyle BackColor="#FFFFB0" ForeColor="#666666" />
<Items>
<asp:MenuItem Text="Page 1" Value="Page 1" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="Page 2" Value="Page 2">
<asp:MenuItem Text="Page 2.1" Value="Page 2.1" NavigateUrl="~/Page21.aspx"></asp:MenuItem>
<asp:MenuItem Text="Page 2.2" Value="Page 2.2" NavigateUrl="~/Page22.aspx"></asp:MenuItem>
</asp:MenuItem>
</Items>
<LevelMenuItemStyles>
<asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" />
<asp:MenuItemStyle BackColor="#990000" Font-Underline="False" HorizontalPadding="10px" ItemSpacing="20px" VerticalPadding="10px" />
</LevelMenuItemStyles>
<LevelSelectedStyles>
<asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="Gray" />
<asp:MenuItemStyle BackColor="#FFFFB0" Font-Underline="False" ForeColor="#666666" />
</LevelSelectedStyles>
<StaticHoverStyle BackColor="#FFFFB0" ForeColor="#666666" />
</asp:Menu>
</header>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
- Dans le projet, ajoutez une feuille de style appelée « Site.css »
- Modifiez le CSS comme suit :
body {
padding: 0;
margin: 0;
font-family: 'Gill Sans' , 'Gill Sans MT' , Calibri, 'Trebuchet MS' , sans-serif;
background-color: #808080;
}
.header {
min-height: 75px;
background-color: #115E66;
}
.siteMenu {
margin-top : 65px;
}
div.content {
padding : 15px;
}
div.lateralBar {
background-color: #99CCFF;
margin : 5px;
width : 160px;
height : 140px;
float : left;
}
div.innerContent {
padding : 15px;
float : left;
}
div.clear {
clear : both;
}
- Ouvrez la page maître en mode conception
- Faites glisser la feuille de style sur la page maître afin d’appliquer les styles
- Dans l’explorateur de solutions, cliquez pour ajouter un nouvel élément au projet « TestMaster »
- Dans le modèle, choisissez « Forme Web » utilisant une page maître
- Entrez default dans la zone « Nom »
- Apparaît ensuite une boîte de sélection de la page maître à appliquer. Sélectionnez « Main »
- Cliquez ensuite sur « OK »
- Ouvrez Default.aspx en mode source
- Vérifiez que la directive « Page » contient une autre propriété appelée « MasterPageFile »
<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMaster.Default" %>
- Ouvrez « Default.aspx » en mode conception
- Entrez « Bienvenue dans la page 1 dans la page principale
- Exécutez pour voir
Etape 2 : Création de pages maîtres imbriquées
L’objectif de cette étape est de créer un deuxième niveau de navigation en utilisant les pages maître imbriquées.
- Dans l’explorateur de solutions, ajoutez un nouvel élément au projet « TestMaster »
- Sélectionnez « Page Maître Imbriquée » dans le modèle
- Dans la zone « Nom » entrez « Child »
- Cliquez sur OK
- Ouvrez la page « Child » en mode source
- Vérifiez que la directive est « Master » et que cette directive possède une propriété « MasterPageFile »
<%@ Master Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="Child.master.cs" Inherits="TestMaster.Child" %>
- Dans le deuxième composant « Content » ajoutez trois « div » avec les classes « lateralBar », « innerContent » et « clear » respectivement
- Modifiez le code comme suit :
<div class="lateralBar">
<ul>
<li>
Sous-Menu 1
</li>
<li>
Sous-Menu 2
</li>
</ul>
</div>
<div class="innerContent">
</div>
<div class="clear"></div>
- Ouvrez la page maître Child en mode conception
- A partir de la boîte à outils, faites glisser un composant « ContentPlaceHolder » à l’intérieur de la div « innerContent »
- Créez une forme web de contenu « Page21 » avec pour page maître « Child »
- Insérez « Bienvenue dans la page 2.1 » dans cette page
- De la même façon, créer une forme web de contenu « Page22 » avec le message « Bienvenue dans la page 2.2 »
- Exécutez en appuyant sur « F5 »
Pour télécharger le code, cliquez ici