Helper tag nei moduli in ASP.NET CoreTag Helpers in forms in ASP.NET Core

Di Rick Anderson, N. Taylor Mullen, Dave Paquette e Jerrie PelserBy Rick Anderson, N. Taylor Mullen, Dave Paquette, and Jerrie Pelser

Questo documento illustra l'uso di helper tag Form e gli elementi HTML comunemente usati all'interno di questi.This document demonstrates working with Forms and the HTML elements commonly used on a Form. L'elemento Form del linguaggio HTML rappresenta il meccanismo principale usato dalle app Web per eseguire il postback di dati nel server.The HTML Form element provides the primary mechanism web apps use to post back data to the server. La maggior parte di questo documento descrive gli helper tag e spiega come questi consentono di creare moduli HTML solidi in modo produttivo.Most of this document describes Tag Helpers and how they can help you productively create robust HTML forms. Prima di leggere questo documento, è consigliabile leggere Introduzione agli helper tag.We recommend you read Introduction to Tag Helpers before you read this document.

In molti casi gli helper HTML offrono un approccio alternativo a un helper tag specifico, ma è importante tenere presente che gli helper tag non sostituiscono gli helper HTML e che non esiste un helper tag per ogni helper HTML.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. Se un'alternativa sotto forma di helper HTML esiste, viene citata.When an HTML Helper alternative exists, it's mentioned.

Helper tag FormThe Form Tag Helper

L'helper tag Form:The Form Tag Helper:

  • Genera il valore dell'attributo action di <FORM> HTML per un'azione del controller MVC o una route denominataGenerates the HTML <FORM> action attribute value for a MVC controller action or named route

  • Genera un token di verifica della richiesta nascosto per impedire richieste intersito false, in caso di uso con l'attributo [ValidateAntiForgeryToken] nel metodo azione HTTP PostGenerates a hidden Request Verification Token to prevent cross-site request forgery (when used with the [ValidateAntiForgeryToken] attribute in the HTTP Post action method)

  • Fornisce l'attributo asp-route-<Parameter Name>, dove <Parameter Name> viene aggiunto ai valori della route.Provides the asp-route-<Parameter Name> attribute, where <Parameter Name> is added to the route values. I parametri routeValues in Html.BeginForm e Html.BeginRouteForm forniscono una funzionalità simile.The routeValues parameters to Html.BeginForm and Html.BeginRouteForm provide similar functionality.

  • Ha come helper HTML alternativi Html.BeginForm e Html.BeginRouteFormHas an HTML Helper alternative Html.BeginForm and Html.BeginRouteForm

Esempio:Sample:

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

L'helper tag Form precedente genera il codice HTML seguente: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>

Il runtime MVC genera il valore dell'attributo action dagli attributi asp-controller e asp-action dell'helper tag Form.The MVC runtime generates the action attribute value from the Form Tag Helper attributes asp-controller and asp-action. L'helper tag Form genera anche un token di verifica della richiesta nascosto per impedire richieste intersito false, in caso di uso con l'attributo [ValidateAntiForgeryToken] nel metodo azione 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). La protezione di un Form HTML puro da richieste intersito false è difficile, e l'helper tag Form offre questo servizio.Protecting a pure HTML Form from cross-site request forgery is difficult, the Form Tag Helper provides this service for you.

Uso di una route denominataUsing a named route

L'attributo asp-route degli helper tag può anche generare un markup per l'attributo action HTML.The asp-route Tag Helper attribute can also generate markup for the HTML action attribute. Un'app con una route denominata register può usare il markup seguente per la pagina di registrazione: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>

Molte delle visualizzazioni nella cartella Views/Account (generata quando si crea una nuova app Web con account utente singoli) contengono l'attributo 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">

Nota

Con i modelli predefiniti, returnUrl viene popolato automaticamente solo quando si tenta di accedere a una risorsa autorizzata senza aver effettuato l'autenticazione o l'autorizzazione.With the built in templates, returnUrl is only populated automatically when you try to access an authorized resource but are not authenticated or authorized. Se l'utente tenta un accesso non autorizzato, il middleware di sicurezza lo reindirizza alla pagina di accesso con returnUrl impostato.When you attempt an unauthorized access, the security middleware redirects you to the login page with the returnUrl set.

