Tag Helpers dans les formulaires dans ASP.NET CoreTag Helpers in forms in ASP.NET Core

Par Rick Anderson, N. Taylor Mullen, Dave Paquette et Jerrie PelserBy Rick Anderson, N. Taylor Mullen, Dave Paquette, and Jerrie Pelser

Ce document montre comment utiliser les formulaires, ainsi que les éléments HTML couramment utilisés dans un formulaire.This document demonstrates working with Forms and the HTML elements commonly used on a Form. L’élément HTML Form fournit le principal mécanisme utilisé par les applications web pour publier des données sur le serveur.The HTML Form element provides the primary mechanism web apps use to post back data to the server. La majeure partie de ce document décrit les Tag Helpers et explique comment ils peuvent vous aider à créer des formulaires HTML robustes.Most of this document describes Tag Helpers and how they can help you productively create robust HTML forms. Nous vous recommandons de lire Introduction aux Tag Helpers avant de lire ce document.We recommend you read Introduction to Tag Helpers before you read this document.

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. Quand une alternative HTML Helper existe, elle est mentionnée.When an HTML Helper alternative exists, it's mentioned.

Tag Helper FormThe Form Tag Helper

Le Tag Helper Form :The Form Tag Helper:

  • Génère pour la balise HTML <FORM> la valeur de l’attribut action d’un routage nommé ou d’une action de contrôleur MVCGenerates the HTML <FORM> action attribute value for a MVC controller action or named route

  • Génère un jeton de vérification de requête masqué pour empêcher la falsification de requête intersites (quand il est utilisé avec l’attribut [ValidateAntiForgeryToken] dans la méthode d’action HTTP Post)Generates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method)

  • Fournit l’attribut asp-route-<Parameter Name>, où <Parameter Name> est ajouté aux valeurs de routage.Provides the asp-route-<Parameter Name> attribute, where <Parameter Name> is added to the route values. Les paramètres routeValues de Html.BeginForm et Html.BeginRouteForm fournissent des fonctionnalités similaires.The routeValues parameters to Html.BeginForm and Html.BeginRouteForm provide similar functionality.

  • Comporte une alternative HTML Helper avec Html.BeginForm et Html.BeginRouteFormHas an HTML Helper alternative Html.BeginForm and Html.BeginRouteForm

Aperçu :Sample:

<form asp-controller="Demo" asp-action="Register" method="post">
    <!-- Input and Submit elements -->
</form>

Le Tag Helper Form ci-dessus génère le code HTML suivant :The Form Tag Helper above generates the following HTML:

<form method="post" action="/Demo/Register">
    <!-- Input and Submit elements -->
    <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>

Le runtime MVC génère la valeur de l’attribut action à partir des attributs asp-controller et asp-action du Tag Helper Form.The MVC runtime generates the action attribute value from the Form Tag Helper attributes asp-controller and asp-action. Le Tag Helper Form génère également un jeton de vérification de requête masqué pour empêcher la falsification de requête intersites (quand il est utilisé avec l’attribut [ValidateAntiForgeryToken] dans la méthode d’action HTTP Post).The Form Tag Helper also generates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method). Il est difficile de protéger un formulaire HTML contre une falsification de requête intersites. Le Tag Helper Form se charge de fournir ce service à votre place.Protecting a pure HTML Form from cross-site request forgery is difficult, the Form Tag Helper provides this service for you.

Utilisation d’un routage nomméUsing a named route

L’attribut Tag Helper asp-route peut également générer des balises pour l’attribut HTML action.The asp-route Tag Helper attribute can also generate markup for the HTML action attribute. Une application avec un routage nommé register peut utiliser les balises suivantes pour la page d’inscription :An app with a route named register could use the following markup for the registration page:

<form asp-route="register" method="post">
    <!-- Input and Submit elements -->
</form>

Un bon nombre des vues du dossier Vues/Compte (généré quand vous créez une application web avec des comptes d’utilisateurs individuels) contiennent l’attribut asp-route-returnurl :Many of the views in the Views/Account folder (generated when you create a new web app with Individual User Accounts) contain the asp-route-returnurl attribute:

<form asp-controller="Account" asp-action="Login"
     asp-route-returnurl="@ViewData["ReturnUrl"]"
     method="post" class="form-horizontal" role="form">

Notes

Avec les modèles intégrés, returnUrl est uniquement rempli automatiquement quand vous essayez d’accéder à une ressource autorisée sans l’authentification ou l’autorisation nécessaire.With the built in templates, returnUrl is only populated automatically when you try to access an authorized resource but are not authenticated or authorized. Quand vous tentez d’effectuer un accès non autorisé, l’intergiciel (middleware) de sécurité vous redirige vers la page de connexion avec le returnUrl défini.When you attempt an unauthorized access, the security middleware redirects you to the login page with the returnUrl set.

Le Tag Helper Form ActionThe Form Action Tag Helper

Le Tag Helper Form Action génère l’attribut formaction sur la balise <button ...> ou <input type="image" ...> générée.The Form Action Tag Helper generates the formaction attribute on the generated <button ...> or <input type="image" ...> tag. L’attribut formaction détermine où un formulaire envoie ses données.The formaction attribute controls where a form submits its data. Il se lie aux éléments <input> de type image et aux éléments <button>.It binds to <input> elements of type image and <button> elements. Le Tag Helper Form Action permet l’utilisation de plusieurs attributs AnchorTagHelper asp- pour contrôler quel lien formaction est généré pour l’élément correspondant.The Form Action Tag Helper enables the usage of several AnchorTagHelper asp- attributes to control what formaction link is generated for the corresponding element.

