Tag Helpers in formulieren in ASP.NET Core

Door Rick Anderson, N. Taylor Mullen, Dave Paquette en Jerrie Pelser

In dit document ziet u hoe u werkt met Formulieren en de HTML-elementen die vaak worden gebruikt op een formulier. Het HTML-formulierelement biedt het primaire mechanisme dat web-apps gebruiken om gegevens terug te plaatsen op de server. In het grootste deel van dit document worden Tag Helpers beschreven en hoe u productief robuuste HTML-formulieren kunt maken. We raden u aan Inleiding tot Tag Helpers te lezen voordat u dit document leest.

In veel gevallen bieden HTML Helpers een alternatieve benadering voor een specifieke Tag Helper, maar het is belangrijk te herkennen dat Tag Helpers HTML Helpers niet vervangen en er is geen Tag Helper voor elke HTML Helper. Wanneer er een alternatief voor HTML Helper bestaat, wordt dit vermeld.

De Helper voor formuliertags

De Helper voor formuliertags:

• Genereert de HTML FORM-kenmerkwaarde<>action voor een MVC-controlleractie of benoemde route

• Hiermee genereert u een verborgen verificatietoken voor aanvragen op meerdere sites om vervalsing van aanvragen op meerdere sites te voorkomen (wanneer deze worden gebruikt met het [ValidateAntiForgeryToken] kenmerk in de http Post-actiemethode)

• Geeft het asp-route-<Parameter Name> kenmerk op, waar <Parameter Name> wordt toegevoegd aan de routewaarden. De routeValues parameters voor Html.BeginForm en Html.BeginRouteForm bieden vergelijkbare functionaliteit.

• ** Heeft een HTML Helper-alternatief Html.BeginForm en Html.BeginRouteForm

Proef:

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

Met de bovenstaande Helper voor formuliertags wordt de volgende HTML gegenereerd:

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

De MVC-runtime genereert de action kenmerkwaarde van de Form Tag Helper-attributen asp-controller en asp-action. De Helper voor formuliertags genereert ook een verborgen verificatietoken voor aanvragen om te voorkomen dat aanvragen op meerdere sites worden vervalst (wanneer deze worden gebruikt met het [ValidateAntiForgeryToken] kenmerk in de http Post-actiemethode). Het beveiligen van een puur HTML-formulier tegen aanvraagvervalsing op meerdere sites is moeilijk, de Helper voor formuliertags biedt deze service voor u.

Een benoemde route gebruiken

Het asp-route kenmerk Tag Helper kan ook markeringen genereren voor het HTML-kenmerk action . Een app met een route met de naam register kan de volgende markeringen gebruiken voor de registratiepagina:

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

Veel van de weergaven in de map Views/Account (gegenereerd wanneer u een nieuwe web-app met afzonderlijke accounts maakt) bevatten het kenmerk asp-route-returnurl :

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

De Tag-helper voor Formulieracties

Met de Formuliertaghelper voor acties wordt het formaction-kenmerk gegenereerd op het gegenereerde <button ...>- of <input type="image" ...>-element. Het formaction kenmerk bepaalt waar een formulier de gegevens verzendt. Het bindt aan <invoerelementen> van het type image en <knopelementen> . Met de Helper voor de actietag van formulier kunnen verschillende AnchorTagHelper-kenmerkenasp- worden gebruikt om te bepalen welke formaction koppeling wordt gegenereerd voor het bijbehorende element.

Ondersteunde AnchorTagHelper-kenmerken om de waarde van formaction te beheersen.

Voorbeeld van verzenden naar controller

Met de volgende markeringen wordt het formulier naar de Index actie van HomeController verzonden wanneer de invoer of knop is geselecteerd.

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

Met de vorige opmaak wordt de volgende HTML gegenereerd:

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

Verzenden naar voorbeeldpagina

Met de volgende opmaak wordt het formulier naar de AboutRazor pagina verzonden:

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

Met de vorige opmaak wordt de volgende HTML gegenereerd:

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

Indienen bij routevoorbeeld

Houd rekening met het /Home/Test eindpunt:

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

Met de volgende markeringen wordt het formulier naar het /Home/Test eindpunt verzonden.

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

Met de vorige opmaak wordt de volgende HTML gegenereerd:

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

De Helper voor invoertags

De Helper voor invoertags verbindt een HTML-invoerelement<> aan een modelexpressie in uw scheermesweergave.

