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 »

image

  • 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

image

  • 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 »

image

  • Apparaît ensuite une boîte de sélection de la page maître à appliquer. Sélectionnez « Main »
  • Cliquez ensuite sur « OK »

image

  • 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

image

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

image

  • 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 »

image

Pour télécharger le code, cliquez ici

Comments (2) -

  • Jo
    Tuto super simple mais efficace.
    thanks
  • 562042 545785Excellent site you got here! Please maintain updating, I will def read a lot more. It�ll be in my bookmarks so far better update! 84587

Add comment

Loading