ASP.NET : Les pages maîtresses (master pages)

Lorsque plusieurs pages sont montées sous un même modèle (disposition de l’entête, des menus, etc.), ASP.NET propose l’utilisation de pages maîtresses servant de base aux autres pages.

Le principe est le suivant : la page maîtresse définit tout ce qui est commun aux pages du site et prévoit des espaces qui seront remplis par les pages basées sur la page maîtresse.

▼Publicité

Dans l'exemple suivant, les zones grises entourées de rouge seraient définies dans le fichier Default.aspx et tout le reste serait défini dans la page maîtresse.

Notez que la page maîtresse sera en mesure d'ajuster certaines informations pour tenir compte de la page affichée. Par exemple, le titre h1, défini sur la page maîtresse, sera tout de même différent pour chacune des pages.

Page maîtresse

Générer une page maîtresse

La génération d’une page maîtresse est relativement simple :

  • Dans l'explorateur de solutions, faites un clic droit sur votre projet / Ajouter / Nouvel élément.
  • Dans la zone de gauche, choisissez Visual C#. 
  • Dans la zone centrale, choisissez Page maître puis donnez-lui un nom dans le bas de l'écran. Le nom doit se terminer par .master (ex : MasterPage.master).
  • Contenu de la page maîtresse :
    • Si vous avez une page Web existante :
      • Copiez dans la page maîtresse toutes les balises qui seront partagées par les autres pages. Comme toujours, vous ne devez pas copier la directive de page. Attention : le titre h1 et le texte tiré de la table page doivent eux aussi faire partie de la page maîtresse. La page maîtresse s'occupera de les ajuster pour chacune des pages.
      • Les sources de données doivent être définies à l'endroit où elles seront utilisées. Si un contrôle de la page maîtresse a besoin d'une source de données, cette source fera partie de la page maîtresse. Notez que si un contrôle de la page maîtresse et un contrôle de la page enfant ont tous deux besoin d'utiliser la même source de données, on préférera créer une source de données sur la page maîtresse et une autre sur la page enfant.
      • Copiez dans le fichier .master.cs les méthodes correspondant aux contrôles qui ont été déplacés vers la page maîtresse. Par exemple, si vous avez codé un clic sur un bouton qui fait maintenant partie de la page maîtresse, le gestionnaire d'événement correspondant doit lui aussi faire partie de la page maîtresse.
    • Si vous n'aviez pas de page Web existante, montez la page maîtresse comme toute autre page Web.
  • Ajoutez un contrôle ContentPlaceHolder à l'endroit où le contenu spécifique de chaque page sera placé. Attention : vous n'écrirez rien entre les balises <asp:ContentPlaceHolder> et </asp:ContentPlaceHolder>. Prenez soin de donner un nom significatif à l'attribut ID du contrôle car les pages basées sur cette page maîtresses utiliseront ce nom lorsqu'elles définiront le contenu de ce ContentPlaceHolder.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:ContentPlaceHolder ID="contentPlaceHolderContenu" runat="server">

    </asp:ContentPlaceHolder>

  • Vous pouvez au besoin ajouter d'autres contrôles ContentPlaceHolder. Par exemple, si vous prévoyez que certaines pages devront intégrer du code dans la zone <head>, vous pouvez ajouter un contrôle ContentPlaceHolder à l'endroit approprié dans votre page maîtresse.

Utiliser la page maîtresse

Pour chacune des pages Web qui doivent présenter les sections définies dans la page maîtresse, procédez comme suit :

  • S'il s'agit de la page que vous avez utilisée pour monter la page maîtresse, effacez toutes les balises et tout le code C# qui a été copié dans la page maîtresse.
  • Ajoutez l'attribut MasterPageFile="~/MasterPage.master" dans la directive de page de votre page Web.

    Ex :

    Fichier .aspx (ASP.NET)

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

  • Ajoutez un contrôle <asp:Content> dans votre page Web. L'attribut ContentPlaceHolderID fera référence à un ContentPlaceHolder de votre page maîtresse.

    Ex :

    Fichier .aspx (ASP.NET)

    <asp:Content ID="Content1" ContentPlaceHolderID="contentPlaceHolderContenu" runat="server">
    </asp:Content>

  • Entre les balises <asp:Content> et </asp:Content>, entrez les balises et contrôles propres à cette page Web.

Donc, chaque page Web utilisant la page maîtresse ne comprendra que la directive <@ Page>, la balise <asp:Content>, les contrôles qui lui sont propres puis la balise </asp:Content>. Tout le reste : balise <!DOCTYPE>, balise <html>, balises d'entête, balise <body>, etc. est placé dans la page maîtresse.

Ex :

Fichier .aspx (ASP.NET)

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentPlaceHolderContenu" runat="server">

   ...

</asp:Content>

Page qui n'affiche rien de plus que le texte statique entré dans la table page

Voici le type de page le plus simple à coder.

