Razor a été conçu pour permettre de mixer facilement le contenu serveur avec du code HTML. Cependant, il introduit de nouveaux concepts, notamment les HTML Helpers, qui nécessitent de l’apprentissage supplémentaire pour les développeurs. Par ailleurs, l’interprétation d’une vue Razor est beaucoup plus difficile pour un développeur Front-End ou un designer. Pour alléger le code de la vue et rendre celui-ci moins difficile à interpréter pour un développeur ne maitrisant que le HTML, Microsoft a introduit avec ASP.NET Core les Tag Helpers comme une alternative aux HTML Helpers. Pour en savoir plus sur les HTML Helpers, vous pouvez consulter l’article suivant : présentation du moteur de vue Razor.
Les Tag Helpers permettent d’étendre la syntaxe du HTML et y ajouter du code serveur qui participera à la création et au rendu du contenu HTML.
Ajout des Tag Helpers dans une vue
Avant toute utilisation d’un Tag Helper dans une vue, vous devez au préalable ajouter la directive suivante dans votre vue :
| Code html : | Sélectionner tout |
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Tag Helper Input
Concrètement, dans une balise HTML standard, vous aurez de nouveaux attributs que vous pourrez utiliser pour le rendu du contenu côté serveur.
Par exemple, l’utilisation de la balise Input, en liant ce dernier directement à une propriété de votre modèle dans une vue se fait comme suit :
| Code html : | Sélectionner tout |
<input asp-for="FirstName" class="form-control"/>À l’exécution de votre application, le Tag Helper Input sera interprété et le code suivant sera généré et retourné au navigateur :
| Code html : | Sélectionner tout |
<input class="form-control" data-val="true" data-val-required="The First name field is required." id="FirstName" name="FirstName" value="" type="text"></input>
Vous remarquez la présence de l’attribut asp-for (vous pouvez également simplement utiliser For) avec pour valeur FirstName. Au moment de l’exécution de la page, Razor va lier cette valeur avec la propriété correspondante dans le modèle :
| Code c# : | Sélectionner tout |
1 2 3 | [Required] [Display(Name = "First Name")] public string FirstName { get; set; } |
Le type de la propriété et les annotations disponibles sur cette dernière ([Required]) vont permettre de générer les attributs type, data-val et data-val-required.
Le Tag Helper Validation Message
À la suite du Input, ce Tag Helper va permettre d’afficher à côté de ce champ un message d’erreur de validation. Il s’utilise comme suit :
| Code html : | Sélectionner tout |
<span asp-validation-for="FirstName" class="text-danger" />Ce qui va générer le code HTML suivant :
| Code html : | Sélectionner tout |
1 2 3 | <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span> |
data-valmsg va permettre de créer la liaison avec la propriété du modèle (FirstName) à valider et afficher le message d’erreur indiqué. Lorsqu’une erreur de validation sera levée (champ obligatoire) côté client, jQuery va afficher le message d’erreur dans la balise <span>.
Le Tag Helper textarea
Similaire au Tag Helper Input, il sera utilisé pour générer la balise textarea.
Par exemple, si vous disposez de la propriété suivant dans votre modèle :
| Code c# : | Sélectionner tout |
1 2 3 | [MinLength(5)] [MaxLength(1024)] public string Description { get; set; } |
L’utilisation du code ci-après dans votre vue :
| Code html : | Sélectionner tout |
<textarea asp-for="Description"></textarea>
Va générer le code HTML ci-dessous lorsque la page sera exécutée :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 | <textarea data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '1024'." data-val-maxlength-max="1024" data-val-minlength="The field Description must be a string or array type with a minimum length of '5'." data-val-minlength-min="5" id="Description" name="Description"> </textarea> |
Le Tag Helper Label
Nous souhaitons formater le nom de notre modèle avant de l’afficher dans une vue. C’est pourquoi, dans notre modèle nous avons ajouté l’annotation [Display(Name = "First Name")].
Le Tag Helper Label va nous permettre d’aller chercher ce nom et l’afficher dans notre page.
En l’utilisant comme suit dans une vue Razor :
| Code html : | Sélectionner tout |
<label asp-for="FirstName" class="col-md-2 control-label"></label>
Nous obtenons le code suivant à l’exécution dans le navigateur :
| Code html : | Sélectionner tout |
<label asp-for="FirstName" class="col-md-2 control-label"></label>
Le Tag Helper Form
Il s’agit de la balise HTML Form avec des nouveaux attributs qu’apporte Razor côté serveur, qui vont permettre lors de l’envoi du formulaire de sélectionner le contrôleur et l’action adéquats.
Il s’utilise comme suit :
| Code html : | Sélectionner tout |
1 2 3 | <form asp-controller="User" asp-action="Create" method="post"> </form> |
Vous remarquez la présence des nouveaux attributs asp-controller et asp-action qui vont permettre de définir le contrôleur et l’action qui seront appelés lors de l’envoi du formulaire.
Le code HTML qui est généré à l’exécution est le suivant :
| Code html : | Sélectionner tout |
1 2 3 | <form method="post" action="/User/Create"> <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" /> </form> |
Le Tag Helper Form génère l’input Request Verification Token pour la protection contre les attaques permettant l’injection de contenu.
Le Tag Helper Anchor
Le Tag Helper Anchor est utilisé pour la génération des liens hypertextes dans une vue. Ses attributs les plus importants sont asp-controller qui va permettre de faire une liaison avec le contrôleur et asp-action pour l’action du contrôleur qui sera appelée.
Par exemple, la ligne de code suivante dans une vue Razor :
| Code html : | Sélectionner tout |
<a asp-controller="User" asp-action="Create">New User</a>
Va générer le code HTML suivant :
| Code html : | Sélectionner tout |
<a href="/User/Create">New User</a>
Vous pouvez ignorer le paramètre asp-controlleur si la vue cible est dans le même répertoire que la vue initiale.
Pour ajouter un paramètre au lien, vous devez insérer l’attribut asp-route-id :
| Code html : | Sélectionner tout |
<a asp-controller="User" asp-action="Edit" asp-route-id="2">Edit</a>
Ce code va produire la sortie HTML suivante :
| Code html : | Sélectionner tout |
<a href="/User/Edit/2">Edit</a>
Les Tag Helper Link et Script
Les Tag Helper Link et Script vont permettre de gérer aisément l’ajout des fichiers de script JavaScript et des feuilles de styles CSS dans notre application. Ces Tag Helpers disposent d’attributs intéressants pour accroître la productivité des développeurs, gérer les CDN ou encore les performances.
L’utilisation du Tag Helper Script avec l’attribut asp-src-include comme suit :
| Code html : | Sélectionner tout |
<script asp-src-include="~/wwroot/**/*.js"></script>Va permettre de référencer dans la page HTML générée, tous les fichiers avec l’extension .js contenu dans le dossier wwroot. L’attribut asp-src-exclude qui s’utilise de la même façon, va permettre d’exclure les fichiers non désirés.
Si vous utilisez un CDN (Content Delivery Network) dans une page Web, l’attribut asp-fallback-href permet de renseigner un autre emplacement où trouver le fichier référencé s’il arrive que le CDN ne réponde pas.
| Code html : | Sélectionner tout |
1 2 3 | <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> |
De plus, l’attribut asp-append-version a été introduit pour gérer la mise en cache des fichiers statistiques. Avec sa valeur à true, le fichier spécifié est mis en cache par le navigateur, jusqu’à ce qu’une nouvelle version soit disponible :
| Code html : | Sélectionner tout |
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>Si le code ci-dessus est inséré dans la page, le code HTML suivant sera généré :
| Code html : | Sélectionner tout |
<link rel="stylesheet" href="/css/site.min.css?v=UdxKHVNJA5vb1EsG9O9uURFDfEE3j1E3DgwL6NiDGMc" />Si le fichier site.min.css est modifié, alors le code HTML sera généré avec un nouveau numéro de version, ce qui permettra au navigateur de charger à nouveau ce fichier et le mettre en cache.
Le tag Helper Environment
Lorsque nous sommes en phase de développement, les fichiers CSS et JavaScript que nous utilisons sont présents sur notre poste. Lorsque nous passons en phase de production nous avons recours à des fichiers minifiés qui seront hébergés sur un CDN (Content delivery network).
Pour éviter d’avoir à modifier votre vue chaque fois que vous déployez votre application pour ajouter la référence aux fichiers hébergés sur le CDN, ASP.NET Core offre le Tag Helper environment.
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | <environment names="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" /> </environment> <environment names="Production"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> </environment> |
En fonction de l’environnement dans laquelle vous vous trouvez, les fichiers adéquats seront intégrés dans le fichier HTML qui sera généré par le serveur.