Helper tag per l'azione moduloThe Form Action Tag Helper

L'helper tag per l'azione modulo genera l'attributo formaction per l'elemento <button ...> o il tag <input type="image" ...> generato.The Form Action Tag Helper generates the formaction attribute on the generated <button ...> or <input type="image" ...> tag. L'attributo formaction controlla se un modulo invia i dati.The formaction attribute controls where a form submits its data. Viene associato agli elementi <input> di tipo image e agli elementi <button>.It binds to <input> elements of type image and <button> elements. L'helper tag per l'azione modulo consente l'utilizzo di vari attributi asp- di AnchorTagHelper per controllare quale collegamento formaction viene generato per l'elemento corrispondente.The Form Action Tag Helper enables the usage of several AnchorTagHelper asp- attributes to control what formaction link is generated for the corresponding element.

Attributi di AnchorTagHelper supportati per controllare il valore di formaction:Supported AnchorTagHelper attributes to control the value of formaction:

AttributoAttribute DESCRIZIONEDescription
asp-controllerasp-controller Nome del controller.The name of the controller.
asp-actionasp-action Nome del metodo di azione.The name of the action method.
asp-areaasp-area Nome dell'area.The name of the area.
asp-pageasp-page Nome della pagina Razor.The name of the Razor page.
asp-page-handlerasp-page-handler Nome del gestore di pagina Razor.The name of the Razor page handler.
asp-routeasp-route Nome della route.The name of the route.
asp-route-{value}asp-route-{value} Singolo valore di route URL.A single URL route value. Ad esempio asp-route-id="1234".For example, asp-route-id="1234".
asp-all-route-dataasp-all-route-data Tutti i valori di route.All route values.
asp-fragmentasp-fragment Frammento di URL.The URL fragment.

Esempio di invio al controllerSubmit to controller example

Il markup seguente invia il modulo all'azione Index di HomeController quando viene selezionato l'input o un pulsante: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>

Il markup precedente genera il codice HTML seguente: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>

Esempio di invio a una paginaSubmit to page example

Il markup seguente invia il modulo alla pagina Razor 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>

Il markup precedente genera il codice HTML seguente: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>

Esempio di invio a una routeSubmit to route example

Prendere in considerazione l'endpoint /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";
    }
}

Il markup seguente invia il modulo all'endpoint /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>

Il markup precedente genera il codice HTML seguente: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>

Helper tag InputThe Input Tag Helper

L'helper tag Input associa un elemento HTML <input> a un'espressione di modello nella visualizzazione Razor.The Input Tag Helper binds an HTML <input> element to a model expression in your razor view.

Sintassi:Syntax:

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

L'helper tag Input:The Input Tag Helper:

  • Genera gli attributi HTML id e name per il nome dell'espressione specificata nell'attributo asp-for.Generates the id and name HTML attributes for the expression name specified in the asp-for attribute. asp-for="Property1.Property2" è equivalente a m => m.Property1.Property2.asp-for="Property1.Property2" is equivalent to m => m.Property1.Property2. Il nome dell'espressione viene usato come valore dell'attributo asp-for.The name of the expression is what is used for the asp-for attribute value. Per altre informazioni, vedere la sezione Nomi delle espressioni.See the Expression names section for additional information.

  • Imposta il valore dell'attributo HTML type in base agli attributi relativi al tipo di modello e all'annotazione dei dati applicati alla proprietà del modelloSets the HTML type attribute value based on the model type and data annotation attributes applied to the model property

  • Non sovrascrive il valore dell'attributo HTML type se è già stato specificatoWon't overwrite the HTML type attribute value when one is specified

  • Genera attributi di convalida HTML5 da attributi di annotazione dei dati applicati alla proprietà del modelloGenerates HTML5 validation attributes from data annotation attributes applied to model properties

  • Sovrappone una funzionalità di helper HTML con Html.TextBoxFor e Html.EditorFor.Has an HTML Helper feature overlap with Html.TextBoxFor and Html.EditorFor. Per i dettagli, vedere la sezione Alternative helper HTML per l'helper tag Input.See the HTML Helper alternatives to Input Tag Helper section for details.

  • Consente una tipizzazione forte.Provides strong typing. Se il nome di proprietà viene modificato e non si aggiorna l'helper tag, si ottiene un errore simile al seguente: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?)

