Označení pomocníků ve formulářích v ASP.NET Core

Rick Anderson, N. Přichytát, Dave Paquette a JerrieSer

Tento dokument ukazuje práci s formuláři a elementy HTML, které se běžně používají ve formuláři. Element Formulář HTML poskytuje primární mechanismus, který webové aplikace používají k publikování dat zpět na server. Většina tohoto dokumentu popisuje pomocné prvky značek a způsob, jak vám můžou pomoct produktivně vytvářet robustní formuláře HTML. Než si přečtete tento dokument, doporučujeme si přečíst úvod do pomocníků značek.

V mnoha případech poskytují pomocná opatření HTML alternativní přístup ke konkrétnímu pomocníkovi značek, ale je důležité si uvědomit, že pomocná opatření značek nenahrazuje pomocné prvky HTML a pro každý pomocný prvek HTML není k dispozici pomocná metoda značky. Pokud existuje alternativní pomocná metoda HTML, je zmíněna.

Pomocná nápověda značky formuláře

Pomocná funkce značky formuláře:

• Vygeneruje hodnotu atributu HTML <FORM> action pro akci kontroleru MVC nebo pojmenovanou trasu.

• Vygeneruje skrytý ověřovací token požadavku, aby se zabránilo padělání žádosti mezi weby (při použití s atributem v metodě akce [ValidateAntiForgeryToken] HTTP Post).

• Poskytuje atribut asp-route-<Parameter Name> , kde se přidá k <Parameter Name> hodnotám trasy. Parametry routeValues pro a poskytují podobné Html.BeginForm Html.BeginRouteForm funkce.

• Má alternativu pomocníka HTML Html.BeginForm a Html.BeginRouteForm

Ukázka:

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

Výše uvedený pomocník značky formuláře vygeneruje následující kód HTML:

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

Modul runtime MVC generuje hodnotu action atributu z atributů pomocníka značky formuláře a asp-controller asp-action . Pomocná metoda značky formuláře také vygeneruje skrytý ověřovací token požadavku, aby se zabránilo padělání žádosti mezi weby (při použití s atributem v metodě akce [ValidateAntiForgeryToken] HTTP Post). Ochrana čistého formuláře HTML před paděláním žádostí mezi weby je obtížná. Pomocná služba značky formuláře vám tuto službu poskytuje.

Použití pojmenované trasy

Atribut asp-route Pomocná podpora značek může také generovat kód pro atribut action HTML. Aplikace s trasou s názvem může pro registrační stránku register použít následující kód:

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

Mnoho zobrazení ve složce Views/Account (vygenerované při vytváření nové webové aplikace s individuálními uživatelskými účty) obsahuje atribut asp-route-returnurl:

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

Pomocná nápověda značky akce formuláře

Pomocná metoda značky akce formuláře vygeneruje formaction atribut u vygenerované značky <button ...> nebo <input type="image" ...> . Atribut formaction řídí, kam formulář odešle svá data. Sváže se s <input> prvky typu a image <button> elementů. Pomocná metoda značky akce formuláře umožňuje použití několika atributů AnchorTagHelper k řízení toho, jaký odkaz se generuje asp- pro odpovídající formaction prvek.

Podporované atributy AnchorTagHelper pro řízení hodnoty formaction :

Příklad odeslání kontroleru

Následující kód odešle formulář do Index akce při výběru vstupu nebo HomeController tlačítka:

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

Předchozí kód vygeneruje následující kód HTML:

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

Příklad odeslání na stránku

Následující kód odešle formulář na About Razor stránku :

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

Předchozí kód vygeneruje následující kód HTML:

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

Příklad odeslání na trasu

Vezměte v /Home/Test úvahu koncový bod:

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

Následující kód odešle formulář do koncového /Home/Test bodu.

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

Předchozí kód vygeneruje následující kód HTML:

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

Pomocná nápověda značky vstupu

Pomocná metoda značky vstupu váže prvek HTML <input> na výraz modelu v zobrazení Razor.

Syntaxe:

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

Pomocná funkce značky vstupu:

• Generuje id atributy name a HTML pro název výrazu zadaný v asp-for atributu . asp-for="Property1.Property2" je ekvivalentem k m => m.Property1.Property2. Název výrazu se používá pro hodnotu asp-for atributu. Další informace najdete v části Názvy výrazů.

• Nastaví hodnotu atributu HTML na základě typu modelu a atributů datových poznámek type použitých na vlastnost modelu.

• Nepřepíše hodnotu atributu type HTML, pokud je zadaný.