Attributs AnchorTagHelper pris en charge pour contrôler la valeur de formaction :Supported AnchorTagHelper attributes to control the value of formaction:

AttributAttribute DescriptionDescription
asp-controllerasp-controller Nom du contrôleur.The name of the controller.
asp-actionasp-action Nom de la méthode d’action.The name of the action method.
asp-areaasp-area Nom de la zone.The name of the area.
asp-pageasp-page Nom de la page Razor.The name of the Razor page.
asp-page-handlerasp-page-handler Nom du gestionnaire de la page Razor.The name of the Razor page handler.
asp-routeasp-route Nom de l’itinéraire.The name of the route.
asp-route-{value}asp-route-{value} Valeur de routage d’URL unique.A single URL route value. Par exemple, asp-route-id="1234".For example, asp-route-id="1234".
asp-all-route-dataasp-all-route-data Toutes les valeurs d’itinéraire.All route values.
asp-fragmentasp-fragment Fragment d’URL.The URL fragment.

Exemple d’envoi au contrôleurSubmit to controller example

Le balisage suivant envoie le formulaire à l’action Index de HomeController lorsque input ou button est sélectionnée :The following markup submits the form to the Index action of HomeController when the input or button are selected:

<form method="post">
    <button asp-controller="Home" asp-action="Index">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-controller="Home" 
                                asp-action="Index">
</form>

Le balisage précédent génère le code HTML suivant :The previous markup generates following HTML:

<form method="post">
    <button formaction="/Home">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home">
</form>

Exemple d’envoi à la pageSubmit to page example

Le balisage suivant envoie le formulaire à Razor Page About :The following markup submits the form to the About Razor Page:

<form method="post">
    <button asp-page="About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-page="About">
</form>

Le balisage précédent génère le code HTML suivant :The previous markup generates following HTML:

<form method="post">
    <button formaction="/About">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/About">
</form>

Exemple d’envoi à l’itinéraireSubmit to route example

Prenez le point de terminaison /Home/Test :Consider the /Home/Test endpoint:

public class HomeController : Controller
{
    [Route("/Home/Test", Name = "Custom")]
    public string Test()
    {
        return "This is the test page";
    }
}

Le balisage suivant envoie le formulaire au point de terminaison /Home/Test.The following markup submits the form to the /Home/Test endpoint.

<form method="post">
    <button asp-route="Custom">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" asp-route="Custom">
</form>

Le balisage précédent génère le code HTML suivant :The previous markup generates following HTML:

<form method="post">
    <button formaction="/Home/Test">Click Me</button>
    <input type="image" src="..." alt="Or Click Me" formaction="/Home/Test">
</form>

Tag Helper InputThe Input Tag Helper

Le Tag Helper Input lie un élément HTML <input> à une expression de modèle dans votre vue Razor.The Input Tag Helper binds an HTML <input> element to a model expression in your razor view.

Syntaxe :Syntax:

<input asp-for="<Expression Name>">

Tag Helper Input :The Input Tag Helper:

  • Génère les attributs HTML id et name pour le nom d’expression spécifié dans l’attribut asp-for.Generates the id and name HTML attributes for the expression name specified in the asp-for attribute. asp-for="Property1.Property2" équivaut à m => m.Property1.Property2.asp-for="Property1.Property2" is equivalent to m => m.Property1.Property2. Nom de l’expression utilisée pour la valeur de l’attribut asp-for.The name of the expression is what is used for the asp-for attribute value. Pour plus d’informations, consultez la section Noms d’expressions.See the Expression names section for additional information.

  • Définit la valeur de l’attribut HTML type en fonction du type de modèle et des attributs d’annotation de données appliqués à la propriété de modèleSets the HTML type attribute value based on the model type and data annotation attributes applied to the model property

  • Ne remplace pas la valeur de l’attribut HTML type quand une valeur est spécifiéeWon't overwrite the HTML type attribute value when one is specified

  • Génère des attributs de validation HTML5 à partir des attributs d’annotation de données appliqués aux propriétés de modèleGenerates HTML5 validation attributes from data annotation attributes applied to model properties

  • Chevauche des fonctionnalités HTML Helper avec Html.TextBoxFor et Html.EditorFor.Has an HTML Helper feature overlap with Html.TextBoxFor and Html.EditorFor. Pour plus d’informations, consultez la section Alternatives HTML Helper au Tag Helper Input.See the HTML Helper alternatives to Input Tag Helper section for details.

  • Fournit un typage fort.Provides strong typing. Si le nom de la propriété change et si vous ne mettez pas à jour le Tag Helper, vous obtenez une erreur similaire à celle-ci :If the name of the property changes and you don't update the Tag Helper you'll get an error similar to the following:

An error occurred during the compilation of a resource required to process
this request. Please review the following specific error details and modify
your source code appropriately.