Syntaxis:

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

De Helper voor invoertags:

• Hiermee worden de id en name HTML-kenmerken gegenereerd voor de expressienaam die is opgegeven in het asp-for kenmerk. asp-for="Property1.Property2" is equivalent aan m => m.Property1.Property2. De naam van de expressie is wat wordt gebruikt voor de asp-for kenmerkwaarde. Zie de sectie Expressienamen voor meer informatie.

• Hiermee stelt u de HTML-kenmerkwaarde type in op basis van het modeltype en de kenmerken van de gegevensaantekening die zijn toegepast op de modeleigenschap

• De HTML-kenmerkwaarde type wordt niet overschreven wanneer er een is opgegeven

• Hiermee worden HTML5-validatiekenmerken gegenereerd op basis van gegevensaantekeningskenmerken die zijn toegepast op modeleigenschappen

• Heeft een HTML Helper-functie overlapt met Html.TextBoxFor en Html.EditorFor. Zie de HTML Helper-alternatieven voor de sectie Input Tag Helper voor meer informatie.

• Biedt sterke typecontrole. Als de naam van de eigenschap wordt gewijzigd en u de Tag Helper niet bijwerkt, krijgt u een foutbericht dat er ongeveer als volgt uitziet:

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

De Input Tag Helper stelt het HTML-kenmerk in op basis van het .NET-type type . De volgende tabel bevat enkele veelvoorkomende .NET-typen en gegenereerd HTML-type (niet elk .NET-type wordt vermeld).

In de volgende tabel ziet u enkele algemene kenmerken van gegevensaantekeningen die door de helper voor invoertags worden toegewezen aan specifieke invoertypen (niet elk validatiekenmerk wordt vermeld):

Proef:

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">
    <label>Email: <input asp-for="Email" /></label> <br />
    <label>Password: <input asp-for="Password" /></label><br />
    <button type="submit">Register</button>
</form>

Met de bovenstaande code wordt de volgende HTML gegenereerd:

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

De gegevensaantekeningen die zijn toegepast op de Email en Password eigenschappen genereren metagegevens op het model. De Input Tag Helper gebruikt de metagegevens van het model en produceert HTML5-kenmerkendata-val-* (zie Modelvalidatie). Deze kenmerken beschrijven de validators die moeten worden gekoppeld aan de invoervelden. Dit biedt onopvallende HTML5- en jQuery-validatie . De onopvallende kenmerken hebben de indelingdata-val-rule="Error Message", waarbij de regel de naam is van de validatieregel (zoals data-val-requireddata-val-email, data-val-maxlength, , enzovoort) Als er een foutbericht wordt weergegeven in het kenmerk, wordt dit weergegeven als de waarde voor het data-val-rule kenmerk. Er zijn ook kenmerken van het formulier data-val-ruleName-argumentName="argumentValue" die aanvullende informatie geven over de regel, bijvoorbeeld data-val-maxlength-max="1024" .

Wanneer u meerdere input besturingselementen aan dezelfde eigenschap bindt, delen de gegenereerde besturingselementen hetzelfde id, waardoor de gegenereerde markering ongeldig wordt. Als u duplicaten wilt voorkomen, geeft u het id kenmerk voor elk besturingselement expliciet op.

Weergave van verborgen invoer van het selectievakje

Selectievakjes in HTML5 verzenden geen waarde wanneer ze zijn uitgeschakeld. Als u wilt inschakelen dat een standaardwaarde wordt verzonden voor een uitgeschakeld selectievakje, genereert de Helper voor invoertags extra verborgen invoer voor selectievakjes.

Denk bijvoorbeeld aan de volgende Razor markeringen die gebruikmaakt van de Input Tag Helper voor een booleaanse modeleigenschap IsChecked:

<form method="post">
    <input asp-for="@Model.IsChecked" />
    <button type="submit">Submit</button>
</form>

Met de voorgaande Razor markering worden HTML-markeringen gegenereerd die er ongeveer als volgt uitzien:

<form method="post">
    <input name="IsChecked" type="checkbox" value="true" />
    <button type="submit">Submit</button>

    <input name="IsChecked" type="hidden" value="false" /> 
</form>

De voorgaande HTML-markering toont een extra verborgen invoer met een naam van IsChecked en een waarde van false. Deze verborgen invoer wordt standaard aan het einde van het formulier weergegeven. Wanneer het formulier wordt verzonden:

