1. Master Page
1.1. Introduction aux MasterPages
Depuis longtemps, les développeurs ont toujours été contraint de dupliquer les sources HTML du design sur chaque page. D’autre solution intermédiaire existait, par exemple l’utilisation des frames en HTML, cependant cette fonction appartient au langage HTML et présente beaucoup de problème, notamment au niveau des emplacements, de plus les frames sont de moins en moins utilisées de nos jours. La fonctionnalité « MasterPage » a longtemps été demandée par les développeurs, elle n’existait toujours pas dans les versions précédentes de l’ASP.NET, grâce au MasterPage vous allez enfin pouvoir séparer les sources du design au code pur. En effet, intégré à la version 2.0, vous pouvez séparer la partie développement du design et développement fonctionnel du site, vous n’avez plus besoin de déployer les sources du design sur chaque page du site.
La MasterPage (extension *.master) contiendra la source (X)HTML du design et des zones d’édition (contentPlaceHolder), permettant ainsi de créer plusieurs page (contentPage) du même design. Il suffit ensuite de modifier les zones d’éditions sur chaque page. Par exemple, si l’on considère que le site de SUPINFO (www.supinfo.com) est en ASP.NET 2.0, une MasterPage est suffisante pour le design, ensuite chaque page fera appel à cette MasterPage dans l’en-tête, et chaque page devra insérer leurs informations spécifiques dans les zones d’éditions imposer dans la MasterPage
1.2. Création d'une MasterPage
Pour créer une MasterPage, faites un clique-droit sur le nom votre WebSite, puis sur « Add a New Item ».
Fig 1.1 Créer un nouvel item
Une fenêtre apparaîtra, il vous suffira de choisir MasterPage et de renommer, si vous le souhaitez, le nom de la MasterPage.
Fig 1.2 Créer un item MasterPage
Vous remarquerez que l’en-tête de la MasterPage contient le mot-clé « Master », à la différence d’une page simple qui contient le mot-clé « Page ».
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
Il suffit ensuite d’insérer des zones d’éditions (contentPlaceHolder) aux endroits souhaiter grâce aux balise asp:contentPlaceHolder.
Voici un exemple simple de design avec 3 contentPlaceHolder :
Voici un exemple simple de design avec 3 contentPlaceHolder :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test</title>
<style type="text/css">
body {
font-size:14px;
font-family:verdana;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="0" border="1" style="width:600px; height:400px">
<tr>
<td colspan="2" style="height: 50px">
<asp:ContentPlaceHolder ID="top" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td style="width: 99px; height: 350px">
<asp:ContentPlaceHolder ID="bottom_left" runat="server"></asp:ContentPlaceHolder>
</td>
<td style="width: 500px; height: 350px">
<asp:ContentPlaceHolder ID="bottom_right" runat="server"></asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
Fig 1.3 Exemple d'une MasterPage
Attention à ne rien rajouter dans les balises contentPlaceHolder si vous souhaitez éditer completement la zone. Par exemple si l’on rajoute une image dans la zone « top » de la MasterPage (exemple ci-dessus), cette image apparaîtra sur toutes les pages faisant appel à cette MasterPage.
1.3. Mise en place d'une MasterPage
Pour appliquer une MasterPage sur une nouvelle page, il faut tout d’abord enlever toute la source HTML qui vous ne sera pas utile, laisser uniquement l’en-tête :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Rajouter ensuite le paramètre MasterPageFile avec l’URL de la MasterPage à appliquer.
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Enfin, il suffit de rajouter des balises contentPlaceHolder avec l’ID d’un contentPlaceHolder de la MasterPage , en voici un exemple :
<asp:Content ContentPlaceHolderID="top" runat="server">
TOP: HELLO, HOW ARE YOU?
</asp:Content>
<asp:Content ContentPlaceHolderID="bottom_left" runat="server">
BOTTOM LEFT: SUPINFO
</asp:Content>
<asp:Content ContentPlaceHolderID="bottom_right" runat="server">
BOTTOM RIGHT: 2005-2006
</asp:Content>
Voici le résultat de notre exemple :
Fig 1.4 Exemple d'une page avec MasterPage
Les IDs des contentPlaceHolder sont uniques et l’affichage des IDs disponiblent lors de l’auto-complétion correspondent aux IDs des contentPlaceHolder de la MasterPage appellée.
1.4. Conclusion
Ainsi cette nouvelle fonctionnalité facilite la tâche du développeur en séparant le design du code, mais allège aussi l’architecture de l’application WEB. Grâce au MasterPage en ASP.NET 2.0, vous n’aurez plus besoin de dupliquer le code source du design sur chaque page. Il est bien entendu possible de créer des MasterPage dynamiquement dans le code-behind, de créer d’imbriquer des MasterPage.
e=B � - p @�u pt{ racter:line-break'> 
0 التعليقات:
Post a Comment