L’idée de ce post est de regrouper les éléments de syntaxe du nouveau moteur de vues Razor sans rentrer dans les détails de l’implémentation. Vous pouvez trouver le guide officiel ici.

Syntaxe de Razor – les bases

Principalement la syntaxe de Razor est caractérisée par le caractère “@”. Nous allons parcourir quelques exemples de base pour découvrir sa syntaxe. Le but principal est de rendre les vues plus lisibles grâce aux enchainements du code et de HTML plus fluides.

Razor dispose des trois parseurs :

  • Core parseur
  • Parseur de Markup
  • Parseur de Code.

Les trois parseurs travaillent ensemble pour analyser les vues de Razor.

Les opérateurs de base

Razor fait usage de différents opérateurs qui vous sont certainement connus de C# ou VB.NET.

.                  >=

()                 +

[]                 -  

=                  *

!                  /

==                 &&

!=                 ||

<>                 +=

<=                 -=

Je pense qu’il n’est pas nécessaire de détailler leur signification Clignement d'œil

Expressions

L’expression la plus simple est d’afficher un  message encodé :

   1: <p>
   2:     @ViewBag.Message
   3: </p>

vous avez également la version non encodée :

   1: <p>
   2:     @Html.Raw(ViewBag.Message)
   3: </p>

pour clairement indiquer à Razor qu’il doit traiter quelque chose comme une expression vous devez l’entourer avec des parenthèses :

   1: <span>WGE@(widgetNumber)</span>

pour mélanger les expressions avec le texte rien n’est plus simple :

   1: <p>Bonjour @prenom. Votre nome est @nom.</p>

Remarquez que le parseur de Razor est assez intelligent et ne traite pas le “.” après l’expression comme si on essayait d’appeler une méthode ou une propriété de l’expression.

Blocks de code

Le code de block simple et multi ligne est contenu entre les crochets précédés par un caractère “@”:

   1: @{
   2:     var @nom = "JASKULA";
   3:     var @prenom = "Thomas";
   4: }
   5:  
   6: <p>Bonjour @prenom. Votre nome est @nom.</p>

 

Variables

Pour déclarer les variables utilisez le mot clé “var” ou la syntaxe classique fortement typée. Le mot clé “new” est également autorisé.

   1: var message = "Razor est coooooool";
   2: string title = "Syntaxe de Razor";
   3: int number = 1558;
   4: var stringBuilder = new System.Text.StringBuilder();

Vous pouvez également utiliser tous les types standard du Framework.NET :

   1: var date = DateTime.Now.Year;

Chaines de caractères

Quelques considération à prendre en compte lors de la manipulation des chaines de caractères.

Si dans votre chaine des caractères il y a les backslash “\” ou les guillemets, vous pouvez utiliser l’opérateur “@” pour indiquer la chaine verbatim.

   1: @{
   2:     var folder = @"C:\Files\ASP\MVC";
   3: }
   4: <p>Le dossier de travail est : @folder</p>

Pour les textes avec les guillemets, vous devez utiliser l’opérateur de chaine verbatim est de doubler les guillemets comme dans l’exemple ci dessous :

   1: @{
   2:     var citation = @"Thomas a dit : ""Utilisez Razor est vous serez libérés.""";
   3: }
   4: <p>@citation</p>

Ce qui donne :

Thomas a dit : "Utilisez Razor est vous serez libérés."

A l’intérieur du bloc de code, si vous voulez afficher le texte plein vous pouvez utiliser les caractères “@:” :

   1: @{
   2:     
   3:         @:Ceci est un texte plein.
   4: }

Ce qui aura pour conséquence l’affichage du texte “Ceci est un texte plein” à l’écran.

 

Pour les adresses email, Razor est assez intelligent et reconnait les formats simples sans les traiter en tant que début du code block.

   1: <p>Votre email est thomas@jaskula.com</p>

 

Pour échapper le caractère “@”, vous devez le doubler tout simplement :

   1: <p>Dans Razor utilisez @@title pour afficher la veleur de title</p>

Ce qui donnera à l’affichage le texte suivant :

Dans Razor utilisez @title pour afficher la veleur de title

Commentaires

Dans Razor pour indiquer les commentaires vous commencez avec les caractères “@*” et terminez avec “*@”. A l’intérieur de blocks de code vous avez la possibilité d’utiliser la syntaxe de commentaire de votre langage de programmation. Quelques exemples :

   1: @{
   2:     @* Ceci est un commentaire *@
   3:     int age = 85;
   4:     
   5:     @* Tout est commenté *@
   6:     @* int age = 85; *@
   7:     
   8:     @* Ceci est le commentaire multiligne
   9:         une autre ligne *@
  10:     
  11:     @* multiligne également
  12:         int age = 85;
  13:         fin du commentaire *@
  14:     
  15:     // commentaire avec la syntaxe C#
  16:     
  17:     /* commentaire multiligne
  18:         avec la syntaxe C# */
  19: }

Instructions conditionnelles et les boucles

If…then…else
   1: @{
   2:     var products = new string[] { "produit 1", " produit 2", "produit 3" };
   3:     
   4:     if (products.Count() > 0){
   5:         <p>Le premier produit est : @products[0]</p>
   6:     }else{
   7:         <p>Il n'y a pas de produits en stock.</p>
   8:     }
   9: }
switch
   1: @{
   2:     var weekDay = 1;
   3:     string message = "";
   4:     switch (weekDay)
   5:     {
   6:         case 1:
   7:             message = "C'est lundi";
   8:             break;
   9:         case 2:
  10:             message = "C'est mardi";
  11:             break;
  12:         default:
  13:             message = "Jour inconnu.";
  14:             break;
  15:     }
  16:     
  17:     <p>@message</p>
  18: }
for
   1: @{
   2:     var products = new string[] { "product 1", "product 2", "product 3", "product 4" };
   3:  
   4:     int cnt = products.Count();
   5:     
   6:     for (var i = 0; i < cnt; i++)
   7:     {
   8:         <p>Le produit courant est : @productsIdea</p>
   9:     }
  10: }
foreach
   1: @{
   2:     var products = new string[] { "product 1", "product 2", "product 3", "product 4" };
   3:     
   4:     foreach (var product in products)
   5:     {
   6:         <p>Le produit courant est : @product</p>
   7:     }
   8: }

Jusqu’à maintenant rien de spécial. C’est similaire à ce que vous faites en C#.

try…catch…
   1: @{
   2:     var products = new string[] { "product 1", "product 2", "product 3", "product 4" };
   3:     
   4:     try{
   5:         <p>Le cinquième produit est : @products[4]</p>
   6:     }catch(IndexOutOfRangeException ex){
   7:         <p>Une erreur est survenue. Ce produit n'existe pas !</p>
   8:         <p>Details de l'erreur : @ex.Message</p>
   9:     }
  10: }

Try catch, je ne vois pas trop l’utilité car nos vues risque de devenir comme certains connaissent des WebForms Clignement d'œil

Conclusion

Comme vous pouvez le constater, la syntaxe des Razor est vraiment simple et intuitive. Dans le prochain post j’aborderai les notions de Layout sous Razor

 

// Thomas