• Als het IsChecked selectievakje is aangevinkt, worden zowel true als false als waarden verzonden.
• Als de invoer van het IsChecked selectievakje is uitgeschakeld, wordt alleen de verborgen invoerwaarde false verzonden.

Het ASP.NET Core modelbindingsproces leest alleen de eerste waarde bij het binden aan een bool waarde, wat resulteert in true ingeschakelde selectievakjes en false voor niet-ingeschakelde selectievakjes.

Als u het gedrag van de verborgen invoerweergave wilt configureren, stelt u de CheckBoxHiddenInputRenderMode eigenschap in op MvcViewOptions.HtmlHelperOptions. Voorbeeld:

services.Configure<MvcViewOptions>(options =>
    options.HtmlHelperOptions.CheckBoxHiddenInputRenderMode =
        CheckBoxHiddenInputRenderMode.None);

Met de voorgaande code wordt verborgen invoerweergave voor selectievakjes uitgeschakeld door in te stellen CheckBoxHiddenInputRenderMode op CheckBoxHiddenInputRenderMode.None. Zie de CheckBoxHiddenInputRenderMode opsomming voor alle beschikbare renderingmodi.

Alternatieven voor de HTML Helper als vervanging van de Input Tag Helper

Html.TextBox, Html.TextBoxForHtml.Editor en Html.EditorFor overlappende functies hebben met de Helper voor invoertags. De Helper voor invoertags stelt het type kenmerk automatisch in en Html.TextBoxHtml.TextBoxFor niet. Html.Editor en Html.EditorFor verzamelingen, complexe objecten en sjablonen verwerken; de Helper voor invoertags niet. De Helper Html.EditorFor voor invoertags en Html.TextBoxFor worden sterk getypt (ze gebruiken lambda-expressies) Html.TextBox en Html.Editor zijn niet (ze gebruiken expressienamen).

HTML-attributen

@Html.Editor() en @Html.EditorFor() gebruik een speciale ViewDataDictionary vermelding met de naam htmlAttributes bij het uitvoeren van de standaardsjablonen. Dit gedrag wordt optioneel uitgebreid met behulp van additionalViewData parameters. De sleutel "htmlAttributes" is niet-hoofdlettergevoelig. De sleutel 'htmlAttributes' wordt op dezelfde manier verwerkt als het htmlAttributes object dat wordt doorgegeven aan invoerhelpers zoals @Html.TextBox().

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

Uitdrukkingsnamen

De asp-for kenmerkwaarde is een ModelExpression en de rechterkant van een lambda-expressie. asp-for="Property1" wordt m => m.Property1 in de gegenereerde code, daarom hoeft u geen voorvoegsel te gebruiken bij Model. U kunt het teken @gebruiken om een inline-expressie te starten en vóór het m.volgende te gaan:

@{
  var joe = "Joe";
}

<input asp-for="@joe">

Hiermee wordt het volgende gegenereerd:

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

Met verzamelingseigenschappen genereert asp-for="CollectionProperty[23].Member" dezelfde naam als asp-for="CollectionProperty[i].Member" wanneer i de waarde 23 is.

Wanneer ASP.NET Core MVC de waarde berekent ModelExpression, worden verschillende bronnen geïnspecteerd, waaronder ModelState. Overweeg <input type="text" asp-for="Name">. Het berekende value kenmerk is de eerste niet-null-waarde van:

• ModelState vermelding met sleutel 'Naam'.
• Resultaat van de expressie Model.Name.

Navigeren door kind-eigenschappen

U kunt ook naar kindereigenschappen navigeren via het eigenschapspad van het weergavemodel. Overweeg een complexere modelklasse die een onderliggende Address eigenschap bevat.

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

In de weergave binden we aan Address.AddressLine1:

@model RegisterAddressViewModel

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

De volgende HTML wordt gegenereerd voor Address.AddressLine1:

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

Expressienamen en verzamelingen

Voorbeeld: een model met een matrix van Colors:

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

    public int Age { get; set; }
}

De actiemethode:

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

Razor Hieronder ziet u hoe u toegang krijgt tot een specifiek 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>

De Views/Shared/EditorTemplates/String.cshtml-sjabloon:

@model string

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

Voorbeeld met behulp van List<T>:

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

    public bool IsDone { get; set; }
}

Razor Hieronder ziet u hoe u een verzameling kunt herhalen:

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

