Tag Helpers dans ASP.NET CoreTag Helpers in ASP.NET Core

Par Rick AndersonBy Rick Anderson

Que sont les Tag Helpers ?What are Tag Helpers?

Les Tag Helpers permettent au code côté serveur de participer à la création et au rendu des éléments HTML dans les fichiers Razor.Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Par exemple, le ImageTagHelper intégré peut ajouter un numéro de version au nom de l’image.For example, the built-in ImageTagHelper can append a version number to the image name. Chaque fois que l’image change, le serveur en génère une nouvelle version unique, pour que les clients soient sûrs d’obtenir l’image actuelle (au lieu d’une image mise en cache obsolète).Whenever the image changes, the server generates a new unique version for the image, so clients are guaranteed to get the current image (instead of a stale cached image). Il existe de nombreux Tag Helpers pour les tâches courantes (par exemple la création de formulaires ou de liens, le chargement de ressources, etc.) et bien d’autres encore, dans les dépôts GitHub publics et sous forme de packages NuGet.There are many built-in Tag Helpers for common tasks - such as creating forms, links, loading assets and more - and even more available in public GitHub repositories and as NuGet packages. Les Tag Helpers sont créés en C# et ciblent les éléments HTML en fonction du nom de l’élément, du nom de l’attribut ou de la balise parente.Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. Par exemple, le LabelTagHelper intégré peut cibler l’élément <label> HTML quand les attributs LabelTagHelper sont appliqués.For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. Si vous connaissez déjà les HTML Helpers, les Tag Helpers permettent de réduire les transitions explicites entre le code HTML et le code C# dans les affichages Razor.If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. Dans de nombreux cas, les HTML Helpers offrent une autre approche par rapport à un Tag Helper spécifique. Toutefois, il est clair que les Tag Helpers ne remplacent pas les HTML Helpers, et qu’il n’existe pas toujours un Tag Helper pour chaque HTML Helper.In many cases, HTML Helpers provide an alternative approach to a specific Tag Helper, but it's important to recognize that Tag Helpers don't replace HTML Helpers and there's not a Tag Helper for each HTML Helper. Comparaison des Tag Helpers aux HTML Helpers explique les différences de façon plus approfondie.Tag Helpers compared to HTML Helpers explains the differences in more detail.

Ce que fournissent des Tag helpersWhat Tag Helpers provide

Une expérience de développement HTML Dans leur majorité, les balises Razor qui utilisent des Tag Helpers ressemblent à du code HTML standard.An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. Les concepteurs frontaux familiarisés avec HTML, CSS et JavaScript peuvent modifier Razor sans apprendre la syntaxe Razor C#.Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

Un riche environnement IntelliSense pour la création de balises HTML et Razor Cet environnement se démarque fortement des HTML Helpers, correspondant à la précédente approche de la création côté serveur de balises dans les affichages Razor.A rich IntelliSense environment for creating HTML and Razor markup This is in sharp contrast to HTML Helpers, the previous approach to server-side creation of markup in Razor views. Comparaison des Tag Helpers aux HTML Helpers explique les différences de façon plus approfondie.Tag Helpers compared to HTML Helpers explains the differences in more detail. Prise en charge IntelliSense des Tag Helpers explique l’environnement IntelliSense.IntelliSense support for Tag Helpers explains the IntelliSense environment. Même les développeurs habitués à la syntaxe Razor C# sont plus productifs en utilisant des Tag Helpers qu’en écrivant des balises Razor C#.Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