Type expected
 'RegisterViewModel' does not contain a definition for 'Email' and no
 extension method 'Email' accepting a first argument of type 'RegisterViewModel'
 could be found (are you missing a using directive or an assembly reference?)

Le Tag Helper Input définit l’attribut HTML type en fonction du type .NET.The Input Tag Helper sets the HTML type attribute based on the .NET type. Le tableau suivant liste certains types .NET usuels et le type HTML généré (tous les types .NET ne sont pas listés).The following table lists some common .NET types and generated HTML type (not every .NET type is listed).

Type .NET.NET type Type d’entréeInput Type
BoolBool type="checkbox"type="checkbox"
ChaîneString type="text"type="text"
DateTimeDateTime type="datetime-local"type="datetime-local"
ByteByte type="number"type="number"
IntInt type="number"type="number"
Single, DoubleSingle, Double type="number"type="number"

Le tableau suivant présente des attributs d’annotations de données usuels que le Tag Helper Input mappe à des types d’entrée spécifiques (tous les attributs de validation ne sont pas listés) :The following table shows some common data annotations attributes that the input tag helper will map to specific input types (not every validation attribute is listed):

AttributAttribute Type d’entréeInput Type
[EmailAddress][EmailAddress] type="email"type="email"
[Url][Url] type="url"type="url"
[HiddenInput][HiddenInput] type="hidden"type="hidden"
[Phone][Phone] type="tel"type="tel"
[DataType(DataType.Password)][DataType(DataType.Password)] type="password"type="password"
[DataType(DataType.Date)][DataType(DataType.Date)] type="date"type="date"
[DataType(DataType.Time)][DataType(DataType.Time)] type="time"type="time"

Aperçu :Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterInput" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Register</button>
</form>

Le code ci-dessus génère le code HTML suivant :The code above generates the following HTML:

  <form method="post" action="/Demo/RegisterInput">
      Email:
      <input type="email" data-val="true"
             data-val-email="The Email Address field is not a valid email address."
             data-val-required="The Email Address field is required."
             id="Email" name="Email" value=""><br>
      Password:
      <input type="password" data-val="true"
             data-val-required="The Password field is required."
             id="Password" name="Password"><br>
      <button type="submit">Register</button>
      <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
   </form>

Les annotations de données appliquées aux propriétés Email et Password génèrent des métadonnées pour le modèle.The data annotations applied to the Email and Password properties generate metadata on the model. Le Tag Helper Input consomme les métadonnées du modèle et génère les attributs HTML5 data-val-* (consultez Validation de modèle).The Input Tag Helper consumes the model metadata and produces HTML5 data-val-* attributes (see Model Validation). Ces attributs décrivent les validateurs à attacher aux champs d’entrée.These attributes describe the validators to attach to the input fields. Cela permet d’effectuer une validation HTML5 et jQuery discrète.This provides unobtrusive HTML5 and jQuery validation. Les attributs discrets ont le format data-val-rule="Error Message", où rule est le nom de la règle de validation (par exemple data-val-required, data-val-email, data-val-maxlength, etc.) Si un message d’erreur est fourni dans l’attribut, il est affiché en tant que valeur de l’attribut data-val-rule.The unobtrusive attributes have the format data-val-rule="Error Message", where rule is the name of the validation rule (such as data-val-required, data-val-email, data-val-maxlength, etc.) If an error message is provided in the attribute, it's displayed as the value for the data-val-rule attribute. Il existe également des attributs ayant la forme data-val-ruleName-argumentName="argumentValue" et qui fournissent des détails supplémentaires sur la règle, par exemple data-val-maxlength-max="1024".There are also attributes of the form data-val-ruleName-argumentName="argumentValue" that provide additional details about the rule, for example, data-val-maxlength-max="1024" .

Alternatives HTML Helper au Tag Helper InputHTML Helper alternatives to Input Tag Helper

Html.TextBox, Html.TextBoxFor, Html.Editor et Html.EditorFor ont des fonctionnalités qui chevauchent celles du Tag Helper Input.Html.TextBox, Html.TextBoxFor, Html.Editor and Html.EditorFor have overlapping features with the Input Tag Helper. Le Tag Helper Input définit automatiquement l’attribut type, contrairement à Html.TextBox et Html.TextBoxFor.The Input Tag Helper will automatically set the type attribute; Html.TextBox and Html.TextBoxFor won't. Html.Editor et Html.EditorFor gèrent les collections, les objets complexes et les modèles, contrairement au Tag Helper Input.Html.Editor and Html.EditorFor handle collections, complex objects and templates; the Input Tag Helper doesn't. Le Tag Helper Input, Html.EditorFor et Html.TextBoxFor sont fortement typés (ils utilisent des expressions lambda), contrairement à Html.TextBox et Html.Editor (qui utilisent des noms d’expressions).The Input Tag Helper, Html.EditorFor and Html.TextBoxFor are strongly typed (they use lambda expressions); Html.TextBox and Html.Editor are not (they use expression names).

HtmlAttributesHtmlAttributes