De Views/Shared/EditorTemplates/ToDoItem.cshtml-sjabloon:

@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 moet, indien mogelijk, worden gebruikt wanneer de waarde in een asp-for of Html.DisplayFor gelijkwaardige context wordt gebruikt. Over het algemeen is het for beter dan foreach (als het scenario dit toestaat) omdat het geen enumerator hoeft toe te wijzen. Het evalueren van een indexeerfunctie in een LINQ-expressie kan echter duur zijn en moet worden geminimaliseerd.

De Tag Helper textarea

De Textarea Tag Helper tag-helper is vergelijkbaar met de Helper voor invoertags.

• Hiermee genereert u de id kenmerken en name kenmerken en de kenmerken voor gegevensvalidatie van het model voor een <textarea-element> .

• Biedt sterke typecontrole.

• Alternatief voor HTML Helper: Html.TextAreaFor

Proef:

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>

De volgende HTML wordt gegenereerd:

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

De Label Tag Helper

• Hiermee genereert u het labelbijschrift en for kenmerk op een <labelelement> voor een expressienaam

• Alternatief voor HTML Helper: Html.LabelFor.

Het Label Tag Helper biedt de volgende voordelen ten opzichte van een puur HTML-labelelement:

• U krijgt automatisch de beschrijvende labelwaarde van het Display kenmerk. De beoogde weergavenaam kan na verloop van tijd veranderen en de combinatie van Display kenmerk en Label Tag Helper past de Display overal toe waar deze wordt gebruikt.

• Minder markeringen in broncode

• Sterk typen met de modeleigenschap.

Proef:

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>

De volgende HTML wordt gegenereerd voor het <label> element:

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

De Label Tag Helper heeft de for kenmerkwaarde van 'E-mail' gegenereerd. Dit is de id die is gekoppeld aan het <input> element. De Tag Helpers genereren consistente id elementen, for zodat ze correct kunnen worden gekoppeld. Het bijschrift in dit voorbeeld is afkomstig van het Display kenmerk. Als het model geen kenmerk bevat Display , is het bijschrift de eigenschapsnaam van de expressie. Als u het standaardbijschrift wilt overschrijven, voegt u een bijschrift toe aan de labeltag.

De Helpers voor validatietags

Er zijn twee Helpers voor validatietags. Het Validation Message Tag Helper (dat een validatiebericht weergeeft voor één eigenschap in uw model) en het Validation Summary Tag Helper (waarin een samenvatting van validatiefouten wordt weergegeven). Input Tag Helper voegt HTML5-validatiekenmerken voor de clientzijde toe aan invoerelementen op basis van gegevensannotaties van uw modelklassen. Validatie wordt ook uitgevoerd op de server. De Helper voor validatietags geeft deze foutberichten weer wanneer er een validatiefout optreedt.

Helper voor validatieberichttag

• Voegt het HTML5-kenmerkdata-valmsg-for="property" toe aan het span-element , waarmee de validatiefoutberichten in het invoerveld van de opgegeven modeleigenschap worden gekoppeld. Wanneer er een validatiefout aan de clientzijde optreedt, wordt in jQuery het foutbericht in het <span> element weergegeven.

• Validatie vindt ook plaats op de server. Clients hebben mogelijk JavaScript uitgeschakeld en sommige validaties kunnen alleen aan de serverzijde worden uitgevoerd.

• Alternatief voor HTML Helper: Html.ValidationMessageFor

De Validation Message Tag Helper wordt gebruikt met het asp-validation-for kenmerk op een HTML-spanelement .

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

De Helper voor de validatieberichttag genereert de volgende HTML:

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

Over het algemeen gebruikt u de Validation Message Tag Helper na een Input Tag Helper voor dezelfde eigenschap. Hiermee worden eventuele validatiefoutmeldingen weergegeven bij de invoer die de fout veroorzaakte.

Wanneer er een validatiefout aan de serverzijde optreedt (bijvoorbeeld wanneer u aangepaste validatie aan de serverzijde of validatie aan de clientzijde hebt uitgeschakeld), plaatst MVC dat foutbericht als hoofdtekst van het <span> element.

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

De Helper voor de tag Validatieoverzicht

• Richt zich op <div> elementen met het asp-validation-summary kenmerk

• Alternatief voor HTML Helper: @Html.ValidationSummary