• Generuje atributy ověřování HTML5 z atributů datových poznámek použitých na vlastnosti modelu.

• Má pomocná funkce HTML, která se překrývá s a Html.TextBoxFor Html.EditorFor . Podrobnosti najdete v části Pomocná metoda HTML s alternativami ke značce vstupu.

• Poskytuje silné psaní. Pokud se název vlastnosti změní a pomocníka značky ne aktualizován, zobrazí se chyba podobná následující:

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

Pomocná Input podpora značek nastavuje atribut HTML type na základě typu .NET. Následující tabulka uvádí některé běžné typy .NET a vygenerovaný typ HTML (ne každý typ .NET je uvedený).

V následující tabulce jsou uvedeny některé běžné atributy datových poznámek, které bude pomocná metoda vstupní značky mapovat na konkrétní typy vstupu (není uveden každý atribut ověření):

Ukázka:

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>

Výše uvedený kód vygeneruje následující kód 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>

Datové poznámky použité na vlastnosti Email Password a generují metadata modelu. Pomocná metoda značky vstupu využívá metadata modelu a vytváří atributy HTML5 data-val-* (viz Ověření modelu). Tyto atributy popisují validátory, které se mají připojit ke vstupním polím. To poskytuje nerušivá ověřování HTML5 a jQuery. Nerušivá atributy mají formát , kde rule je název ověřovacího pravidla data-val-rule="Error Message" (například data-val-required , , data-val-email data-val-maxlength atd.). Pokud je v atributu poskytnuta chybová zpráva, zobrazí se jako hodnota data-val-rule atributu. Existují také atributy data-val-ruleName-argumentName="argumentValue" formuláře, které poskytují další podrobnosti o pravidle, například data-val-maxlength-max="1024" .

Zaškrtávací políčko pro vykreslení skrytého vstupu

Zaškrtávací políčka v HTML5 neodesíí hodnotu, pokud nejsou zaškrtnutá. Pokud chcete povolit odeslání výchozí hodnoty pro nezaškrtnuté políčko, vygeneruje pomocná metoda značky vstupu další skrytý vstup pro zaškrtávací políčka.

Představte si například následující kód, který jako logickou vlastnost modelu používá Razor pomocná proměnná značky vstupu IsChecked :

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

Předchozí kód Razor vygeneruje kód HTML podobný následujícímu:

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

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

Předchozí kód HTML ukazuje další skrytý vstup s názvem IsChecked a hodnotou false . Ve výchozím nastavení se tento skrytý vstup vykreslí na konci formuláře. Při odeslaném formuláři:

• Pokud je IsChecked zaškrtnuté políčko, budou true oba a false odeslány jako hodnoty.
• Pokud políčko nezaškrtnete, bude odeslána pouze IsChecked skrytá false vstupní hodnota.

Při ASP.NET Core s hodnotou načte proces vazby modelu pouze první hodnotu, což má zaškrtnutá políčka a bool true false nezaškrtnutá políčka.

Pokud chcete nakonfigurovat chování vykreslování skrytého vstupu, nastavte CheckBoxHiddenInputRenderMode vlastnost na MvcViewOptions.HtmlHelperOptions . Například:

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

Předchozí kód zakáže skryté vykreslování vstupu pro zaškrtávací políčka nastavením CheckBoxHiddenInputRenderMode na CheckBoxHiddenInputRenderMode.None . Všechny dostupné režimy vykreslování najdete ve CheckBoxHiddenInputRenderMode výčtu.

Alternativy pomocné metody HTML k pomocné metodě značky vstupu

Html.TextBox, Html.TextBoxFor a Html.Editor mají Html.EditorFor překrývající se funkce pomocí pomocníka pro značky vstupu. Pomocná akce značky vstupu automaticky nastaví type atribut a Html.TextBox Html.TextBoxFor nebude. Html.Editor``Html.EditorFora zpracování kolekcí, složitých objektů a šablon; pomocná akce značek vstupu nefunguje. Pomocná metoda značky vstupu a Html.EditorFor Html.TextBoxFor jsou silného typu (používají výrazy lambda) a nejsou Html.TextBox Html.Editor (používají názvy výrazů).

HtmlAttributes

@Html.Editor()``@Html.EditorFor()a při spouštění ViewDataDictionary výchozích šablon použijte speciální položku s htmlAttributes názvem . Toto chování je volitelně rozšířeno pomocí additionalViewData parametrů. U klíče htmlAttributes se velká a malá písmena nerozlišovat. Klíč "htmlAttributes" se zpracovává podobně jako objekt předaný vstupním pomocným htmlAttributes objektům, jako je @Html.TextBox() .

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