@Html.Editor() et @Html.EditorFor() utilisent une entrée ViewDataDictionary spéciale nommée htmlAttributes durant l’exécution de leurs modèles par défaut.@Html.Editor() and @Html.EditorFor() use a special ViewDataDictionary entry named htmlAttributes when executing their default templates. Ce comportement est éventuellement amélioré à l’aide des paramètres additionalViewData.This behavior is optionally augmented using additionalViewData parameters. La clé « htmlAttributes » ne respecte pas la casse.The key "htmlAttributes" is case-insensitive. La clé « htmlAttributes » est prise en charge de manière similaire à l’objet htmlAttributes passé aux Helpers d’entrée tels que @Html.TextBox().The key "htmlAttributes" is handled similarly to the htmlAttributes object passed to input helpers like @Html.TextBox().

@Html.EditorFor(model => model.YourProperty, 
  new { htmlAttributes = new { @class="myCssClass", style="Width:100px" } })

Noms d’expressionsExpression names

La valeur de l’attribut asp-for est un ModelExpression et correspond au côté droit d’une expression lambda.The asp-for attribute value is a ModelExpression and the right hand side of a lambda expression. Ainsi, asp-for="Property1" devient m => m.Property1 dans le code généré, ce qui explique pourquoi vous n’avez pas besoin de le faire commencer par Model.Therefore, asp-for="Property1" becomes m => m.Property1 in the generated code which is why you don't need to prefix with Model. Vous pouvez utiliser le caractère « @ » pour débuter une expression inline avant m. :You can use the "@" character to start an inline expression and move before the m.:

@{
       var joe = "Joe";
   }
   <input asp-for="@joe">

Génère ce qui suit :Generates the following:

<input type="text" id="joe" name="joe" value="Joe">

Avec les propriétés de collection, asp-for="CollectionProperty[23].Member" génère le même nom que asp-for="CollectionProperty[i].Member" quand i a la valeur 23.With collection properties, asp-for="CollectionProperty[23].Member" generates the same name as asp-for="CollectionProperty[i].Member" when i has the value 23.

Quand ASP.NET Core MVC calcule la valeur de ModelExpression, plusieurs sources sont inspectées, notamment ModelState.When ASP.NET Core MVC calculates the value of ModelExpression, it inspects several sources, including ModelState. Prenez le cas de <input type="text" asp-for="@Name">.Consider <input type="text" asp-for="@Name">. L’attribut value calculé est la première valeur non-null des éléments suivants :The calculated value attribute is the first non-null value from:

  • Entrée ModelState avec la clé « Name ».ModelState entry with key "Name".
  • Résultat de l’expression Model.Name.Result of the expression Model.Name.

Vous pouvez également accéder aux propriétés enfants à l’aide du chemin de propriété du modèle de vue.You can also navigate to child properties using the property path of the view model. Prenons le cas d’une classe de modèle plus complexe qui contient une propriété enfant Address.Consider a more complex model class that contains a child Address property.

public class AddressViewModel
{
    public string AddressLine1 { get; set; }
}
public class RegisterAddressViewModel
{
    public string Email { get; set; }

    [DataType(DataType.Password)]
    public string Password { get; set; }

    public AddressViewModel Address { get; set; }
}

Dans la vue, nous effectuons une liaison à Address.AddressLine1 :In the view, we bind to Address.AddressLine1:

@model RegisterAddressViewModel

<form asp-controller="Demo" asp-action="RegisterAddress" method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    Address: <input asp-for="Address.AddressLine1" /><br />
    <button type="submit">Register</button>
</form>

Le code HTML suivant est généré pour Address.AddressLine1 :The following HTML is generated for Address.AddressLine1:

<input type="text" id="Address_AddressLine1" name="Address.AddressLine1" value="">

Noms d’expressions et collectionsExpression names and Collections

Dans cet exemple, un modèle contient un tableau de Colors :Sample, a model containing an array of Colors:

public class Person
{
    public List<string> Colors { get; set; }

    public int Age { get; set; }
}

Méthode d’action :The action method:

public IActionResult Edit(int id, int colorIndex)
   {
       ViewData["Index"] = colorIndex;
       return View(GetPerson(id));
   }

Le code Razor suivant montre comment accéder à un élément Color spécifique :The following Razor shows how you access a specific Color element:

@model Person
@{
    var index = (int)ViewData["index"];
}

<form asp-controller="ToDo" asp-action="Edit" method="post">
    @Html.EditorFor(m => m.Colors[index])
    <label asp-for="Age"></label>
    <input asp-for="Age" /><br />
    <button type="submit">Post</button>
</form>

Modèle Views/Shared/EditorTemplates/String.cshtml :The Views/Shared/EditorTemplates/String.cshtml template:

@model string

<label asp-for="@Model"></label>
<input asp-for="@Model" /> <br />

Exemple utilisant List<T> :Sample using List<T>:

public class ToDoItem
{
    public string Name { get; set; }

    public bool IsDone { get; set; }
}

Le code Razor suivant montre comment effectuer une itération dans une collection :The following Razor shows how to iterate over a collection:

@model List<ToDoItem>

<form asp-controller="ToDo" asp-action="Edit" method="post">
    <table>
        <tr> <th>Name</th> <th>Is Done</th> </tr>

        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                @Html.EditorFor(model => model[i])
            </tr>
        }

    </table>
    <button type="submit">Save</button>
</form>

Modèle Views/Shared/EditorTemplates/ToDoItem.cshtml :The Views/Shared/EditorTemplates/ToDoItem.cshtml template:

@model ToDoItem