Tout ce que vous avez à faire, c'est ajouter une référence dans la page maîtresse. Rien de plus.

Ex : Soit la page Coordonnees.aspx dont la seule ligne de code est la suivante :

Fichier .aspx (ASP.NET)

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Coordonnees.aspx.cs" Inherits="Coordonnees" %>

Lorsque cette page sera affichée dans votre navigateur, elle comprendra tout ce qui a été codée dans la page maîtresse, incluant la requête dans la table page pour retrouver les informations d'entête dynamiques, le titre h1 et le texte de la page.

Permettre à la page Web de modifier un élément de sa page maîtresse

page enfant qui communique avec sa page maîtresse

Une page Web peut utiliser les contrôles définis dans sa page maîtresse. Le contraire n'est cependant pas possible puisqu'une page maîtresse ne connaît pas ses pages enfant.

Publication de propriétés de la page maîtresse

La technique suivante fait une utilisation judicieuse des concepts de programmation objet. De plus, elle assure que si le contrôle est renommé sur la page maîtresse, le programme générera une erreur de compilation, ce qui est beaucoup plus facile à détecter et à corriger qu'une erreur d'exécution.

  • Soit le contrôle serveur HTML suivant, défini dans la page maîtresse :

    Fichier .master (ASP.NET)

    <link rel="stylesheet" id="stylesheet" runat="server" href="pagesdecontenu.css" />

    ...

    <div runat="server" id="divCommentaires">

  • Dans le fichier .master.cs (donc dans le code de la page maîtresse), déclarez une propriété publique donnant accès au contrôle en question. 

    Fichier .master.cs (ASP.NET avec C#)

    public HtmlLink Stylesheet

    {

        get

        {

            return stylesheet;

        }

        set

        {

            stylesheet = value;

        }

    }

     

    public HtmlGenericControl DivCommentaires

    {

        get

        {

            return divCommentaires;

        }

        set

        {

            divCommentaires = value;

        }

    }

  • Dans le fichier .aspx de la page enfant, ajoutez une directive permettant d'accéder aux propriétés de la page maîtresse.

    Fichier .aspx (ASP.NET)

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="NouvelUsager.aspx.cs" Inherits="ASPNET2013_GagnonAnnie.NouvelUsager" %>

     

    <%-- La directive MasterType permettra d'utiliser les propriétés publiées sur la page maîtresse --%>

    <%@ MasterType VirtualPath="~/MasterPage.master" %>

  • Dans le fichier .aspx.cs de la page enfant, assignez la valeur désirée à la propriété.

    Fichier .aspx.cs (ASP.NET avec C#)

    Master.StyleSheet.Href = "pagesderesume.css";

    ...

    Master.DivCommentaires.Visible = false;

Master.FindControl()

L'exemple suivant montre comment les pages enfants, grâce à la méthode Master.FindControl(), peuvent modifier un contrôle défini dans sa page maîtresse.

Attention : cette technique fonctionne bien mais puisqu'on utilise FindControl(), si jamais le contrôle était renommé sur la page maîtresse, la page Web planterait à l'exécution. Et puisqu'une erreur d'exécution est beaucoup plus difficile à détecter qu'une erreur de compilation, on préférera utiliser la technique de la publication de propriétés expliquée plus haut.

Soit les contrôles suivants définis dans le fichier .master :

Fichier .master (ASP.NET)

<link rel="stylesheet" id="stylesheet" runat="server" href="pagesdecontenu.css" />

...

<asp:Label ID="labelDescription" runat="server" />

...

<asp:Button ID="buttonModifier" runat="server" Text="Modifier" />

...

<div id="divRecherche" runat="server">

   ...

</div>

Le code suivant, placé dans le fichier .cs d'une page enfant, lui permettra d'accéder aux contrôles de son parent. Ce code est tout à fait fonctionnel mais les lignes ont été biffées pour rappeler que l'utilisation de FindControl() n'est pas la meilleure solution.

Fichier .aspx.cs (ASP.NET avec C#)

// pointe sur le contrôle <link> défini dans page maîtresse

HtmlLink stylesheet = (HtmlLink)Master.FindControl("stylesheet");

stylesheet.Href = "pagesderesume.css";

 

// pointe sur le libellé défini dans page maîtresse

Label labelDescription = (Label)Master.FindControl("labelDescription");

labelDescription.Text = "blablabla";

 

// pointe sur le bouton défini dans page maîtresse

Button buttonModifier = (Button)Master.FindControl("buttonModifier");

buttonModifier.Enabled = false;

 

// pointe sur le div

HtmlGenericControl divRecherche = (HtmlGenericControl)Master.FindControl("divRrecherche");   

divRecherche.Visible = false;   // n'affichera plus le div ni son contenu

Pour plus d'information

« ASP.Net 2.0 - Master Pages: Tips, Tricks, and Traps ». Ode to code. http://odetocode.com/code/450.aspx

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories