ASP.Net 2.0 : les Master Pages

Date de publication : 11/07/2005

Par Ronald VASSEUR (autres articles)
 

Dans cet article nous allons découvrir une grande nouveauté d'ASP.Net 2.0 : les master pages. Notre but ici ne sera pas d'aller dans le détail mais plutôt d'appréhender ce que cela va changer dans notre façon de concevoir nos sites et quels sont les bénéfices que l'on peut en tirer.


Prérequis
1. Le principe de master pages
2. Création d'une master page
3. Création d'une page héritant d'une master page
Conclusion


Prérequis

  • Visual Studio 2005 Beta 2 ou Visual Web Developer 2005 Express Edition Beta 2 au minimum
  • Internet Information Services 5.0 ou supérieur
  • Framework .Net 2.0

1. Le principe de master pages

Une master page est en fait une page qui va contenir des éléments s'affichant de la même manière sur une partie ou sur la totalité de votre site, et aussi des éléments variant suivant chaque page du site (contacts, news, téléchargements…). Une master page va en fait être composée de la partie commune de l'interface pour un ensemble donné de pages. Avec ASP.Net 1.1 nous étions souvent obligés de faire un simple copier/coller de certains éléments comme des menus, des logos ou autre bannière sur chaque page, ici les master pages vont vous autoriser à déterminer des zones "fixes", une sorte de squelette commun de page, et des zones de contenu qui vont être différentes selon la page, zones qui seront délimitées par des ContentPlaceHolder.

Les éléments de la master page seront ainsi créés et disposés dans une page qui portera l'extension .master, ensuite les pages de contenues (content pages) viendront compléter les zones dites de contenu (délimitées par des composants ContentPlaceHolder) sur cette même master page.

L'avantage immédiat qui découle de cela est que nous n'aurons plus qu'à créer une seule master page pour intégrer les éléments inchangés (bannière, entête, menus…) sur une étendue de pages données. De plus, si nous voulons modifier un élément de l'interface de notre site nous n'aurons qu'à le faire qu'une seule fois dans la master page, toutes les pages l'utilisant seront ainsi immédiatement modifiées.

Je le concède volontier, après la lecture de cette seule explication les master pages n'apparaissent peut être pas comme une nouveauté révolutionnaire, mais avec des explications plus concrètes dans les paragraphes suivant vous allez réellement prendre conscience de la souplesse et de la productivité apportées par les master pages.


2. Création d'une master page

Une bonne démonstration valant souvent mieux que de longues explications passons tout de suite à la pratique. Pour cela vous devez disposer de Visual Studio 2005 Beta 2 ou de Visual Web Developer 2005 Express Edition Beta 2 au minimum.

Tout d'abord vous devez créer une application ASP.Net 2.0, pour cela cliquez sur "File" puis sur "New Web Site", créez alors un projet de type "ASP.Net Web Site". Vous avez alors un site web contenant une page default.aspx. Dans l'explorateur de solution, cliquez avec le bouton droit puis choisissez "Add new item". Choisissez alors "Master Page", donnez lui le nom que vous souhaitez (ici maMasterPage), vous pouvez remarquer qu'elle porte l'extension .master. Enfin, cliquez sur "Add". La fenêtre suivante apparaît alors :

Sélection de la master page
Remarque : la master page portant l'extension .master ne sera pas directement accessible par les clients, elle ne sera en fait accessible que par les pages de votre site héritant de cette master page. Lors de la connexion d'un client la page de votre site sera en fait réalisée par "assemblage" de la master page et de la page héritant de celle-ci.
Voici le code d'une master page contenant une ContentPlaceHolder : 

Code d'une master page
<%@ Master Language="VB" CodeFile="maMasterPage.master.vb" Inherits="maMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
Une fois la page créé dans Visual Studio vous n'avez qu'à placer les différents contrôles sur votre page et vous occuper du design, la seule vraie différence va être que vous allez placer des contrôles ContentPlaceHolder là où vous souhaitez que le contenu soit modifiable. En fait, les pages de votre site vont hériter de la master page, elles hériteront donc du desgin de celle-ci.

Pour simplifier notre exemple nous utiliserons un seul contrôle ContentPlaceHolder, mais sachez que vous pouvez en mettre plusieurs dans une seule et même master page, cela dépendra évidemment de vos besoins.

Pour ajouter un ContentPlaceHolder, rien de compliqué, vous avez juste à faire un glisser/déposer depuis la boîte à outil de Visual Studio 2005. Vous avez donc, d'un point de vue design, une page aspx qui est standard, sauf qu'elle contiend des contrôles ContentPlaceHolder.


3. Création d'une page héritant d'une master page

Maintenant que nous avons créé une master page, nous pouvons créer les pages de notre site qui vont en hériter, pour cela rien de difficile, il suffit juste de créer une nouvelle WebForm, et de cocher la case "Select master page", à l'étape suivante Visual Studio va vous demander de sélectionner la master page à utiliser avec cette WebForm. Vous pouvez alors remarquer que Visual Studio vous affiche une page qui est identique à la master page de laquelle elle hérite, mais cette fois ci, tout le contenu de la master page est "grisé" et non modifiable, et vous pouvez par contre modifier le contenu du, ou des ContentPlaceHolder intégré(s) dans votre page.

Voici donc la démarche détaillée qu'il vous faut suivre : cliquez avec le bouton droit sur votre projet dans l'explorateur de solution, puis sur "Add new item", sélectionnez WebForm, nommez la "accueil.aspx", cochez "Select Master Page". Cliquez sur "Add", une autre fenêtre s'ouvre alors, vous demandant d'indiquer quelle master page vous souhaitez utiliser, sélectionnez "maMasterPage.master".

Sélection de la master page à associer

Le code d'une page héritant d'une master page est réduit, il ne contient pas les balises que l'on retrouve dans une page aspx normale, en effet, puisque elles sont déjà présentes dans la master page. Voici une copie du code contenue dans une "page fille" vide : 

Code d'une page héritant d'une master page
<%@ Page Language="VB" MasterPageFile="~/maMasterPage.master" AutoEventWireup="false" 
CodeFile="accueil.aspx.vb" Inherits="accueil" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
Runat="Server"></asp:Content>
A cet instant votre explorateur de solution doit correspondre à cette image :

Explorateur de solution
Placez les contrôles et les éléments que vous souhaitez dans la zone ContentPlaceHolder, enregistrez les modifications. Définissez la page accueil.aspx comme page de démarrage de votre application , puis appuyez sur F5. Et là miracle !! Votre navigateur s'ouvre et votre page accueil.aspx s'affiche, elle est composée de votre master page et du contenu de la page accueil.aspx qui en hérite, c'est-à-dire du contenu du ou des ContentPlaceHolder.

Vous pouvez ainsi créer autant de pages héritant d'une master page que vous le souhaitez, vous retrouvez dès lors le "squelette" de la master page dans chaque "page fille" de celle-ci.


Conclusion

Voilà vous venez de créez votre première master page, vous pouvez facilement imaginer les avantages découlants de cette nouveauté d'ASP.Net 2.0, vous pourrez ainsi avoir une productivité accrue dans la création et la mise à jour de vos sites. On peut envisager utiliser les masters pages en tant que modèle, que squelette, de tout ou partie de votre site, mais aussi, par exemple, pour concevoir différentes versions de pages en fonction des navigateurs clients.

De plus, on se rend donc compte, que même s'il on utilise une master page, cela ne change quasiment rien des méthodes de travail pour le développeur ou le graphiste dans l'édition de sa page, ce qui est fort appréciable.

J'espère qu'au travers de cette courte présentation vous aurez aperçu la puissance et la souplesse que peuvent vous apportez les master pages. Je vous donne d'ores et déjà rendez-vous dans un prochain article.

Un grand merci à Pharaonix pour la relecture de cet article.