Razor: Symbole @ et bonnes pratiques

Razor: Expressions

N'as-tu jamais rêvé de pouvoir générer du HTML procéduralement ? Par exemple, n'as-tu jamais rêvé de pouvoir afficher dynamiquement un tableau ? Ou pourquoi pas d'affficher DEV en haut de la page quand le projet est en phase de développement et l'enlever lorsque c'est la version de production ? Et bien avec Razor c'est possible: on peut ajouter du code C# dans les templates .cshtml. Ce code est compilé comme tout autre code C# et s'exécutera lorsque la page sera soumise par le serveur suite à une requête par un client.

Eh oui, il est possible d'utiliser tout ce que le langage C# te permet: boucles, conditions, variables, méthodes, classes ... Mais attention, certaines pratiques sont à proscrire: il ne faut pas confondre ta vue et ton contrôleur, chacun ont leur responsabilité. C'est pour cela que le code C# écrit dans un template ne doit concerner que la mise en forme et pas la logique avec laquelle les données à afficher ont été obtenues.

Objectifs

• Connaître les différentes syntaxes pour ajouter du code C# au template
• Apprendre à respecter les bonnes pratiques sur le templating

L'hérésie

Mélanger code exécutable et structure HTML ne fait pas bon ménage de nos jours. Les applications devenant de plus en plus complexes et performantes, elles demandent une force de développement de plus en plus importante. Cependant, on ne code pas un software plus vite en embauchant plus de développeurs (as-tu déjà imaginé que neuf femmes peuvent donner naissance à un enfant en 1 mois ?).

Effectivement, on peut réaliser à deux ou trois développeurs ce que dix n'ont pas pu réaliser en plus de temps. Et pour aller plus vite, les bons développeurs ne mélangent pas présentation et formatage des données !

Ainsi, le code suivant peut-être considéré mauvais:

@model IEnumerable<Int32>;
@{
    Int32 total = Model.Sum(m => m.Amount); // BEURK
}


<div class="container">
    Voici le total de vos dépenses: @total.
</div>

Donc, une manière propre de réaliser ce traitement ci-dessus serait:

Dans un fichier Controllers/SumController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using SumApp.Models;
using Microsoft.AspNetCore.Mvc;

namespace SumApp.Controllers
{
    public class HomeController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            IEnumerable<Int32> integers = new Int32[] { 1, 2, 3, 4 };
            Int32 sum = integers.Sum();
            
            return View(sum);
        }
    }
}

Et dans un fichier Views/Sum/Index.cs:

@model Int32;

<div class="container">
    Voici le total de vos dépenses: @Model.
</div>

L'exemple "propret" contient beaucoup plus de code et paraît plus compliqué. En effet, il est beaucoup plus simple de réaliser des traitements dans une vue, mais cela se fait au prix de la flexibilité du programme et a donc un impact non-négligeable sur la qualité logicielle.

Chaque brique d'un logiciel doit endosser une responsabilité qui doit être unique. C'est pour cela que des designs patterns comme le MVC sont nés: pour que la communauté des développeurs s'allie sous la bannière de bonnes pratiques communes.

Ainsi:

• Le contrôleur réalise des traitement logiques
• Le modèle dessine la structure des données
• La vue présente les informations traitées par le contrôleur

Arobase

Le symbole arobase est le symbole qui permet d'ajouter du code C# à une vue Razor. L'interprétation du symbole @ est intuitive. Ainsi, dès lors qu'apparaît le symbole @ (non échappé par un backslash) il est possible d'écrire du code.

Ainsi, en utilisant le symbole @ tu peux "tout faire". Rien ne vaut mieux que des exemples:

Afficher une variable

@model Int32;

<div class="container">
    Voici le total de vos dépenses: @Model.
</div>

Dans l'exemple ci-dessus, @Model fait référence au modèle de la page (les données qu'elle est censée afficher).

Ecrire une condition

<div class="container">
    @if (model > 10000000)
    {
        <p>You earn too much money</p>
    }
    else
    {
        <p>You should ask for a salary raise</p>
    }
</div>

Blocs de code

Il est possible d'écrire du code comme dans un fichier .cs à l'intérieur d'un bloc :

@{
    String conclusion = String.Empty;
    Int32 sum = Model.Sum(m => m.Amount);
    if (sum > 10000000)
    {
        conclusion = "You earn too much money";
    }
    else
    {
        conclusion = "You should ask for a salary raise";
    }
}

<div class="container">
    @conclusion
</div>

Challenge

Un peu de ménage !

Copie-colle ce code-ci et rends le plus propre en séparant la présentation du formatage.

@{
    String conclusion = String.Empty;
    Int32 sum = Model.Sum(m => m.Amount);
    if (sum > 10000000)
    {
        conclusion = "You earn too much money";
    }
    else
    {
        conclusion = "You should ask for a salary raise";
    }
}

<div class="container">
    @conclusion
</div>

Critères de validation

• Un contrôleur traite les données à envoyer à la vue avant d'en faire un rendu
• Aucune condition ni boucle n'est présente dans le fichier .cshtml