<td>
    <label asp-for="@Model.Name"></label>
    @Html.DisplayFor(model => model.Name)
</td>
<td>
    <input asp-for="@Model.IsDone" />
</td>

@*
    This template replaces the following Razor which evaluates the indexer three times.
    <td>
         <label asp-for="@Model[i].Name"></label>
         @Html.DisplayFor(model => model[i].Name)
     </td>
     <td>
         <input asp-for="@Model[i].IsDone" />
     </td>
*@

Utilisez si possible foreach quand la valeur doit être employée dans un contexte équivalent à asp-for ou Html.DisplayFor.foreach should be used if possible when the value is going to be used in an asp-for or Html.DisplayFor equivalent context. En règle générale, préférez for à foreach (si le scénario le permet), car il n’a pas besoin d’allouer un énumérateur. Toutefois, l’évaluation d’un indexeur dans une expression LINQ peut s’avérer coûteuse et doit être réduite.In general, for is better than foreach (if the scenario allows it) because it doesn't need to allocate an enumerator; however, evaluating an indexer in a LINQ expression can be expensive and should be minimized.

 

Notes

L’exemple de code commenté ci-dessus montre comment remplacer l’expression lambda par l’opérateur @ pour accéder à chaque ToDoItem dans la liste.The commented sample code above shows how you would replace the lambda expression with the @ operator to access each ToDoItem in the list.

Tag Helper TextareaThe Textarea Tag Helper

Le Tag Helper Textarea Tag Helper est similaire au Tag Helper Input.The Textarea Tag Helper tag helper is similar to the Input Tag Helper.

  • Génère les attributs id et name, ainsi que les attributs de validation des données du modèle pour un élément <textarea>.Generates the id and name attributes, and the data validation attributes from the model for a <textarea> element.

  • Fournit un typage fort.Provides strong typing.

  • Alternative HTML Helper : Html.TextAreaForHTML Helper alternative: Html.TextAreaFor

Aperçu :Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class DescriptionViewModel
    {
        [MinLength(5)]
        [MaxLength(1024)]
        public string Description { get; set; }
    }
}
@model DescriptionViewModel

<form asp-controller="Demo" asp-action="RegisterTextArea" method="post">
    <textarea asp-for="Description"></textarea>
    <button type="submit">Test</button>
</form>

Le code HTML suivant est généré :The following HTML is generated:

<form method="post" action="/Demo/RegisterTextArea">
  <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>
  <button type="submit">Test</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>

Tag Helper LabelThe Label Tag Helper

  • Génère la légende d’étiquette et l’attribut for d’un élément <label> pour un nom d’expressionGenerates the label caption and for attribute on a <label> element for an expression name

  • Alternative HTML Helper : Html.LabelFor.HTML Helper alternative: Html.LabelFor.

Le Label Tag Helper offre les avantages suivants sur un élément d’étiquette HTML pur :The Label Tag Helper provides the following benefits over a pure HTML label element:

  • Vous obtenez automatiquement la valeur d’étiquette descriptive à partir de l’attribut Display.You automatically get the descriptive label value from the Display attribute. Le nom d’affichage prévu peut changer plus tard. La combinaison de l’attribut Display et du Tag Helper Label applique Display partout où il est utilisé.The intended display name might change over time, and the combination of Display attribute and Label Tag Helper will apply the Display everywhere it's used.

  • Moins de balises dans le code sourceLess markup in source code

  • Typage fort avec la propriété de modèle.Strong typing with the model property.

Aperçu :Sample:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class SimpleViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }
    }
}

@model SimpleViewModel

<form asp-controller="Demo" asp-action="RegisterLabel" method="post">
    <label asp-for="Email"></label>
    <input asp-for="Email" /> <br />
</form>

Le code HTML suivant est généré pour l’élément <label> :The following HTML is generated for the <label> element:

<label for="Email">Email Address</label>

Le Tag Helper Label a généré la valeur « Email » pour l’attribut for, qui représente l’ID associé à l’élément <input>.The Label Tag Helper generated the for attribute value of "Email", which is the ID associated with the <input> element. Les Tag Helpers génèrent des éléments id et for cohérents pour qu’ils puissent être correctement associés.The Tag Helpers generate consistent id and for elements so they can be correctly associated. La légende de cet exemple provient de l’attribut Display.The caption in this sample comes from the Display attribute. Si le modèle ne contient pas d’attribut Display, la légende correspond au nom de propriété de l’expression.If the model didn't contain a Display attribute, the caption would be the property name of the expression.

Tag Helpers ValidationThe Validation Tag Helpers

Il existe deux Tag Helpers Validation.There are two Validation Tag Helpers. Le Validation Message Tag Helper (qui affiche un message de validation pour une seule propriété de votre modèle) et le Validation Summary Tag Helper (qui affiche un récapitulatif des erreurs de validation).The Validation Message Tag Helper (which displays a validation message for a single property on your model), and the Validation Summary Tag Helper (which displays a summary of validation errors). Le Input Tag Helper ajoute des attributs de validation HTML5 côté client aux éléments d’entrée en fonction des attributs d’annotation de données pour vos classes de modèle.The Input Tag Helper adds HTML5 client side validation attributes to input elements based on data annotation attributes on your model classes. La validation est également effectuée sur le serveur.Validation is also performed on the server. Le Tag Helper Validation affiche ces messages d’erreur quand une erreur de validation se produit.The Validation Tag Helper displays these error messages when a validation error occurs.

