Voir le flux RSS

Hinault Romaric

[Actualité] ASP.NET Core : Introduction aux Tag Helpers

Noter ce billet
par , 13/07/2017 à 02h19 (512 Affichages)
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 - Visualiser dans une fenêtre à part
@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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
<span asp-validation-for="FirstName" class="text-danger" />

Ce qui va générer le code HTML suivant :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
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 &#x27;1024&#x27;."
   data-val-maxlength-max="1024"
   data-val-minlength="The field Description must be a string or array type with a minimum length of &#x27;5&#x27;."
   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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
<a asp-controller="User" asp-action="Create">New User</a>

Va générer le code HTML suivant :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
<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 - Visualiser dans une fenêtre à part
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.

Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Viadeo Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Twitter Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Google Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Facebook Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Digg Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Delicious Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog MySpace Envoyer le billet « ASP.NET Core : Introduction aux Tag Helpers » dans le blog Yahoo

Mis à jour 13/07/2017 à 18h16 par ClaudeLELOUP

Catégories
DotNET , C# , .NET Core , ASP.NET Core , ASP.NET Core MVC

Commentaires