vendredi 18 février 2011 17:57
tja
[ASP.NET MVC 3] Razor – Layout – Partie 3
Ce post je devais le publier avant ma session avec Rui sur MVC 3. Finalement je l’ai retardé pour faire une suite après TechDays.
Sans rentrer dans les détails d’implémentation, je voulais juste regrouper les informations principales concernant les Layouts dans Razor.
Pour plus de détails, n’hésitez pas à consulter les sites suivants :
Introduction
Pour ceux qui connaissent ASP.NET classique, la notion de Layout n’aura rien de magique. Le concept est très similaire au MasterPages de ASP.NET qui permettent de définir un Template graphique commun de votre site, et de l’hériter sur toutes ou une partie des pages.
Dans le cas du moteur de vues Razor on ne parle pas de MasterPages comme dans le moteur aspx. On utilise la notion des Layout.
Les méthodes RenderBody, RenderPage et RenderSection
C’est méthodes c’est pratiquement tout ce que vous devez savoir. Pour avoir une meilleure vision du fonctionnement de ces méthodes j’ai fait un petit schéma ci-dessous. J’ai volontairement créé 2 pages Layout car ce n’est pas si rare de voir dans le milieu des entreprises des Layouts communs aux différents départements et au dessus de tout ça un Layout commun pour l’entreprise.
Note: Si vous vous demandez pourquoi certaines pages sont préfixées avec le caractère “_”, c’est parce qu’elle sont en quelque sorte protégées. Vous ne pouvez pas naviguer vers ce pages pour afficher leur contenu.
Le résultat final se rapproche de ceci (désolé pour les couleurs 
):
Ce Layout est bien basé sur le schéma précédent. La version orange est lorsqu’on affiche le “Service Informatique”. Si on clique sur le lien “Service des ressources humaines” nous obtenons un contenu bleu comme ceci:
Remarquez que le @RenderSection menu ne s’affiche pas par rapport à la version du “Service Informatique”. Je vais expliquer ceci plus loin dans l’article.
Pour mieux comprendre le découpage qui est réalisé entre différentes pages des Layout et de pages des contenu, j’ai apporté de petites annotations sur la page du “Service Informatique” :
RenderBody()
La méthode RenderBody() est utilisée dans les pages des Layout pour afficher les contenu, soit des sous Layouts, soit des pages de contenu. La position de la méthode RenderBody() dans la page de Layout, détermine la position où les données des pages de contenu (ou sous Layouts) seront affichées.
Attention : Une page de Layout ne peut faire appel qu’une seule fois à la méthode RenderBody().
Voici un exemple de la page de Layout “_MainLayout.cshtml”:
A leur tour, les sous pages de Layout “_DepartmentITLayout.cshtml” et “_DepartmentHRLayout.cshtml” ont chacune également un appel à RenderBody() pour afficher les informations des pages de contenu.
RenderPage()
L’appel à cette méthode permet d’insérer un bloc de contenu dans une page web. En paramètre il faut passer le nom du fichier dont le contenu vous voulez afficher à cet endroit. Comme vous pouvez le constater sur l’extrait de code précédent nous insérons l’entête et le pied de page en appelant respectivement @RenderPage(“_header.cshtml”) et @RenderPage(“_footer.cshtml”).
RenderSection()
Cette méthode permet de diviser le contenu des pages en sections. Chaque section est contenue dans un bloc de section dans une page de contenu. Dans notre exemple nous avons deux sections “Menu” et “Widget” déclarées dans des pages de contenu.
Si on prend comme exemple la page de contenu “ItDep.cshtml”, nous avons 2 sections déclarées de la manière suivante :
Pour que ces sections soient affichées, dans la pages de Layout (ici “_DepartmentITLayout.cshtml”) nous faisons appel à la méthode RenderSection() en passant en paramètre le nom de la section qu’on souhaite afficher:
C’est aussi simple que ça !
Sections optionnelles
Qu’est-ce qui se passe si votre page de contenu ne déclare pas de section, alors que celle-ci est appelée au niveau de la page de Layout ? C’est la cas dans la page de contenu “HrDep.cshtml” où la section menu n’est pas déclarée. Dans ce cas là, vous avez la possibilité dans la page de Layout d’indiquer qu’un section n’est pas obligatoire en spécifiant le paramètre required : false. Comme dans l’exemple ci-dessous:
Une alternative existe pour obtenir le même résultat avec le bloc de code suivant :
1: @if (IsSectionDefined("menu")) {
2: @RenderSection("menu")
3: }
_ViewStart.cshtml
Afin de mieux respecter DRY (Don’t Repeat Yourself) principle il est possible de définir les valeurs par défaut qui s’appliquent à toutes les vues dans l’application ASP.NET MVC 3. C’est grâce au fichier _ViewStart.cshtml. Par défaut vous avez juste la déclaration de Layout pour toutes les pages. Ce qu’il faut également savoir ce que cette page défini également un scope d’action. C’est-à-dire que si vous voulez limiter l’action de cette page à uniquement les vues d’un contrôleur, vous pouvez en faire copie et la placer dans le répertoire correspondant.
Conclusion
Ceux qui connaissent les fonctionnement des MasterPages dans les moteurs de vue ASP.NET, ne seront pas perdus. Razor est très simple à utiliser, clair en lecture et offre plus de possibilités d’optimisation du rendu en passant par les helpers et les fonctions que nous verrons dans les posts suivants.
Le petit projet d’exemple est disponible sur mon repo hg ici 
// Thomas
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