Un moyen d’améliorer votre productivité et votre capacité à produire du code plus robuste, fiable et facile à gérer en utilisant des informations uniquement disponibles sur le serveur Par exemple, l’ancien usage pour la mise à jour des images consistait à modifier le nom de l’image quand vous modifiiez l’image.A way to make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server For example, historically the mantra on updating images was to change the name of the image when you change the image. Les images doivent être efficacement mises en cache pour des raisons de performance, et à moins de modifier le nom d’une image, les clients risquent d’obtenir une copie obsolète.Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. Auparavant, une fois qu’une image avait été modifiée, le nom devait être modifié et chaque référence à l’image dans l’application web avait besoin d’être mise à jour.Historically, after an image was edited, the name had to be changed and each reference to the image in the web app needed to be updated. Non seulement ce travail était fastidieux, mais il engendrait facilement des erreurs (vous pouviez oublier une référence, entrer la mauvaise chaîne par inadvertance, etc.). Le ImageTagHelper intégré peut s’en charger automatiquement à votre place.Not only is this very labor intensive, it's also error prone (you could miss a reference, accidentally enter the wrong string, etc.) The built-in ImageTagHelper can do this for you automatically. Le ImageTagHelper peut ajouter un numéro de version au nom de l’image, si bien que dès que l’image change, le serveur génère automatiquement une nouvelle version unique de l’image.The ImageTagHelper can append a version number to the image name, so whenever the image changes, the server automatically generates a new unique version for the image. Les clients sont sûrs d’obtenir l’image actuelle.Clients are guaranteed to get the current image. Cette robustesse et cette économie de travail sont inhérentes à l’utilisation du ImageTagHelper.This robustness and labor savings comes essentially free by using the ImageTagHelper.

La plupart des Tag Helpers intégrés ciblent les éléments HTML standard et fournissent des attributs côté serveur pour l’élément.Most built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. Par exemple, l’élément <input> utilisé dans de nombreuses vues dans le dossier Views/Account contient l’attribut asp-for.For example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. Cet attribut extrait le nom de la propriété de modèle spécifiée dans le code HTML restitué.This attribute extracts the name of the specified model property into the rendered HTML. Examinons une vue Razor avec le modèle suivant :Consider a Razor view with the following model:

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

Le balisage Razor suivant :The following Razor markup:

<label asp-for="Movie.Title"></label>

Génère le code HTML suivant :Generates the following HTML:

<label for="Movie_Title">Title</label>

L’attribut asp-for est rendu disponible par la propriété For dans le LabelTagHelper.The asp-for attribute is made available by the For property in the LabelTagHelper. Pour plus d’informations, consultez Créer des Tag Helpers.See Author Tag Helpers for more information.

Gestion de l’étendue des Tag HelpersManaging Tag Helper scope

L’étendue des Tag Helpers est contrôlée par une combinaison de @addTagHelper, @removeTagHelper et du caractère d’annulation « ! ».Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

@addTagHelper rend les Tag Helpers disponibles@addTagHelper makes Tag Helpers available

Si vous créez une application web ASP.NET Core nommée AuthoringTagHelpers (avec aucune authentification), le fichier qui suit Views/_ViewImports.cshtml sera ajouté à votre projet :If you create a new ASP.NET Core web app named AuthoringTagHelpers (with no authentication), the following Views/_ViewImports.cshtml file will be added to your project:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

La directive @addTagHelper rend les Tag Helpers disponibles dans l’affichage.The @addTagHelper directive makes Tag Helpers available to the view. Dans cet exemple, le fichier d’affichage est Views/_ViewImports.cshtml, qui est hérité par défaut par tous les fichiers d’affichage dans le dossier et les sous-répertoires Views ; les Tag Helpers sont ainsi disponibles.In this case, the view file is Views/_ViewImports.cshtml, which by default is inherited by all view files in the Views folder and sub-directories; making Tag Helpers available. Le code ci-dessus utilise la syntaxe d’expressions génériques (« * ») pour spécifier que tous les Tag Helpers dans l’assembly spécifié (Microsoft.AspNetCore.Mvc.TagHelpers) sont disponibles pour chaque fichier d’affichage du répertoire ou sous-répertoire Views.The code above uses the wildcard syntax ("*") to specify that all Tag Helpers in the specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to every view file in the Views directory or sub-directory. Le premier paramètre après @addTagHelper spécifie les Tag Helpers à charger (nous utilisons « * » pour tous les Tag Helpers), et le deuxième paramètre « Microsoft.AspNetCore.Mvc.TagHelpers » spécifie l’assembly qui contient les Tag Helpers.The first parameter after @addTagHelper specifies the Tag Helpers to load (we are using "*" for all Tag Helpers), and the second parameter "Microsoft.AspNetCore.Mvc.TagHelpers" specifies the assembly containing the Tag Helpers. Microsoft.AspNetCore.Mvc.TagHelpers est l’assembly des Tag Helpers ASP.NET Core intégrés.Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

Pour exposer tous les Tag Helpers inclus dans ce projet (ce qui crée un assembly nommé AuthoringTagHelpers), utilisez ce qui suit :To expose all of the Tag Helpers in this project (which creates an assembly named AuthoringTagHelpers), you would use the following:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