L'helper tag Input imposta l'attributo HTML type in base al tipo .NET.The Input Tag Helper sets the HTML type attribute based on the .NET type. La tabella seguente elenca alcuni tipi .NET comuni e il tipo HTML generato. Non sono elencati tutti i tipi .NET.The following table lists some common .NET types and generated HTML type (not every .NET type is listed).

Tipo .NET.NET type Tipo InputInput Type
BoolBool type="checkbox"type="checkbox"
StringaString 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"

La tabella seguente illustra alcuni attributi di annotazioni dei dati comuni di cui l'helper tag Input esegue il mapping a tipi di input specifici (non tutti gli attributi di convalida sono elencati):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):

AttributoAttribute Tipo InputInput 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"

Esempio: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>

Il codice precedente genera il codice HTML seguente: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>

Le annotazioni dei dati applicate alle proprietà Email e Password generano metadati per il modello.The data annotations applied to the Email and Password properties generate metadata on the model. L'helper tag Input usa i metadati del modello e genere attributi HTML5 data-val-* (vedere Convalida del modello).The Input Tag Helper consumes the model metadata and produces HTML5 data-val-* attributes (see Model Validation). Questi attributi descrivono i validator da collegare ai campi di input.These attributes describe the validators to attach to the input fields. Ciò consente una convalida HTML5 e jQuery discreta.This provides unobtrusive HTML5 and jQuery validation. Gli attributi discreti hanno il formato data-val-rule="Error Message", in cui rule è il nome della regola di convalida (ad esempio data-val-required, data-val-email, data-val-maxlength e così via). Se l'attributo specifica un messaggio di errore, quest'ultimo costituisce il valore dell'attributo 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. Esistono anche attributi di data-val-ruleName-argumentName="argumentValue" di Form che offrono dettagli aggiuntivi sulla regola, ad esempio, 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" .

Alternative helper HTML per l'helper tag InputHTML Helper alternatives to Input Tag Helper

Html.TextBox, Html.TextBoxFor, Html.Editor e Html.EditorFor hanno funzionalità che si sovrappongono a quelle dell'helper tag Input.Html.TextBox, Html.TextBoxFor, Html.Editor and Html.EditorFor have overlapping features with the Input Tag Helper. L'helper tag Input imposta automaticamente l'attributo type, mentre Html.TextBox e Html.TextBoxFor non lo fanno.The Input Tag Helper will automatically set the type attribute; Html.TextBox and Html.TextBoxFor won't. Html.Editor e Html.EditorFor gestiscono raccolte, oggetti complessi e modelli, mentre l'helper tag Input non lo fa.Html.Editor and Html.EditorFor handle collections, complex objects and templates; the Input Tag Helper doesn't. L'helper tag Input, Html.EditorFor e Html.TextBoxFor sono fortemente tipizzati (usano espressioni lambda), mentre Html.TextBox e Html.Editor non lo sono (usano nomi di espressioni).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

Quando eseguono i modelli predefiniti, @Html.Editor() e @Html.EditorFor() usano una voce ViewDataDictionary speciale denominata htmlAttributes.@Html.Editor() and @Html.EditorFor() use a special ViewDataDictionary entry named htmlAttributes when executing their default templates. È possibile aumentare questo comportamento usando i parametri additionalViewData.This behavior is optionally augmented using additionalViewData parameters. La chiave "htmlAttributes" non fa distinzione tra maiuscole e minuscole.The key "htmlAttributes" is case-insensitive. La chiave "htmlAttributes" viene gestita in modo analogo all'oggetto htmlAttributes passato agli helper di input come @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" } })

Nomi delle espressioniExpression names

Il valore dell'attributo asp-for è un ModelExpression e il lato destro di un'espressione lambda.The asp-for attribute value is a ModelExpression and the right hand side of a lambda expression. Pertanto, asp-for="Property1" diventa m => m.Property1 nel codice generato. Per questo motivo il prefisso Model non è necessario.Therefore, asp-for="Property1" becomes m => m.Property1 in the generated code which is why you don't need to prefix with Model. È possibile usare il carattere "@" per iniziare un'espressione inline, spostandolo prima di m.:You can use the "@" character to start an inline expression and move before the m.:

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

