ASP.NET MVC4 : les attributs conditionnels

Dans ma série de mini-billets sur ASP.NET MVC4, je vous propose aujourd'hui de découvrir les attributs conditionnels, disponibles grâce (une fois n'est pas coutume) au moteur de rendu Razor 2.

Exemple #1 : attribut class

Le plus simple pour expliquer le fonctionnement des attributs conditionnels reste l'exemple. Démarrez votre Visual Studio 2010 (ou 2012 !) et créez un projet ASP.NET MVC4, puis éditez le fichier _Layout.cshtml. Comme vous le savez déjà, on peut déclarer des variables dans ce fichier grâce à la syntaxe Razor suivante :

@{
string bodyClasses = "main standard blue";
}

On considère que cette variable nous servira à stocker les différentes classes CSS utiles pour décorer notre élément HTML <body>. Modifions maintenant cet élément pour utiliser notre variable :

<body class="@bodyClasses">

Lancez votre application et regardez le code source généré. Vous verrez le code suivant :

<body class="main standard blue">

Jusqu'ici, rien d'étonnant, le même fonctionnement existe déjà avec Razor premier du nom, et produit le même résultat. Essayez alors de positionner la valeur null sur votre variable bodyClasses et regardez le résultat dans le code source de la page générée.
Code de la vue :

@{
string bodyClasses = null;
}

Code source de la page :

<body>

Magique ! La variable ayant pour valeur null, le moteur Razor 2 sait que l'attribut class de l'élément <body> est inutile, il décide donc tout seul de ne pas le générer ! Cette fonctionnalité est accessible avec les valeurs null et false (pour les booléens), ce qui permet bien des utilisations, comme par exemple les cases à cocher. Attention cependant, pour une chaîne de caractères, la valeur string.Empty n'est pas la même que null ! Ainsi, si on écrit le code suivant :

@{
// On peut aussi écrire string.bodyClasses = "";
string bodyClasses = string.Empty;
}

Alors le rendu HTML sera le suivant :

<body class="">

Exemple #2 : attribut checked

Vous trouverez ci-dessous un petit exemple avec une case à cocher (checkbox) qui, encore une fois, rend le code source HTML plus lisible, et évite d'envoyer plus de données vers le client que nécessaire, rendant au final l'accès à vos pages toujours plus rapide.
Prenons le code suivant dans une vue Razor 2 :

@{
bool isChecked = false;
}
<html>
...
<input type="checkbox" name="chkIsAdmin" checked="@isChecked" />
...
</html>

Code source généré :

<input type="checkbox" name="chkIsAdmin" />

Code de la vue si la case doit être cochée :

@{
bool isChecked = true;
}
// La suite du code est inchangée.

Code source HTML :

<input type="checkbox" name="chkIsAdmin" checked="checked" />

Non seulement le moteur de rendu Razor 2 ne génère le HTML que si celui-ci est nécessaire, mais en plus il fait la conversion de true vers checked comme un grand. Encore une petite amélioration qui rend la vie plus facile au développeur 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.