Le Tag Helper Validation MessageThe Validation Message Tag Helper

  • Ajoute l’attribut HTML5 data-valmsg-for="property" à l’élément span, qui attache les messages d’erreur de validation du champ d’entrée de la propriété de modèle spécifiée.Adds the HTML5 data-valmsg-for="property" attribute to the span element, which attaches the validation error messages on the input field of the specified model property. Quand une erreur de validation côté client se produit, jQuery affiche le message d’erreur dans l’élément <span>.When a client side validation error occurs, jQuery displays the error message in the <span> element.

  • La validation a également lieu sur le serveur.Validation also takes place on the server. Il arrive que JavaScript soit désactivé sur les clients et qu’une partie de la validation puisse être effectuée uniquement côté serveur.Clients may have JavaScript disabled and some validation can only be done on the server side.

  • Alternative HTML Helper : Html.ValidationMessageForHTML Helper alternative: Html.ValidationMessageFor

Le Validation Message Tag Helper est utilisé avec l’attribut asp-validation-for sur un élément HTML span.The Validation Message Tag Helper is used with the asp-validation-for attribute on a HTML span element.

<span asp-validation-for="Email"></span>

Le Tag Helper Validation Message génère le code HTML suivant :The Validation Message Tag Helper will generate the following HTML:

<span class="field-validation-valid"
  data-valmsg-for="Email"
  data-valmsg-replace="true"></span>

En règle générale, vous utilisez le Validation Message Tag Helper après un Tag Helper Input pour la même propriété.You generally use the Validation Message Tag Helper after an Input Tag Helper for the same property. Dans ce cas, les messages d’erreur de validation s’affichent près de l’entrée qui a provoqué l’erreur.Doing so displays any validation error messages near the input that caused the error.

Notes

Vous devez avoir une vue avec les références de script JavaScript et jQuery appropriées pour la validation côté client.You must have a view with the correct JavaScript and jQuery script references in place for client side validation. Pour plus d’informations, consultez Validation de modèle.See Model Validation for more information.

Quand une erreur de validation côté serveur se produit (par exemple, quand vous disposez d’une validation personnalisée côté serveur ou quand la validation côté client est désactivée), MVC place ce message d’erreur dans le corps de l’élément <span>.When a server side validation error occurs (for example when you have custom server side validation or client-side validation is disabled), MVC places that error message as the body of the <span> element.

<span class="field-validation-error" data-valmsg-for="Email"
            data-valmsg-replace="true">
   The Email Address field is required.
</span>

Le Tag Helper Validation SummaryThe Validation Summary Tag Helper

  • Cible les éléments <div> avec les attributs asp-validation-summaryTargets <div> elements with the asp-validation-summary attribute

  • Alternative HTML Helper : @Html.ValidationSummaryHTML Helper alternative: @Html.ValidationSummary

Le Validation Summary Tag Helper est utilisé pour afficher un récapitulatif des messages de validation.The Validation Summary Tag Helper is used to display a summary of validation messages. La valeur de l’attribut asp-validation-summary peut correspondre à l’une des valeurs suivantes :The asp-validation-summary attribute value can be any of the following:

asp-validation-summaryasp-validation-summary Messages de validation affichésValidation messages displayed
ValidationSummary.AllValidationSummary.All Niveau de la propriété et du modèleProperty and model level
ValidationSummary.ModelOnlyValidationSummary.ModelOnly ModèleModel
ValidationSummary.NoneValidationSummary.None Aucun.None

ExempleSample

Dans l’exemple suivant, le modèle de données est décoré avec les attributs DataAnnotation, ce qui génère des messages d’erreur de validation pour l’élément <input>.In the following example, the data model is decorated with DataAnnotation attributes, which generates validation error messages on the <input> element. Quand une erreur de validation se produit, le Tag Helper Validation affiche le message d’erreur :When a validation error occurs, the Validation Tag Helper displays the error message:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterValidation" method="post">
    <div asp-validation-summary="ModelOnly"></div>
    Email:  <input asp-for="Email" /> <br />
    <span asp-validation-for="Email"></span><br />
    Password: <input asp-for="Password" /><br />
    <span asp-validation-for="Password"></span><br />
    <button type="submit">Register</button>
</form>

Code HTML généré (quand le modèle est valide) :The generated HTML (when the model is valid):

<form action="/DemoReg/Register" method="post">
  <div class="validation-summary-valid" data-valmsg-summary="true">
  <ul><li style="display:none"></li></ul></div>
  Email:  <input name="Email" id="Email" type="email" value=""
   data-val-required="The Email field is required."
   data-val-email="The Email field is not a valid email address."
   data-val="true"><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Email"></span><br>
  Password: <input name="Password" id="Password" type="password"
   data-val-required="The Password field is required." data-val="true"><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Password"></span><br>
  <button type="submit">Register</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>

Tag Helper SelectThe Select Tag Helper

  • Génère l’élément select et les éléments option associés pour les propriétés de votre modèle.Generates select and associated option elements for properties of your model.

  • Comporte une alternative HTML Helper avec Html.DropDownListFor et Html.ListBoxForHas an HTML Helper alternative Html.DropDownListFor and Html.ListBoxFor