Názvy výrazů

Hodnota asp-for atributu je a ModelExpression pravá strana výrazu lambda. Proto se asp-for="Property1" stane ve vygenerované kódu, což je důvod, proč není nutné za m => m.Property1 předponu Model . Pomocí znaku " " můžete spustit @ vložený výraz a přesunout se před m. :

@{
  var joe = "Joe";
}

<input asp-for="@joe">

Vygeneruje následující:

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

U vlastností asp-for="CollectionProperty[23].Member" kolekce vygeneruje stejný asp-for="CollectionProperty[i].Member" název, jako když má hodnotu i 23 .

Když ASP.NET Core MVC vypočítá hodnotu , prověří několik ModelExpression zdrojů, včetně ModelState . Vezměte v úvahu <input type="text" asp-for="@Name"> . valuePočítaný atribut je první hodnota, která není null:

• ModelState entry s klíčem "Name".
• Výsledek výrazu Model.Name .

Navigace v podřízených vlastnostech

K podřízeným vlastnostem můžete také přejít pomocí cesty k vlastnosti modelu zobrazení. Zvažte složitější třídu modelu, která obsahuje podřízené Address vlastnosti.

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

V zobrazení vytvoříme vazbu na 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>

Pro se vygeneruje následující kód Address.AddressLine1 HTML:

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

Názvy výrazů a kolekce

Ukázka, model obsahující pole Colors :

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

    public int Age { get; set; }
}

Metoda akce:

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

Následující příklad Razor ukazuje, jak získat přístup ke konkrétnímu Color prvku:

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

Šablona Views/Shared/EditorTemplates/String.cshtml:

@model string

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

Ukázka s využitím List<T> :

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

    public bool IsDone { get; set; }
}

Následující příklad Razor ukazuje, jak iterovat v kolekci:

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

Šablona Views/Shared/EditorTemplates/ToDoItem.cshtml:

@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 Pokud je to možné, měli byste použít , pokud se hodnota použije v asp-for Html.DisplayFor ekvivalentním kontextu nebo . Obecně je lepší než (pokud to scénář umožňuje), protože nemusí přidělovat enumerátor. Vyhodnocení indexeru ve výrazu LINQ však může být nákladné a mělo by být for foreach minimalizováno.

Pomocná nápověda značky textové oblasti

Pomocná Textarea Tag Helper funkce značky je podobná jako pomocná funkce značky vstupu.

• Generuje id name atributy a a atributy ověření dat z modelu pro <textarea> prvek.

• Poskytuje silné psaní.

• Alternativa pomocníka HTML: Html.TextAreaFor

Ukázka:

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>

Vygeneruje se následující kód HTML:

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

Pomocná nápověda značky popisku

• Vygeneruje for popisek popisku a <label> atribut u elementu pro název výrazu.

• Alternativa pomocníka HTML: Html.LabelFor .

Nabízí Label Tag Helper následující výhody v případě elementu s čistým popiskem HTML:

• Automaticky získáte hodnotu popisného popisku z Display atributu . Zamýšlený zobrazovaný název se může v průběhu času měnit a kombinace atributu a pomocníka značky popisku se použije Display Display všude, kde se používá.

• Méně kódu ve zdrojovém kódu

• Silné psaní s vlastností modelu

Ukázka:

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>

Pro element se vygeneruje následující <label> kód HTML:

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

Pomocná nápověda značky popisku vygenerovala hodnotu atributu for "E-mail", což je ID přidružené k <input> elementu . Pomocná rozhraní značek generují konzistentní id prvky a , aby je bylo možné správně for sdružovat. Titulek v této ukázce pochází z Display atributu . Pokud model atribut neobsahuje, titulek by Display byl název vlastnosti výrazu.

Pomocná zařízení značek ověřování

Existují dva pomocníci ověřovacích značek. Validation Message Tag Helper(zobrazí ověřovací zprávu pro jednu vlastnost v modelu) a (který zobrazuje Validation Summary Tag Helper souhrn chyb ověření). Přidá atributy ověření na straně klienta HTML5 ke vstupním prvkům na základě atributů datových poznámek Input Tag Helper ve třídách modelu. Ověřování se provádí také na serveru. Pomocná metoda ověřovací značky zobrazí tyto chybové zprávy, když dojde k chybě ověření.

Pomocný pomocník značek ověřovací zprávy

• Přidá atribut HTML5 data-valmsg-for="property" do prvku span , který připojí chybové zprávy ověřování ve vstupním poli zadané vlastnosti modelu. Když dojde k chybě ověřování na straně klienta, jQuery zobrazí chybovou zprávu v <span> elementu.

• Ověřování probíhá také na serveru. Klienti můžou mít zakázaný JavaScript a některé ověřování se dá dělat jenom na straně serveru.

• Alternativní pomocník HTML: Html.ValidationMessageFor

Se Validation Message Tag Helper používá s asp-validation-for atributem elementu span HTML.

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

Pomocný pomocník značek ověřovací zprávy vygeneruje následující kód HTML:

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

Obecně použijete Validation Message Tag Helper Input pomocníka značky pro stejnou vlastnost. Tím se zobrazí všechny chybové zprávy ověřování poblíž vstupu, který způsobil chybu.

Pokud dojde k chybě ověřování na straně serveru (například když máte zakázané vlastní ověřování na straně serveru nebo když je ověřování na straně klienta zakázané), MVC umístí tuto chybovou zprávu jako tělo <span> elementu.

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

Nápověda k souhrnným značkám ověřování

• Cílí <div> na elementy s asp-validation-summary atributem.

• Alternativní pomocník HTML: @Html.ValidationSummary

Validation Summary Tag HelperSlouží k zobrazení souhrnu ověřovacích zpráv. asp-validation-summaryHodnota atributu může být libovolná z následujících hodnot:

Ukázka

V následujícím příkladu má datový model DataAnnotation atributy, které generují chybové zprávy ověřování na <input> elementu. Pokud dojde k chybě ověřování, Pomocník pro ověření značky zobrazí chybovou zprávu:

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>

Generovaný kód HTML (Pokud je model platný):

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

Pomocná rutina pro výběr značky

• Generuje vybrané a přidružené prvky možností pro vlastnosti modelu.

• Má alternativu k Pomocníkovi HTML Html.DropDownListFor a Html.ListBoxFor

Select Tag Helper asp-for Určuje název vlastnosti modelu pro element Select a asp-items Určuje prvky možností . Například:

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

Ukázka:

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

IndexMetoda inicializuje CountryViewModel , nastaví vybranou zemi a předá ji do Index zobrazení.

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

Metoda HTTP POST Index zobrazuje výběr:

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

IndexZobrazení:

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

Který generuje následující HTML (s vybraným certifikačním úřadem):

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

asp-forHodnota atributu je zvláštní případ a nevyžaduje Model předponu, ostatní pomocné atributy značek (například asp-items ).

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

Vazba výčtu

Je často vhodné použít <select> s enum vlastností a generovat SelectListItem prvky z enum hodnot.

Ukázka:

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

GetEnumSelectListMetoda generuje SelectList objekt pro výčet.

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

Můžete označit seznam enumerátorů pomocí Display atributu pro získání bohatšího uživatelského rozhraní:

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

Vygeneruje se následující kód HTML:

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

Skupina možností

Element HTML <optgroup> je vygenerován, pokud model zobrazení obsahuje jeden nebo více SelectListGroup objektů.

CountryViewModelGroupSeskupí SelectListItem prvky do skupin "Severní Amerika" a "Evropa":

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

Níže jsou uvedené dvě skupiny:

Generovaný kód 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>

Vícenásobný výběr

Pomocník pro výběr značky automaticky vygeneruje atribut Multiple = Multiple , pokud je vlastnost zadaná v asp-for atributu IEnumerable . Například s ohledem na následující 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"}
         };
    }
}

S následujícím zobrazením:

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

Generuje následující kód 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>

Žádný výběr

Pokud se vám na více stránkách používá možnost neurčeno, můžete vytvořit šablonu pro odstranění opakujícího se kódu HTML:

@model CountryViewModel

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

Šablona views/Shared/EditorTemplates/CountryViewModel. cshtml :

@model CountryViewModel

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

Přidávání prvků jazyka HTML <option> není omezeno pouze na případ výběru . Například následující metoda zobrazení a akce vygeneruje HTML podobný kódu výše:

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>

V <option> závislosti na aktuální hodnotě bude vybrán správný prvek (obsahující selected="selected" atribut) Country .

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>

Další zdroje informací

• Pomocná zařízení značek v ASP.NET Core
• Element HTML Form
• Žádost o ověření tokenu
• Vazby modelu v ASP.NET Core
• ověření modelu ve ASP.NET Core MVC
• Rozhraní IAttributeAdapter
• Fragmenty kódu pro tento dokument