jeudi 20 août 2015

Intégrer des css dans le Head depuis les Views MVC

En règle générale (et pour respecter les "standards" du web), les styles css se placent dans la balise "Head" de nos pages Html. En ASP.NET MVC, on les retrouve communément dans la "_layout" de notre site (celles-ci sont donc partagées par toutes les pages du site utilisant la "_Layout"). Cependant, il peut arriver qu'on veuille rajouter des styles spécifiques uniquement sur certaines pages (dans des Views spécifiques pour un site en aps.net mvc). Afin d'éviter de se retrouver avec des styles définis un peu partout dans le corps (body) de nos pages, nous allons définir une section spécifique aux css qui permettra de toujours 'injecter' nos styles dans le 'head' de nos pages.

Dans notre balise Head :
Nous allons mettre la condition suivante : si notre section spécifique aux css nommée "HeaderCss" est définie (via le mot clé IsSectionDefined), alors on l'inclut (via le RenderSection) :


@* css communes à toutes les pages *@
   @Styles.Render("~/Content/css")

@* zone de css spécifiques *@
   @if (IsSectionDefined("HeaderCss"))
   {
        @RenderSection("HeaderCss", required: false)
   }

Dans nos Views :

Dans les "Views" où nous souhaitons intégrés des css spécifiques, il suffira de "rendre" ces dernières via le nom que l'on a attribué à la section spécifique (HeaderCss):


@section HeaderCss{
   @Styles.Render("~/Content/themes/base/css")
   <link href="/css/supercss.css" rel="stylesheet" type="text/css" />
    <style>
        .headerboard {
            margin-left: 150px;
            padding-top: 5px;
            text-transform: uppercase;
        }
  </style>
}

Les styles spécifiques seront inclus uniquement dans nos pages spécifiques (là où nous aurons rajouté notre section css), mais elles serons définies dans le "head" de nos pages HTML : on aura une meilleure organisation de notre code html (avec des styles définis au même endroit) et on respectera au passage les normes W3C.

Aucun commentaire:

Enregistrer un commentaire