Mostefai Mohammed Amine's Blog

Say That I Was Here !

Tutoriel 4.2–Utilisation des pages maitre.

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