Genera quanto segue:Generates the following:

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

Con le proprietà delle raccolte, asp-for="CollectionProperty[23].Member" genera lo stesso nome di asp-for="CollectionProperty[i].Member" se il valore di i è 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.

Quando ASP.NET Core MVC calcola il valore di ModelExpression, analizza diverse origini, tra cui ModelState.When ASP.NET Core MVC calculates the value of ModelExpression, it inspects several sources, including ModelState. Considerare <input type="text" asp-for="@Name">.Consider <input type="text" asp-for="@Name">. L'attributo value calcolato è il primo valore non Null da:The calculated value attribute is the first non-null value from:

  • Voce ModelState con chiave "Name".ModelState entry with key "Name".
  • Risultato dell'espressione Model.Name.Result of the expression Model.Name.

È anche possibile passare alle proprietà figlio tramite il percorso delle proprietà del modello di visualizzazione.You can also navigate to child properties using the property path of the view model. Si consideri una classe modello più complessa contenente una proprietà Address figlio.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; }
}

Nella visualizzazione, viene eseguita l'associazione a 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>

Per Address.AddressLine1 viene generato il codice HTML seguente:The following HTML is generated for Address.AddressLine1:

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

Nomi delle espressioni e raccolteExpression names and Collections

Esempio di modello contenente una matrice di Colors:Sample, a model containing an array of Colors:

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

    public int Age { get; set; }
}

Metodo di azione:The action method:

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

Il codice Razor seguente illustra come accedere a un elemento Color specifico: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>

Modello Views/Shared/EditorTemplates/String.cshtml:The Views/Shared/EditorTemplates/String.cshtml template:

@model string

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

Esempio di uso di List<T>:Sample using List<T>:

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

    public bool IsDone { get; set; }
}

Il codice Razor seguente illustra come eseguire l'iterazione in una raccolta: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>

Modello 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>
*@

foreach deve essere usato se possibile, quando il valore verrà usato in un contesto asp-for o in un contesto equivalente 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. In genere for è preferibile a foreach (se lo scenario lo consente) perché non è necessario allocare un enumeratore. Tuttavia, la valutazione di un indicizzatore in un'espressione LINQ può essere dispendiosa e deve essere ridotta al minimo.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.

 

Nota

Il codice di esempio commentato precedente illustra come sostituire l'espressione lambda con l'operatore @ per accedere a ogni ToDoItem nell'elenco.The commented sample code above shows how you would replace the lambda expression with the @ operator to access each ToDoItem in the list.

Helper tag TextareaThe Textarea Tag Helper

Textarea Tag Helper è simile all'helper Tag Input.The Textarea Tag Helper tag helper is similar to the Input Tag Helper.

  • Genera gli attributi id e name, nonché gli attributi di convalida dei dati dal modello per un elemento <textarea>.Generates the id and name attributes, and the data validation attributes from the model for a <textarea> element.

  • Consente una tipizzazione forte.Provides strong typing.

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

Esempio: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>

Viene generato il codice HTML seguente: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>

Helper tag LabelThe Label Tag Helper

  • Genera la didascalia dell'etichetta e l'attributo for in un elemento <etichetta> per un nome di espressioneGenerates the label caption and for attribute on a <label> element for an expression name

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

Rispetto a un elemento etichetta HTML puro, Label Tag Helper offre i vantaggi seguenti:The Label Tag Helper provides the following benefits over a pure HTML label element:

  • Si ottiene automaticamente il valore descrittivo dell'etichetta dall'attributo Display.You automatically get the descriptive label value from the Display attribute. Il nome visualizzato desiderato può cambiare nel tempo e la combinazione dell'attributo Display e dell'helper tag Label applica l'attributo Display ovunque venga usato.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.

  • Meno markup nel codice sorgenteLess markup in source code

  • Tipizzazione forte con la proprietà del modello.Strong typing with the model property.