Si votre projet contient un EmailTagHelper avec l’espace de noms par défaut (AuthoringTagHelpers.TagHelpers.EmailTagHelper), vous pouvez fournir le nom qualifié complet (FQN) des Tag helpers :If your project contains an EmailTagHelper with the default namespace (AuthoringTagHelpers.TagHelpers.EmailTagHelper), you can provide the fully qualified name (FQN) of the Tag Helper:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

Pour ajouter un Tag Helper à un affichage à l’aide d’un FQN, vous ajoutez d’abord ce FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), puis le nom de l’assembly (AuthoringTagHelpers).To add a Tag Helper to a view using an FQN, you first add the FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), and then the assembly name (AuthoringTagHelpers). La plupart des développeurs préfèrent utiliser la syntaxe d’expressions génériques « * ».Most developers prefer to use the "*" wildcard syntax. Celle-ci permet d’insérer le caractère générique « * » en guise de suffixe dans un FQN.The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. Par exemple, chacune des directives suivantes affiche le EmailTagHelper :For example, any of the following directives will bring in the EmailTagHelper:

@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers

Comme mentionné précédemment, l’ajout de la directive @addTagHelper au fichier Views/_ViewImports.cshtml met le Tag Helper à la disposition de tous les fichiers d’affichage inclus dans le répertoire et les sous-répertoires Views.As mentioned previously, adding the @addTagHelper directive to the Views/_ViewImports.cshtml file makes the Tag Helper available to all view files in the Views directory and sub-directories. Vous pouvez utiliser la directive @addTagHelper dans des fichiers d’affichage spécifiques si vous choisissez d’exposer le Tag Helper uniquement à ces affichages.You can use the @addTagHelper directive in specific view files if you want to opt-in to exposing the Tag Helper to only those views.

@removeTagHelper supprime les Tag Helpers@removeTagHelper removes Tag Helpers

Le@removeTagHelper a les deux mêmes paramètres que @addTagHelper, et il supprime un Tag helper ajoutée précédemment.The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. Par exemple, @removeTagHelper appliqué à une vue supprime le Tag helper spécifié de la vue.For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. Utiliser @removeTagHelper dans un fichier Views/Folder/_ViewImports.cshtml supprime le Tag helper à partir de toutes les vues du dossier.Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder.

Contrôle de l’étendue des Tag Helpers à l’aide du fichier _ViewImports.cshtmlControlling Tag Helper scope with the _ViewImports.cshtml file

Vous pouvez ajouter un fichier _ViewImports.cshtml à tout dossier d’affichage. Le moteur d’affichage applique les directives de ce fichier et du fichier Views/_ViewImports.cshtml.You can add a _ViewImports.cshtml to any view folder, and the view engine applies the directives from both that file and the Views/_ViewImports.cshtml file. Si vous avez ajouté un fichier Views/Home/_ViewImports.cshtml vide pour les affichages Home, rien n’est modifié car le fichier _ViewImports.cshtml est additif.If you added an empty Views/Home/_ViewImports.cshtml file for the Home views, there would be no change because the _ViewImports.cshtml file is additive. Toute directive @addTagHelper que vous ajoutez au fichier Views/Home/_ViewImports.cshtml (qui n’est pas dans le fichier Views/_ViewImports.cshtml par défaut) expose ces Tag Helpers uniquement aux affichages inclus dans le dossier Home.Any @addTagHelper directives you add to the Views/Home/_ViewImports.cshtml file (that are not in the default Views/_ViewImports.cshtml file) would expose those Tag Helpers to views only in the Home folder.

Refus d’éléments individuelsOpting out of individual elements

Vous pouvez désactiver un Tag Helper au niveau de l’élément à l’aide du caractère d’annulation de Tag Helper (« ! »).You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). Par exemple, la validation Email est désactivée dans <span> à l’aide du caractère d’annulation de Tag Helper :For example, Email validation is disabled in the <span> with the Tag Helper opt-out character:

<!span asp-validation-for="Email" class="text-danger"></!span>

