Développement d`application web avec Visual Studio 2012 et ASP

Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
L’objectif de ce tutoriel est d’apprendre à utiliser les pages maîtres 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 maître imbriquées.
Etape 1 – Créer une page maître
L’objectif de cette étape est de créer une page maître et de formater sa disposition en utilisant le CSS. La page
contiendra un menu qui pointera sur les différentes pages du site.
1.
2.
3.
4.
5.
6.
7.
8.
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 »
9. Appuyez sur OK
10. Ouvrez la page maître en mode source
11. 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" %>
12.
13.
14.
15.
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 »
Le code devrait être comme suit :
<form id="form1" runat="server">
<header class="header">
1
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
</header>
<div class="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
16.
17.
18.
19.
20.
21.
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
22. 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>
2
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
</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>
23. Dans le projet, ajoutez une feuille de style appelée « Site.css »
24. 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 {
3
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
clear : both;
}
25.
26.
27.
28.
29.
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 »
30. Apparaît ensuite une boîte de sélection de la page maître à appliquer. Sélectionnez « Main »
31. Cliquez ensuite sur « OK »
4
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
32. Ouvrez Default.aspx en mode source
33. 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" %>
34. Ouvrez « Default.aspx » en mode conception
35. Entrez « Bienvenue dans la page 1 dans la page principale
36. 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.
1.
2.
3.
4.
5
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
Copyright ©, Mostefai Mohammed Amine, 2013
Développement d’application web avec Visual Studio
2012 et ASP.NET
Tutoriel 4.2 :Utilisation des pages maîtres
5. Ouvrez la page « Child » en mode source
6. 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" %>
7. Dans le deuxième composant « Content » ajoutez trois « div » avec les classes « lateralBar »,
« innerContent » et « clear » respectivement
8. 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>
9. Ouvrez la page maître Child en mode conception
10. A partir de la boîte à outils, faites glisser un composant « ContentPlaceHolder » à l’intérieur de la div
« innerContent »
11. Créez une forme web de contenu « Page21 » avec pour page maître « Child »
12. Insérez « Bienvenue dans la page 2.1 » dans cette page
13. De la même façon, créer une forme web de contenu « Page22 » avec le message « Bienvenue dans la page
2.2 »
14. Exécutez en appuyant sur « F5 »
6
Copyright ©, Mostefai Mohammed Amine, 2013