Esempio: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>

Per l'elemento <label> viene generato il codice HTML seguente:The following HTML is generated for the <label> element:

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

L'helper tag Label genera il valore dell'attributo for di "Email", che è l'ID associato all'elemento <input>.The Label Tag Helper generated the for attribute value of "Email", which is the ID associated with the <input> element. Gli helper tag generano elementi id e for coerenti. In questo modo possono essere associati correttamente.The Tag Helpers generate consistent id and for elements so they can be correctly associated. La didascalia di questo esempio deriva dall'attributo Display.The caption in this sample comes from the Display attribute. Se il modello non contiene un attributo Display, la didascalia corrisponde al nome della proprietà dell'espressione.If the model didn't contain a Display attribute, the caption would be the property name of the expression.

Helper tag di convalidaThe Validation Tag Helpers

Ci sono due helper tag di convalida.There are two Validation Tag Helpers. Validation Message Tag Helper, che visualizza un messaggio di convalida per una singola proprietà del modello, e Validation Summary Tag Helper, che visualizza un riepilogo degli errori di convalida.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). Input Tag Helper aggiunge attributi di convalida sul lato client HTML5 agli elementi di input in base agli attributi di annotazione dei dati per le classi del modello.The Input Tag Helper adds HTML5 client side validation attributes to input elements based on data annotation attributes on your model classes. La convalida viene eseguita anche per il server.Validation is also performed on the server. Quando si verifica un errore di convalida, l'helper tag di convalida visualizza questi messaggi di errore.The Validation Tag Helper displays these error messages when a validation error occurs.

Helper tag Validation MessageThe Validation Message Tag Helper

  • Aggiunge l'attributo HTML5 data-valmsg-for="property" all'elemento span, che collega i messaggi di errore di convalida nel campo di input della proprietà del modello specificato.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. Quando si verifica un errore di convalida sul lato client, jQuery visualizza il messaggio di errore nell'elemento <span>.When a client side validation error occurs, jQuery displays the error message in the <span> element.

  • La convalida viene eseguita anche nel server.Validation also takes place on the server. Nei client JavaScript può essere disabilitato e una parte della convalida può essere eseguita solo sul lato server.Clients may have JavaScript disabled and some validation can only be done on the server side.

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

Validation Message Tag Helper viene usato con l'attributo asp-validation-for in un elemento 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>

L'helper tag Validation Message genera il codice HTML seguente:The Validation Message Tag Helper will generate the following HTML:

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

In genere si usa Validation Message Tag Helper dopo un helper tag Input per la stessa proprietà.You generally use the Validation Message Tag Helper after an Input Tag Helper for the same property. In questo modo è possibile visualizzare i messaggi di errore di convalida vicino all'input che ha causato l'errore.Doing so displays any validation error messages near the input that caused the error.

Nota

È necessario avere una visualizzazione con i riferimenti agli script JavaScript e jQuery corretti per la convalida lato client.You must have a view with the correct JavaScript and jQuery script references in place for client side validation. Per altre informazioni, vedere Convalida del modello.See Model Validation for more information.

Se si verifica un errore di convalida sul lato server, ad esempio quando la convalida sul lato server è personalizzata o quando la convalida sul lato client è disabilitata, MVC inserisce il messaggio di errore nel corpo dell'elemento <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>

Helper tag Validation SummaryThe Validation Summary Tag Helper

  • Considera come destinazione gli elementi <div> con l'attributo asp-validation-summaryTargets <div> elements with the asp-validation-summary attribute

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

Validation Summary Tag Helper viene usato per visualizzare un riepilogo dei messaggi di convalida.The Validation Summary Tag Helper is used to display a summary of validation messages. Il valore dell'attributo asp-validation-summary può corrispondere a uno dei valori seguenti:The asp-validation-summary attribute value can be any of the following:

asp-validation-summaryasp-validation-summary Messaggi di convalida visualizzatiValidation messages displayed
ValidationSummary.AllValidationSummary.All Livello di modello e proprietàProperty and model level
ValidationSummary.ModelOnlyValidationSummary.ModelOnly ModelloModel
ValidationSummary.NoneValidationSummary.None nessunoNone

EsempioSample

