2-9 Syntaxe Razor

Vous avez surement remarqué l'utilisation du @ dans les vues. Ces dernières utilisent une syntaxe propre à Microsoft, appelée Razor, et le @ permet de préciser que ce qui le suit est du code et non du HTML conventionnel.

Nous avons utilisé le @ jusqu'à présent dans les cas suivants:

• @model: préciser le type de modèle reçu par la vue
• @{}: code arbitraire, comme Layout = _Layout;
• @Model.[propriété]: récupérer une propriété du modèle

La syntaxe Razor permet d'aller plus loin via:

• @if(...)
• @foreach(...)
• @Html

Afficher la liste d'évènements

Pour afficher les éléments d'une liste, on peut utiliser @foreach() de la façon suivante:

Snowfall.Web.Mvc/Views/Evenements/Index.cshtml

@model List<Evenement>;

@{
    ViewBag.Title = "Événements"; // Le titre ici est général puisqu'on retourne une liste
}

<h1>Événements</h1> <!-- Ajout d'un titre générique -->

<!-- Bloc foreach pour afficher les événements -->
@foreach (Evenement evenement in Model)
{
    <h2>@evenement.Nom</h2>
    <p>@evenement.Description</p>
    <ul>
        <li>Date: @evenement.Date.ToShortDateString()</li>
        <li>Capacité: @evenement.Capacite</li>
        <li>Prix: @evenement.Prix</li>
    </ul>
}

Ce qui devrait donner ceci:

Qu'avons-nous fait?

• ViewBag.Title: Premièrement, comme il s'agit d'une page générique affichant plusieurs éléments, le titre est remplacé par simplement "Événements"
• <h1>Événements</h1>: Idem pour le titre h1 de la page.
• @foreach: Pour chaque événement de la liste, on affiche un bloc HTML propre à l'événement

Dans la boucle, entre les accolades ({}), il est possible d'utiliser un mélange de HTML et de code. Par exemple, on utilise les balises suivantes...

• h2
• ul
• li

... mais on fait aussi référence à la variable locale de la boucle, evenement, via @evenement.

Le @ indique qu'on s'apprête à écrire du code ou faire référence à une variable.

Utilisation de condition if

Si, par exemple, pour des champs optionnels, on veut afficher le champ de façon conditionnelle, il est possible de le faire via un if.

Dans le cas de l'image, ajoutez l'affichage conditionnel:

Snowfall.Web.Mvc/Views/Evenements/Index.cshtml

@foreach (Evenement evenement in Model)
{
    <h2>@evenement.Nom</h2>
    @if (@evenement.ImagePath != null)
    {
        <img src="@evenement.ImagePath" alt="Image d'événement" />
    }
    <p>@evenement.Description</p>
    <ul>
        <li>Date: @evenement.Date.ToShortDateString()</li>
        <li>Capacité: @evenement.Capacite</li>
        <li>Prix: @evenement.Prix</li>
    </ul>
}

Et dans le but de tester, ajoutez à un des événements dans le contrôleur, une image quelconque:

Snowfall.Web.Mvc/Controllers/EvenementsController.cs

//...
    Ville = "Los Angeles, US",
    ImagePath = "https://placehold.co/600x400",
},

Classe conditionnelle

Finalement, une autre utilisation du if peut être d'afficher une classe conditionnelle.

Par exemple, modifiez la vue de cette façon:

Snowfall.Web.Mvc/Views/Evenements/Index.cshtml

<ul>
    <li>Date: @evenement.Date.ToShortDateString()</li>
    
    @{
        var classeBold = @evenement.Capacite > 1000 ? "fw-bold" : null;
    }
    <li class="@classeBold">Capacité: @evenement.Capacite</li>
    <li>Prix: @evenement.Prix</li>
</ul>

Cela aura comme effet de mettre en gras la ligne de capacité si le nombre de places pour un événement est supérieur à 1000.