Comprendre les tag helpers et les gestionnaires de pages

Effectué

Dans l’unité précédente, vous avez créé une page Razor qui affiche une liste de pizzas. Vous avez utilisé le symbole @ pour basculer les contextes entre HTML et C#. Dans cette unité, vous allez découvrir les tag helpers. Les tag helpers sont un type spécial d’élément HTML qui peut contenir du code C#. Vous découvrirez également les gestionnaires de pages. Les gestionnaires de pages sont des méthodes qui gèrent les requêtes de navigateur. Vous utiliserez des gestionnaires de pages dans l’unité suivante pour ajouter et supprimer des pizzas.

Tag helpers

Les tag helpers sont une solution aux inefficacités du basculement de contexte entre HTML et C#. La plupart des tag helpers intégrés à ASP.NET Core étendent des éléments HTML standard. Les tag helpers fournissent des attributs côté serveur supplémentaires pour les éléments HTML, ce qui rend ces derniers plus robustes.

Il y a quatre tag helpers que vous devez connaître pour ce projet : Partial, Label, Input et Validation Summary Message.

Tag Helper Partial

<partial name="_ValidationScriptsPartial" />

Ce code injecte le contenu du fichier _ValidationScriptsPartial.cshtml dans une page. Le fichier _ValidationScriptsPartial.cshtml contient du code JavaScript qui valide l’entrée dans le formulaire. Il doit donc être inclus sur chaque page contenant un formulaire.

Tag helper Label

<label asp-for="Foo.Id" class="control-label"></label>

Il étend l’élément HTML standard <label>. Comme avec les tag helpers, il utilise un attribut asp-for. L’attribut accepte une propriété de PageModel. Dans le cas présent, la valeur de la propriété Foo.Id de PageModel (en l’occurrence, "Id") sera rendue comme contenu d’un élément HTML <label>.

Tag helper Input

<input asp-for="Foo.Id" class="form-control" />

Comme dans l’exemple précédent, il étend l’élément HTML standard <input>. Il utilise aussi un attribut asp-for pour spécifier une propriété PageModel. Dans le cas présent, la valeur de la propriété Foo.Id sera rendue comme attribut value pour un élément HTML <input>.

Tag Helper de résumé de validation

<div asp-validation-summary="All"></div>

Le tag helper Validation Summary affiche un message de validation pour une propriété unique sur le modèle.

Notes

Les éléments comme les règles de validation et les noms complets des propriétés sont définis dans la classe PageModel. Nous verrons où trouver ces éléments dans le code dans l’unité suivante.

Gestionnaires de pages

La classe PageModel définit les gestionnaires de pages pour les requêtes HTTP et les données servant au rendu de la page. Dans l’exercice précédent, la classe PizzaListModel gérait la requête HTTP GET en définissant la valeur de la propriété PizzaList sur la valeur _service.GetPizzas().

Les gestionnaires courants incluent OnGet pour l’initialisation des pages et OnPost pour les envois de formulaire. Pour gérer une requête HTTP POST, un gestionnaire de pages peut vérifier les données envoyées par l’utilisateur, représenter la page de formulaire d’entrée si les données ne sont pas valides, ou envoyer les données valides à un service ou à une base de données à des fins de persistance.

Dans l’unité suivante, vous allez ajouter un formulaire pour créer des pizzas au moyen de plusieurs tag helpers. Vous allez également ajouter des gestionnaires de pages pour gérer les envois de formulaire et la suppression de pizzas.