Vous devez appliquer le caractère d’annulation de Tag Helper à la balise d’ouverture et de fermeture.You must apply the Tag Helper opt-out character to the opening and closing tag. (L’éditeur Visual Studio ajoute automatiquement le caractère d’annulation à la balise de fermeture quand vous en ajoutez un à la balise d’ouverture).(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). Après avoir ajouté le caractère d’annulation, l’élément et les attributs du Tag Helper ne s’affichent plus dans une police caractéristique.After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

Utilisation de @tagHelperPrefix pour rendre l’utilisation du Tag Helper expliciteUsing @tagHelperPrefix to make Tag Helper usage explicit

La directive @tagHelperPrefix vous permet de spécifier une chaîne de préfixe de balise pour activer la prise en charge des Tag Helpers et rendre leur utilisation explicite.The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. Par exemple, vous pouvez ajouter le balisage suivant au fichier Views/_ViewImports.cshtml :For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

Dans l’image de code ci-dessous, le préfixe du Tag Helper a la valeur th:, si bien que seuls les éléments qui utilisent le préfixe th: prennent en charge les Tag Helpers (les éléments activés pour les Tag Helpers ont une police caractéristique).In the code image below, the Tag Helper prefix is set to th:, so only those elements using the prefix th: support Tag Helpers (Tag Helper-enabled elements have a distinctive font). Les éléments <label> et <input> ont le préfixe du Tag Helper et sont activés, à la différence de l’élément <span>.The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element doesn't.

image

Les mêmes règles de hiérarchie qui s’appliquent à @addTagHelper s’appliquent aussi à @tagHelperPrefix.The same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

Prise en charge IntelliSense des Tag HelpersIntelliSense support for Tag Helpers

Lorsque vous créez une application web ASP.NET dans Visual Studio, le package NuGet « Microsoft.AspNetCore.Razor.Tools » est ajouté.When you create a new ASP.NET web app in Visual Studio, it adds the NuGet package "Microsoft.AspNetCore.Razor.Tools". Il s’agit du package qui ajoute les outils de Tag Helper.This is the package that adds Tag Helper tooling.

Envisagez d’écrire un élément <label> HTML.Consider writing an HTML <label> element. Dès que vous entrez <l dans l’éditeur Visual Studio, IntelliSense affiche les éléments correspondants :As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

image

Non seulement vous obtenez l’aide HTML, mais aussi l’icône (le « @" symbol with "<> » en dessous).Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).

image

Identifie l’élément comme étant ciblé par les Tag Helpers.identifies the element as targeted by Tag Helpers. Les éléments HTML purs (comme fieldset) présentent l’icône « <> ».Pure HTML elements (such as the fieldset) display the "<>" icon.

Une balise <label> HTML pure affiche la balise HTML (avec le thème de couleur Visual Studio par défaut) dans une police marron, les attributs en rouge et les valeurs d’attribut en bleu.A pure HTML <label> tag displays the HTML tag (with the default Visual Studio color theme) in a brown font, the attributes in red, and the attribute values in blue.

image

Après avoir entré <label, IntelliSense répertorie les attributs HTML/CSS disponibles et les attributs ciblés par les Tag Helpers :After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:

image

La saisie semi-automatique des instructions par IntelliSense vous permet d’appuyer sur la touche Tab pour compléter automatiquement l’instruction avec la valeur sélectionnée :IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:

image

Dès qu’un attribut de Tag Helper est entré, les polices de la balise et de l’attribut changent.As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. En utilisant le thème de couleur « Bleu » ou « Clair » par défaut de Visual Studio, la police est en violet gras.Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. Si vous utilisez le thème « Foncé », la police est en bleu-vert gras.If you're using the "Dark" theme the font is bold teal. Les images de ce document ont été prises à l’aide du thème par défaut.The images in this document were taken using the default theme.

image

Vous pouvez entrer le raccourci CompleteWord Visual Studio (Ctrl+Espace par défaut) à l’intérieur des guillemets doubles ("") pour passer en C#, de la même façon que dans une classe C#.You can enter the Visual Studio CompleteWord shortcut (Ctrl +spacebar is the default inside the double quotes (""), and you are now in C#, just like you would be in a C# class. IntelliSense affiche toutes les méthodes et propriétés dans le modèle de page.IntelliSense displays all the methods and properties on the page model. Les méthodes et propriétés sont disponibles car le type de propriété est ModelExpression.The methods and properties are available because the property type is ModelExpression. Dans l’image ci-dessous, je modifie l’affichage Register, donc RegisterViewModel est disponible.In the image below, I'm editing the Register view, so the RegisterViewModel is available.