Le Select Tag Helper asp-for spécifie le nom de propriété de modèle de l’élément select, et asp-items spécifie les éléments option.The Select Tag Helper asp-for specifies the model property name for the select element and asp-items specifies the option elements. Par exemple :For example:

<select asp-for="Country" asp-items="Model.Countries"></select> 

Aperçu :Sample:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace FormsTagHelper.ViewModels
{
    public class CountryViewModel
    {
        public string Country { get; set; }

        public List<SelectListItem> Countries { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "MX", Text = "Mexico" },
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "US", Text = "USA"  },
        };
    }
}

La méthode Index initialise CountryViewModel, définit le pays sélectionné et le passe à la vue Index.The Index method initializes the CountryViewModel, sets the selected country and passes it to the Index view.

public IActionResult Index()
{
    var model = new CountryViewModel();
    model.Country = "CA";
    return View(model);
}

La méthode HTTP POST Index affiche la sélection :The HTTP POST Index method displays the selection:

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(CountryViewModel model)
{
    if (ModelState.IsValid)
    {
        var msg = model.Country + " selected";
        return RedirectToAction("IndexSuccess", new { message = msg });
    }

    // If we got this far, something failed; redisplay form.
    return View(model);
}

Vue Index :The Index view:

@model CountryViewModel

<form asp-controller="Home" asp-action="Index" method="post">
    <select asp-for="Country" asp-items="Model.Countries"></select> 
    <br /><button type="submit">Register</button>
</form>

Qui génère le code HTML suivant (avec « CA » sélectionné) :Which generates the following HTML (with "CA" selected):

<form method="post" action="/">
     <select id="Country" name="Country">
       <option value="MX">Mexico</option>
       <option selected="selected" value="CA">Canada</option>
       <option value="US">USA</option>
     </select>
       <br /><button type="submit">Register</button>
     <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
   </form>

Notes

Nous déconseillons d’utiliser ViewBag ou ViewData avec le Tag Helper Select.We don't recommend using ViewBag or ViewData with the Select Tag Helper. Un modèle de vue est plus robuste et, en général, moins problématique pour fournir des métadonnées MVC.A view model is more robust at providing MVC metadata and generally less problematic.

La valeur de l’attribut asp-for est un cas particulier et ne nécessite pas de préfixe Model, contrairement aux autres attributs du Tag Helper (par exemple asp-items)The asp-for attribute value is a special case and doesn't require a Model prefix, the other Tag Helper attributes do (such as asp-items)

<select asp-for="Country" asp-items="Model.Countries"></select> 

Liaison d’enumEnum binding

Il est souvent pratique d’utiliser <select> avec une propriété enum et de générer les éléments SelectListItem à partir des valeurs de enum.It's often convenient to use <select> with an enum property and generate the SelectListItem elements from the enum values.

Aperçu :Sample:

    public class CountryEnumViewModel
    {
        public CountryEnum EnumCountry { get; set; }
    }
}
using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public enum CountryEnum
    {
        [Display(Name = "United Mexican States")]
        Mexico,
        [Display(Name = "United States of America")]
        USA,
        Canada,
        France,
        Germany,
        Spain
    }
}

La méthode GetEnumSelectList génère un objet SelectList pour un enum.The GetEnumSelectList method generates a SelectList object for an enum.

@model CountryEnumViewModel

<form asp-controller="Home" asp-action="IndexEnum" method="post">
    <select asp-for="EnumCountry" 
            asp-items="Html.GetEnumSelectList<CountryEnum>()">
    </select> 
    <br /><button type="submit">Register</button>
</form>

Vous pouvez décorer votre liste d’énumérateurs avec l’attribut Display pour obtenir une IU plus riche :You can decorate your enumerator list with the Display attribute to get a richer UI:

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    public enum CountryEnum
    {
        [Display(Name = "United Mexican States")]
        Mexico,
        [Display(Name = "United States of America")]
        USA,
        Canada,
        France,
        Germany,
        Spain
    }
}

Le code HTML suivant est généré :The following HTML is generated:

  <form method="post" action="/Home/IndexEnum">
         <select data-val="true" data-val-required="The EnumCountry field is required."
                 id="EnumCountry" name="EnumCountry">
             <option value="0">United Mexican States</option>
             <option value="1">United States of America</option>
             <option value="2">Canada</option>
             <option value="3">France</option>
             <option value="4">Germany</option>
             <option selected="selected" value="5">Spain</option>
         </select>
         <br /><button type="submit">Register</button>
         <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
    </form>

Groupe d’optionsOption Group

L’élément HTML <optgroup> est généré quand le modèle de vue contient un ou plusieurs objets SelectListGroup.The HTML <optgroup> element is generated when the view model contains one or more SelectListGroup objects.

CountryViewModelGroup regroupe les éléments SelectListItem dans les groupes « North America » et « Europe » :The CountryViewModelGroup groups the SelectListItem elements into the "North America" and "Europe" groups:

public class CountryViewModelGroup
{
    public CountryViewModelGroup()
    {
        var NorthAmericaGroup = new SelectListGroup { Name = "North America" };
        var EuropeGroup = new SelectListGroup { Name = "Europe" };

        Countries = new List<SelectListItem>
        {
            new SelectListItem
            {
                Value = "MEX",
                Text = "Mexico",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "CAN",
                Text = "Canada",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "US",
                Text = "USA",
                Group = NorthAmericaGroup
            },
            new SelectListItem
            {
                Value = "FR",
                Text = "France",
                Group = EuropeGroup
            },
            new SelectListItem
            {
                Value = "ES",
                Text = "Spain",
                Group = EuropeGroup
            },
            new SelectListItem
            {
                Value = "DE",
                Text = "Germany",
                Group = EuropeGroup
            }
      };
    }

    public string Country { get; set; }

    public List<SelectListItem> Countries { get; }

Les deux groupes sont affichés ci-dessous :The two groups are shown below:

exemple de groupe d’options

Code HTML généré :The generated HTML:

 <form method="post" action="/Home/IndexGroup">
      <select id="Country" name="Country">
          <optgroup label="North America">
              <option value="MEX">Mexico</option>
              <option value="CAN">Canada</option>
              <option value="US">USA</option>
          </optgroup>
          <optgroup label="Europe">
              <option value="FR">France</option>
              <option value="ES">Spain</option>
              <option value="DE">Germany</option>
          </optgroup>
      </select>
      <br /><button type="submit">Register</button>
      <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
 </form>

Sélection multipleMultiple select

Le Tag Helper Select génère automatiquement l’attribut multiple = "multiple" si la propriété spécifiée dans l’attribut asp-for est IEnumerable.The Select Tag Helper will automatically generate the multiple = "multiple" attribute if the property specified in the asp-for attribute is an IEnumerable. Par exemple, le modèle suivant :For example, given the following model:

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace FormsTagHelper.ViewModels
{
    public class CountryViewModelIEnumerable
    {
        public IEnumerable<string> CountryCodes { get; set; }

        public List<SelectListItem> Countries { get; } = new List<SelectListItem>
        {
            new SelectListItem { Value = "MX", Text = "Mexico" },
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "US", Text = "USA"    },
            new SelectListItem { Value = "FR", Text = "France" },
            new SelectListItem { Value = "ES", Text = "Spain"  },
            new SelectListItem { Value = "DE", Text = "Germany"}
         };
    }
}

Avec la vue suivante :With the following view:

@model CountryViewModelIEnumerable

<form asp-controller="Home" asp-action="IndexMultiSelect" method="post">
    <select asp-for="CountryCodes" asp-items="Model.Countries"></select> 
    <br /><button type="submit">Register</button>
</form>

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

<form method="post" action="/Home/IndexMultiSelect">
    <select id="CountryCodes"
    multiple="multiple"
    name="CountryCodes"><option value="MX">Mexico</option>
<option value="CA">Canada</option>
<option value="US">USA</option>
<option value="FR">France</option>
<option value="ES">Spain</option>
<option value="DE">Germany</option>
</select>
    <br /><button type="submit">Register</button>
  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
</form>

Aucune sélectionNo selection

Si vous constatez que l’option « not specified » est utilisée dans plusieurs pages, vous pouvez créer un modèle pour éviter de répéter le code HTML :If you find yourself using the "not specified" option in multiple pages, you can create a template to eliminate repeating the HTML:

@model CountryViewModel

<form asp-controller="Home" asp-action="IndexEmpty" method="post">
    @Html.EditorForModel()
    <br /><button type="submit">Register</button>
</form>

Modèle Views/Shared/EditorTemplates/CountryViewModel.cshtml :The Views/Shared/EditorTemplates/CountryViewModel.cshtml template:

@model CountryViewModel

<select asp-for="Country" asp-items="Model.Countries">
    <option value="">--none--</option>
</select>

L’ajout d’éléments HTML <option> ne se limite pas au cas No selection.Adding HTML <option> elements isn't limited to the No selection case. Par exemple, la vue et la méthode d’action suivante génèrent du code HTML similaire au code ci-dessus :For example, the following view and action method will generate HTML similar to the code above:

public IActionResult IndexNone()
{
    var model = new CountryViewModel();
    model.Insert(0, new SelectListItem("<none>", ""));
    return View(model);
}
@model CountryViewModel

<form asp-controller="Home" asp-action="IndexEmpty" method="post">
    <select asp-for="Country">
        <option value="">&lt;none&gt;</option>
        <option value="MX">Mexico</option>
        <option value="CA">Canada</option>
        <option value="US">USA</option>
    </select> 
    <br /><button type="submit">Register</button>
</form>

L’élément <option> approprié est sélectionné (il contient l’attribut selected="selected") en fonction de la valeur actuelle de Country.The correct <option> element will be selected ( contain the selected="selected" attribute) depending on the current Country value.

public IActionResult IndexOption(int id)
{
    var model = new CountryViewModel();
    model.Country = "CA";
    return View(model);
}
 <form method="post" action="/Home/IndexEmpty">
      <select id="Country" name="Country">
          <option value="">&lt;none&gt;</option>
          <option value="MX">Mexico</option>
          <option value="CA" selected="selected">Canada</option>
          <option value="US">USA</option>
      </select>
      <br /><button type="submit">Register</button>
   <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>">
 </form>

Ressources supplémentairesAdditional resources