Vous avez surement déjà entendu parlé de Razor. Oui mais qu’est-ce que Razor concrètement ?
Dans cet article, je vais vous présenter Razor, un nouveau type de moteur de vue pour ASP.NET MVC.
Razor permet de gagner du temps car vous écrivez vos vues plus rapidement mais aussi de gagner en lisibilité car vos vues sont plus simples à comprendre.
Généralement, les développeurs utilisent les vues au format ASPX, surtout pour des raisons historiques (ASPX était utilisé avec ASP.NET Webforms, j’en parlais dans l’article Pourquoi ne faut-il pas confondre ASP.NET Webforms et ASP.NET MVC ?).
Les vues au format ASPX sont surtout difficile à écrire car il faut sans arrêt ouvrir et fermer les tags <% et %>. C’est un peu comme en PHP à ses début (<?php et ?>).
Pour écrire des boucles ou des blocs conditionnels, vous êtes sans arrêt obligé de jongler avec les ouvertures et les fermetures de tags. Bref, au bout d’un moment, plus personne ne comprend rien dans le code.
Microsoft propose une solution alternative qui prend en compte un certain nombre d’évolutions. Cette solution se nomme Razor. Il s’agit donc d’un moteur de vue (le composant qui va s’occuper de générer votre code HTML) qui peut se greffer dans ASP.NET MVC.
Ce moteur de vue apporte les évolutions suivantes :
- Ecriture de la vue plus simple,
- Code plus compacte,
- Meilleure compréhension des structures conditionnelles (if, while, for…),
- Un support natif du langage (C# ou VB.NET),
- L’ajout de sections permettant de regrouper des blocs de code très facilement.
Comment utiliser Razor ?
Dans Visual Studio, lorsque vous créez un nouveau projet, il suffit simplement de choisir le moteur de vue que vous souhaitez utiliser.
A partir de ce moment, lorsque vous créez une nouvelle vue, l’éditeur vous proposera par défaut d’utiliser Razor.
Les vues Razor auront l’extension .cshtml en C# et .vbhtml en VB.NET.
Pour mieux comprendre la syntaxe de Razor, je vous propose quelques exemples, très simples.
Syntaxe Razor
Hello world en Razor
Pour vous permettre de comparer les deux syntaxe, je vous propose un premier exemple avec ASPX et avec Razor.

Exemple 1: Hello World en ASPX.

Exemple 1: Hello World en Razor
En comparant ces deux morceaux de code, vous remarquerez que Razor utilise le symbole « @ ».
En fait, toutes les instructions en C# (ou en VB.NET) seront utilisées avec le symbole @.
Les boucles
Pour écrire des boucles pour générer du code HTML, Razor devient encore plus intéressant :

Exemple 2 : Une boucle foreach
En fait, pour faire simple : Razor « comprend » ce que vous écrivez. Ainsi, lorsque vous écrivez un morceau de code en C#, il sait à quel moment le code se termine. Grâce à cette intelligence, il n’est pas nécessaire de fermer des tags.
Les autres types de blocs
Je vous propose de voir rapidement deux autres types de blocs utilisés fréquemment :

Exemple 3: le bloc if/then/else

Exemple 4: Code multi-ligne
Les autres nouveautés
Layout pages
Pour faciliter la mise en place d’un design cohérent et commun à toutes les pages, vous aviez peut être déjà utilisé les Master Pages avec ASP.NET (introduit à la version 2.0).
Ces Master Pages permettent de créer des zones dans lesquelles le contenu sera généré au moment d’afficher la page.
Razor propose le même type de mécanisme et qui se nomme les Layout Pages. Grâce à ce fonctionnement, vous pouvez définir une page « modèle ». Toutes les autres pages pourront hériter de cette page modèle.
Lorsque vous créez un projet ASP.NET MVC, il y a déjà un layout par défaut qui se nomme « _Layout.cshtml » (situé dans Views/Shared).
Un layout contient une ou plusieurs zones qui sont définies grâce à l’appel d’une méthode « Render ». Grâce à ces zones vous pouvez regrouper le code Javascript ou les appels CSS au même endroit.
Je vous propose un exemple simple pour mieux comprendre :

Exemple de layout page avec Razor
L’utilisation des zones est très puissante car elle permet de mieux découper vos vues et surtout de générer du code HTML bien mieux structuré.
Pour aller plus loin
Pour compléter cet article, je vous ai préparé une fiche pratique au format PDF que vous pouvez télécharger gratuitement. Cette fiche présente l’ensemble de la syntaxe Razor : tout ce qu’il faut pour coder au quotidien.
[sociallocker] Télécharger la fiche PDF complémentaire (mémo Razor)[/sociallocker]
Merci pour cet article intéressant en effet avec razor le gain en lisibilité et en temps est considérable.