image

IntelliSense répertorie les propriétés et méthodes disponibles pour le modèle dans la page.IntelliSense lists the properties and methods available to the model on the page. Le riche environnement IntelliSense vous aide à sélectionner la classe CSS :The rich IntelliSense environment helps you select the CSS class:

image

image

Comparaison des Tag Helpers aux HTML HelpersTag Helpers compared to HTML Helpers

Les Tag Helpers s’attachent aux éléments HTML dans les affichages Razor, tandis que les HTML Helpers sont appelés comme des méthodes parsemées dans le code HTML dans les affichages Razor.Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. Examinez le balisage Razor suivant, qui crée une étiquette HTML avec la classe CSS « caption » :Consider the following Razor markup, which creates an HTML label with the CSS class "caption":

@Html.Label("FirstName", "First Name:", new {@class="caption"})

L’arobase (@) signale le début du code à Razor.The at (@) symbol tells Razor this is the start of code. Les deux paramètres suivants (« FirstName » et « First Name: ») sont des chaînes, par conséquent, IntelliSense ne sert à rien.The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. Le dernier argument :The last argument:

new {@class="caption"}

Est un objet anonyme utilisé pour représenter des attributs.Is an anonymous object used to represent attributes. Étant donné que class est un mot clé réservé en C#, vous utilisez le symbole @ pour forcer le code C# à interpréter « @class= » comme un symbole (nom de propriété).Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret "@class=" as a symbol (property name). Pour un concepteur frontal (une personne qui connaît bien le code HTML, CSS et JavaScript et d’autres technologies clientes, mais qui ne connaît pas C# et Razor), la majorité de la ligne est étrangère.To a front-end designer (someone familiar with HTML/CSS/JavaScript and other client technologies but not familiar with C# and Razor), most of the line is foreign. La ligne entière doit être créée sans l’aide d’IntelliSense.The entire line must be authored with no help from IntelliSense.

Avec LabelTagHelper, le même balisage peut s’écrire ainsi :Using the LabelTagHelper, the same markup can be written as:

image

Avec la version Tag Helper, dès que vous entrez <l dans l’éditeur Visual Studio, IntelliSense affiche les éléments correspondants :With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:

image

IntelliSense vous aide à écrire la ligne entière.IntelliSense helps you write the entire line. LabelTagHelper définit aussi par défaut le contenu de la valeur d’attribut asp-for (« FirstName ») sur « First Name » ; les propriétés en casse mixte sont converties en une phrase composée du nom de la propriété avec un espace là où se trouve chaque nouvelle lettre majuscule.The LabelTagHelper also defaults to setting the content of the asp-for attribute value ("FirstName") to "First Name"; It converts camel-cased properties to a sentence composed of the property name with a space where each new upper-case letter occurs. Dans le balisage suivant :In the following markup:

image

Génère :generates:

<label class="caption" for="FirstName">First Name</label>

Le contenu qui passe d’une casse mixte à une majuscule en début de phrase n’est pas utilisé si vous ajoutez du contenu à <label>.The camel-cased to sentence-cased content isn't used if you add content to the <label>. Exemple :For example:

image

Génère :generates:

<label class="caption" for="FirstName">Name First</label>

L’image de code suivante montre la partie formulaire de l’affichage Razor Views/Account/Register.cshtml généré à partir du modèle ASP.NET 4.5.x MVC inclus dans Visual Studio 2015.The following code image shows the Form portion of the Views/Account/Register.cshtml Razor view generated from the legacy ASP.NET 4.5.x MVC template included with Visual Studio 2015.

image

L’éditeur Visual Studio présente le code C# avec un arrière-plan gris.The Visual Studio editor displays C# code with a grey background. Par exemple, le HTML Helper AntiForgeryToken :For example, the AntiForgeryToken HTML Helper:

@Html.AntiForgeryToken()

est présenté avec un arrière-plan gris.is displayed with a grey background. La plupart du balisage dans l’affichage Register est en C#.Most of the markup in the Register view is C#. Comparez-le à l’approche équivalente qui utilise des Tag Helpers :Compare that to the equivalent approach using Tag Helpers:

image

Le balisage est beaucoup plus claire et facile à lire, modifier et gérer qu’avec l’approche des HTML Helpers.The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. Le code C# est réduit au minimum que le serveur doit savoir.The C# code is reduced to the minimum that the server needs to know about. L’éditeur Visual Studio présente le balisage ciblé par un Tag Helper dans une police caractéristique.The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

Examinez le groupe Email :Consider the Email group:

<div class="form-group">
    <label asp-for="Email" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
</div>

Chacun des attributs « asp- » a la valeur « Email », mais « Email » n’est pas une chaîne.Each of the "asp-" attributes has a value of "Email", but "Email" isn't a string. Dans ce contexte, « Email » est la propriété de l’expression du modèle C# pour RegisterViewModel.In this context, "Email" is the C# model expression property for the RegisterViewModel.

L’éditeur Visual Studio vous aide à écrire tout le balisage dans l’approche Tag Helpers du formulaire d’inscription, tandis que Visual Studio ne fournit aucune aide pour la plupart du code dans l’approche HTML Helpers.The Visual Studio editor helps you write all of the markup in the Tag Helper approach of the register form, while Visual Studio provides no help for most of the code in the HTML Helpers approach. Prise en charge IntelliSense des Tag Helpers décrit précisément l’utilisation de Tag Helpers dans l’éditeur Visual Studio.IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

Comparaison des Tag Helpers aux contrôles de serveur webTag Helpers compared to Web Server Controls

  • Les Tag Helpers ne sont pas propriétaires de l’élément auquel ils sont associés ; ils participent simplement au rendu de l’élément et du contenu.Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. Les contrôles de serveur web ASP.NET sont déclarés et appelés dans une page.ASP.NET Web Server controls are declared and invoked on a page.

  • Les contrôles de serveur web ont un cycle de vie non trivial qui peut rendre le développement et le débogage difficiles.Web Server controls have a non-trivial lifecycle that can make developing and debugging difficult.

  • Les contrôles de serveur web vous permettent d’ajouter des fonctionnalités aux éléments DOM (Document Object Model) à l’aide d’un contrôle client.Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. Les Tag Helpers n’ont pas de DOM.Tag Helpers have no DOM.

  • Les contrôles de serveur web incluent une détection automatique du navigateur.Web Server controls include automatic browser detection. Les Tag Helpers n’ont pas connaissance du navigateur.Tag Helpers have no knowledge of the browser.

  • Plusieurs Tag Helpers peuvent agir sur le même élément (consultez Éviter les conflits de Tag Helpers) alors que généralement vous ne pouvez pas composer des contrôles de serveur web.Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • Les Tag Helpers peuvent modifier la balise et le contenu des éléments HTML auxquels ils s’étendent, mais pas modifier directement quoi que ce soit d’autre dans une page.Tag Helpers can modify the tag and content of HTML elements that they're scoped to, but don't directly modify anything else on a page. Les contrôles de serveur web ont une étendue moins spécifique et peuvent effectuer des actions qui affectent d’autres parties de votre page, ce qui peut entraîner des effets secondaires involontaires.Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • Les contrôles de serveur web utilisent des convertisseurs de type pour convertir les chaînes en objets.Web Server controls use type converters to convert strings into objects. Avec les Tag Helpers, vous travaillez en mode natif en C#, donc vous n’avez pas besoin d’effectuer de conversions de type.With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • Les contrôles de serveur web utilisent System.ComponentModel pour implémenter le comportement au moment de l’exécution et au moment du design des composants et des contrôles.Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel inclut les classes et les interfaces de base servant à l’implémentation des attributs et des convertisseurs de type, à la liaison à des sources de données et à la gestion des licences des composants.System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. Comparez-les aux Tag Helpers, qui sont généralement dérivés de TagHelper et à la classe de base TagHelper qui expose uniquement deux méthodes, Process et ProcessAsync.Contrast that to Tag Helpers, which typically derive from TagHelper, and the TagHelper base class exposes only two methods, Process and ProcessAsync.

Personnalisation de la police des éléments Tag HelperCustomizing the Tag Helper element font

Vous pouvez personnaliser la police et les couleurs depuis Outils > Options > Environnement > Polices et couleurs :You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors:

image

Ressources supplémentairesAdditional resources