Razor : la syntaxe

Razor est le moteur de template de .NET : une syntaxe qui mélange HTML et C# dans un même fichier. C'est le langage des composants Blazor (.razor) et des vues ASP.NET (.cshtml). Toute la logique tient dans un caractère : le @. On entre dans le détail, dans la continuité de l'introduction.

# Le @ : passer du HTML au C#

Le @ dit à Razor : « ce qui suit est du C# ». Il en existe trois formes :

<p>Bonjour @nom, il est @DateTime.Now.Hour h.</p>   @* expression simple *@

<p>Total : @(prix * quantite) EUR</p>               @* expression explicite entre parenthèses *@

@{
    var remise = prix * 0.2;   // bloc d'instructions : du C#, sans rien afficher
    var total = prix - remise;
}
<p>À payer : @total EUR</p>

<p>Bonjour @nom, il est @DateTime.Now.Hour h.</p>   @* expression simple *@

<p>Total : @(prix * quantite) EUR</p>               @* expression explicite entre parenthèses *@

@{

    var remise = prix * 0.2;   // bloc d'instructions : du C#, sans rien afficher

    var total = prix - remise;

}

<p>À payer : @total EUR</p>

• @expression : affiche la valeur (encodée HTML par sécurité).
• @(...) : quand l'expression est ambiguë (calcul, appel), on l'isole entre parenthèses.
• @{ ... } : un bloc d'instructions qui n'affiche rien, juste pour préparer des variables.

Razor détecte tout seul quand tu reviens au HTML : dès qu'il croise une balise, il rebascule.

# Les directives

En haut d'un fichier .razor, les directives configurent le composant. Ce sont des @ suivis d'un mot-clé :

@page "/produits/{id:int}"      @* route + contrainte de type *@
@using MonApp.Services          @* import de namespace *@
@inject ProduitService Service  @* injection de dépendance *@
@rendermode InteractiveServer   @* mode de rendu (.NET 8+) *@

@page "/produits/{id:int}"      @* route + contrainte de type *@

@using MonApp.Services          @* import de namespace *@

@inject ProduitService Service  @* injection de dépendance *@

@rendermode InteractiveServer   @* mode de rendu (.NET 8+) *@

# Les structures de contrôle

Pas de syntaxe spéciale : tu écris du C# normal préfixé par @, avec du HTML libre entre les accolades.

@if (panier.EstVide)
{
    <p>Ton panier est vide.</p>
}
else
{
    <ul>
        @foreach (var article in panier.Articles)
        {
            <li>@article.Nom - @article.Prix EUR</li>
        }
    </ul>
}

@if (panier.EstVide)

{

    <p>Ton panier est vide.</p>

}

else

{

    <ul>

        @foreach (var article in panier.Articles)

        {

            <li>@article.Nom - @article.Prix EUR</li>

        }

    </ul>

}

@if, @for, @foreach, @while, @switch : tous fonctionnent comme en C#, avec du balisage entre les {}.

# Le bloc @code et le code-behind

La logique du composant vit dans @code { } : champs, propriétés, méthodes, tout ce que tu mettrais dans une classe.

<button @onclick="Incrementer">Compteur : @compteur</button>

@code {
    private int compteur = 0;

    private void Incrementer() => compteur++;
}

<button @onclick="Incrementer">Compteur : @compteur</button>

@code {

    private int compteur = 0;

    private void Incrementer() => compteur++;

}

Quand le @code grossit, sépare-le dans un code-behind : un fichier Compteur.razor.cs contenant une partial class du même nom. Le markup d'un côté, la logique de l'autre, le même composant.

// Compteur.razor.cs
public partial class Compteur
{
    private int compteur = 0;
    private void Incrementer() => compteur++;
}

// Compteur.razor.cs

public partial class Compteur

{

    private int compteur = 0;

    private void Incrementer() => compteur++;

}

# À retenir

• Le @ est l'interrupteur entre HTML et C# ; @(...) isole une expression, @{ } exécute sans afficher.
• Les directives (@page, @using, @inject, @rendermode) configurent le composant en tête de fichier.
• Les structures de contrôle sont du C# normal préfixé par @, avec du HTML entre accolades.
• La logique va dans @code, ou dans un code-behind .razor.cs quand elle devient conséquente.

Prochaine étape : assembler cette syntaxe en briques réutilisables avec les composants Blazor.