La syntaxe basique de Razor

Dans cet article, nous allons nous intéresser aux principes de base de la syntaxe Razor.

La chose la plus basique que vous pouvez faire avec Razor est d'accéder à quelque chose côté serveur en préfixant une variable ou une fonction avec un @ (caractère arobase). Nous avons déjà vus quelques exemples dans les articles précédents, où nous pouvons mélanger HTML, texte et variables serveurs ensemble de cette façon :

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

L'expression ci dessus sort un texte, mélangé avec la variable name (qui doit être déclarée ailleurs), puis il accède à la date actuelle dans la propriété Now de la classe DateTime, et grâce à cette simple syntaxe, le code est très simple à lire.

Mais le préfixe @ n'est pas simplement là pour accéder à des variables ou à des propriétés sur une classe. Il est utilisé pour quasiment tout dans Razor, comme les contrôles de variable en ligne, les blocs de code, et bien plus comme nous allons le constater dans les exemples suivants.

Encodage HTML

Nous devons prendre en compte que si l'on utilise la syntaxe Razor implicite ci-dessus, la sortie sera encodée en HTML. C'est généralement le comportement que nous recherchons, mais dans certains cas, nous voulons être capable de générer du HTML et de le faire interpréter par le navigateur au lieu de le générer en sortie. Pour ceci, nous pouvons utiliser la méthode Raw() dans la classe Html. Voici un exemple pour voir la différence :

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

Le résultat ressemblera à ceci. On peut voir que dans la première ligne, le texte est juste généré comme du texte (il a été encodé en HTML), là où la seconde ligne est interprétée et de par le fait rend le texte gras.

<b>Hello, world!</b>

Hello, world!

Expressions explicites

Dans le premier exemple ci-dessus, nous utilisons une expression implicite, mais dans certaines situations, nous aurons besoin d'une variante plus explicite, pour expliquer au traducteur quelles sont nos vraies intentions. Razor possède une syntaxe exmplicite pour ces situations, il s'agit simplement d'entourer notre expression par des parenthèses. Cela permet au traducteur une meilleure compréhension de notre démarche, et autorise les calculs et les modifications dans une expression Razor.

Voici un exemple :

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

Nous pouvons remarquer dans la syntaxe que le caractère @ est suivi par des parenthèses englobant. Nous l'utilisons deux fois : La première pour accéder à la méthode Substring de la variable de chaine de caractères, ainsi que pour faire une simple opération mathématique dans l'expression Razor. Le résultat devrait être le suivant :

Hello, John. Your age is: 42.

Blocs de lignes multiples de Razor

Si vous voulez aller plus loin que l'accès à une variable, Razor vous propose d'entrer un bloc de code multi-ligne en ajoutant une accolade après l'opérateur @. Voici un exemple :

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

Vous pouvez remarquer que nous avons simplement écrit du code C# dans le bloc de code, avec des boucles, des conditions, et tout ce que nous connaissons du langage C#. Une différence cependant est que nous avons des accolades autour de nos instructions de notre bloc de code, même si cela couvre une seule ligne - sinon on risque de rendre confus l'interpréteur.

Remarquez également comme nous avons pu définir une variable dans le bloc de code, nous le modifions selon nos besoins, puis nous l'utilisons en dehors du bloc !

Balises HTML et texte brut dans un bloc de code

Quand nous sommes dans un bloc de code, comme montré dans l'exemple précédent, nous allons peut-être avoir besoin de générer du code - En vrai, c'est tout à fait normal. Mais au lieu de nous forcer à sortir puis à revenir dans un bloc de code, Razor nous autorise à mélanger des balises HTML directement dans notre code, comme ceci :

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

Razor remarque vos balises HTML et en déduit que vous lui donnez du code client à renvoyer et non pas du code à compiler. Mais que ce passe t'il si nous ne voulons pas baliser notre texte ? Razor possède une option pour ceci, en utilisant l'opérateur @: :

@:This is plain text!

Si nous avons besoin de plus d'une simple ligne de texte, nous pouvons également l'entourer d'une balise <text>. Voici un exemple plus complet, où nous allons voir les deux syntaxes :

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

Remarquez comme nous pouvons désormais mélanger code, HTML et texte très simplement !

Commentaires côté serveur de Razor

Parfois nous allons vouloir laisser un commentaire sur notre code, ou bien commenter une ligne de code temporairement pour des raisons de text. Pour celà, la plupart des langages de programmation intègrent une syntaxe pour commenter du code, et Razor en fait parti. Vous pourriez utiliser des commentaires HTML, mais comme nous le savons déjà, ils seront rendus dans le code HTML et donc pourront être vus en utilisant l'option "Voir la source". Les commentaires Razor par contre ne sont jamais rendus puisqu'ils sont ignorés quand l'interpréteur passe dessus.

Voici un exemple de la façon d'écrire des commentaires Razor dans vos vues :

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

Si vous êtes dans un bloc de code Razor, vous pouvez également utiliser le commentaire de C# :

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

Conclusion

Voici les choses les plus basiques de Razor à connaître, et cela devrait vous aider à démarrer. Dans le prochain article, nous allons étudier des fonctions plus avancées.