Nell'esempio seguente, il modello di dati viene decorato con attributi DataAnnotation e genera messaggi di errore di convalida per l'elemento <input>.In the following example, the data model is decorated with DataAnnotation attributes, which generates validation error messages on the <input> element. Quando si verifica un errore di convalida, l'helper tag di convalida visualizza il messaggio di errore: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>

Codice HTML generato (se il modello è valido):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>

Helper tag SelectThe Select Tag Helper

  • Genera l'elemento select e gli elementi option associati per le proprietà del modello.Generates select and associated option elements for properties of your model.

  • Ha come helper HTML alternativi Html.DropDownListFor e Html.ListBoxForHas an HTML Helper alternative Html.DropDownListFor and Html.ListBoxFor

Select Tag Helper asp-for specifica il nome della proprietà di modello per l'elemento select e asp-items specifica gli elementi option.The Select Tag Helper asp-for specifies the model property name for the select element and asp-items specifies the option elements. Ad esempio:For example:

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

Esempio: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"  },
        };
    }
}

Il metodo Index inizializza CountryViewModel, imposta il paese selezionato e lo passa alla visualizzazione 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);
}

Il metodo Index di HTTP POST visualizza la selezione: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);
}

Visualizzazione 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>

Che genera il codice HTML seguente (con "CA" selezionato):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>

Nota

Non è consigliabile usare ViewBag o ViewData con l'helper tag Select.We don't recommend using ViewBag or ViewData with the Select Tag Helper. Un modello di visualizzazione è più solido e in genere presenta meno problemi quando si tratta di fornire metadati MVC.A view model is more robust at providing MVC metadata and generally less problematic.

Il valore dell'attributo asp-for rappresenta un caso speciale e non richiede un prefisso Model, che invece è richiesto dagli altri attributi di helper tag, ad esempio asp-itemsThe 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> 

Associazione di enumEnum binding

Spesso è comodo usare <select> con una proprietà enum e generare gli elementi SelectListItem dai valori enum.It's often convenient to use <select> with an enum property and generate the SelectListItem elements from the enum values.

Esempio: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
    }
}

Il metodo GetEnumSelectList genera un oggetto SelectList per 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>

Per ottenere un'interfaccia utente più completa, è possibile decorare l'elenco di enumeratori con l'attributo Display: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
    }
}

Viene generato il codice HTML seguente: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>

Gruppo di opzioniOption Group

L'elemento HTML <optgroup> viene generato quando il modello di visualizzazione contiene uno o più oggetti SelectListGroup.The HTML <optgroup> element is generated when the view model contains one or more SelectListGroup objects.

CountryViewModelGroup suddivide gli elementi SelectListItem nei gruppi "North America" ed "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; }

I due gruppi sono illustrati di seguito:The two groups are shown below:

esempio di gruppi di opzioni

Codice HTML generato: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>

Selezione multiplaMultiple select

L'helper tag Select genera automaticamente l'attributo multiple = "multiple" se la proprietà specificata nell'attributo asp-for è IEnumerable.The Select Tag Helper will automatically generate the multiple = "multiple" attribute if the property specified in the asp-for attribute is an IEnumerable. Dato, ad esempio, il modello seguente: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"}
         };
    }
}

Con la visualizzazione seguente: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>

Viene generato il codice HTML seguente: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>

Nessuna selezioneNo selection

Se si usa l'opzione "not specified" in più pagine, è possibile creare un modello per evitare di ripetere lo stesso codice 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>

Modello 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'aggiunta di elementi HTML <option> non è limitata al caso relativo a nessuna selezione.Adding HTML <option> elements isn't limited to the No selection case. La visualizzazione e il metodo di azione seguenti, ad esempio, generano codice HTML simile al codice precedente:For example, the following view and action method will generate HTML similar to the code above:

public IActionResult IndexOption(int id)
{
    var model = new CountryViewModel();
    model.Country = "CA";
    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'elemento <option> corretto viene selezionato (con l'attributo selected="selected") a seconda del valore Country corrente.The correct <option> element will be selected ( contain the selected="selected" attribute) depending on the current Country value.

 <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>

Risorse aggiuntiveAdditional resources