Deze Validation Summary Tag Helper wordt gebruikt om een samenvatting van validatieberichten weer te geven. De asp-validation-summary kenmerkwaarde kan een van de volgende zijn:

Voorbeeld

In het volgende voorbeeld bevat DataAnnotation het gegevensmodel kenmerken, waarmee validatiefoutberichten op het <input> element worden gegenereerd. Wanneer er een validatiefout optreedt, wordt in de Helper voor validatietags het foutbericht weergegeven:

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>
    <label>Email: <input asp-for="Email" /></label> <br />
    <span asp-validation-for="Email"></span><br />
    <label>Password: <input asp-for="Password" /></label><br />
    <span asp-validation-for="Password"></span><br />
    <button type="submit">Register</button>
</form>

De gegenereerde HTML (wanneer het model geldig is):

<form action="/DemoReg/Register" method="post">
  <label>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"></label><br>
  <span class="field-validation-valid" data-valmsg-replace="true"
   data-valmsg-for="Email"></span><br>
  <label>Password: <input name="Password" id="Password" type="password"
   data-val-required="The Password field is required." data-val="true"></label><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>

De Select Tag Helper

• Hiermee worden geselecteerde en bijbehorende optie-elementen gegenereerd voor eigenschappen van uw model.

• ** Heeft een HTML Helper-alternatief Html.DropDownListFor en Html.ListBoxFor

Hiermee Select Tag Helperasp-for geeft u de naam van de modeleigenschap voor het select-element op en asp-items geeft u de optie-elementen op. Voorbeeld:

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

Proef:

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

De Index methode initialiseert de CountryViewModel, stelt het geselecteerde land in en geeft het door aan de Index weergave.

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

De HTTP POST-methode Index geeft de selectie weer:

[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);
}

De Index weergave:

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

Hiermee wordt de volgende HTML gegenereerd (met 'CA' geselecteerd):

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

De asp-for kenmerkwaarde is een speciaal geval en vereist geen Model voorvoegsel; de andere Tag Helper-kenmerken doen dat wel (zoals asp-items).

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

Enum-binding

Het is vaak handig om <select> te gebruiken met een enum eigenschap en de SelectListItem elementen te genereren op basis van de enum waarden.

Proef:

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

De GetEnumSelectList methode genereert een SelectList object voor een 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>

U kunt uw opsommingslijst markeren met het Display kenmerk om een uitgebreidere gebruikersinterface te krijgen:

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

De volgende HTML wordt gegenereerd:

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

Optiegroep

Het HTML optgroup-element<> wordt gegenereerd wanneer het weergavemodel een of meer SelectListGroup objecten bevat.

De CountryViewModelGroup elementen worden SelectListItem gegroepeerd in de groepen Noord-Amerika en Europa:

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

De twee groepen worden hieronder weergegeven:

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

Meervoudige selectie

De Select Tag Helper genereert automatisch het kenmerk „multiple” = „multiple” als de eigenschap die is opgegeven in het kenmerk een asp-for is. Bijvoorbeeld, op basis van het volgende 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"}
         };
    }
}

Met de volgende weergave:

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

Hiermee wordt de volgende HTML gegenereerd:

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

Geen selectie

Als u de optie 'niet opgegeven' op meerdere pagina's gebruikt, kunt u een sjabloon maken om herhaling van de HTML te elimineren:

@model CountryViewModel

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

De Views/Shared/EditorTemplates/CountryViewModel.cshtml-sjabloon:

@model CountryViewModel

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

Het toevoegen van HTML-optie elementen<> is niet beperkt tot het geval Geen selectie. Met de volgende weergave en actiemethode wordt bijvoorbeeld HTML gegenereerd die vergelijkbaar is met de bovenstaande code:

public IActionResult IndexNone()
{
    var model = new CountryViewModel();
    model.Countries.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>

Het juiste <option> element wordt geselecteerd (bevat het selected="selected" kenmerk) afhankelijk van de huidige Country waarde.

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>

Aanvullende bronnen

• Tag Helpers in ASP.NET Core (Taghelpers in ASP.NET Core zijn hulpmiddelen die ontwikkeld zijn om het werken met HTML-tags eenvoudiger te maken binnen de .NET-omgeving)
• HTML-formulierelement
• Verificatietoken aanvragen
• Modelbinding in ASP.NET Core
• Modelvalidatie in ASP.NET Core MVC
• IAttributeAdapter Interface
• Codefragmenten voor dit document