Pomocnicy tagów w formularzach w programie ASP.NET Core

Przez Rick Anderson, N. Taylor Mullen, Dave Paquette i Jerrie Pelser

Ten dokument przedstawia pracę z formularzami i elementami HTML często używanymi w formularzu. Element formularza HTML jest podstawowym mechanizmem używanym przez aplikacje internetowe do wysyłania danych z powrotem na serwer. W większości tego dokumentu opisano pomocników tagów i sposób, w jaki mogą one pomóc w wydajnym tworzeniu niezawodnych formularzy HTML. Przed przeczytaniem tego dokumentu zalecamy przeczytanie tematu Introduction to Tag Helpers (Wprowadzenie do pomocników tagów ).

W wielu przypadkach pomocnicy HTML zapewniają alternatywne podejście do określonego pomocnika tagów. Należy jednak pamiętać, że pomocnicy tagów nie zastępują pomocników HTML i nie ma pomocnika tagów dla każdego pomocnika HTML. Jeśli istnieje alternatywa pomocnika HTML, jest ona wymieniona.

Pomocnik tagu formularza

Pomocnik tagu formularza:

• Generuje wartość atrybutu HTML FORM dla akcji kontrolera MVC lub nazwanej trasy.

• Generuje ukryty token weryfikacji żądania , aby zapobiec fałszerzowaniu żądania między witrynami (w przypadku użycia z atrybutem [ValidateAntiForgeryToken] w metodzie akcji Post HTTP).

• asp-route-<Parameter Name> Udostępnia atrybut , w którym <Parameter Name> jest dodawany do wartości trasy. Parametry routeValues do Html.BeginForm i Html.BeginRouteForm zapewniają podobne funkcje.

• Istnieje alternatywa dla HTML Helper Html.BeginForm i Html.BeginRouteForm.

Przykład:

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

Poprzedni pomocnik tagu formularza generuje następujący kod HTML:

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

Środowisko uruchomieniowe MVC generuje wartość atrybutu action z atrybutów Pomocnika tagów formularzy asp-controller i asp-action. Pomocnik tagu formularza generuje również ukryty token weryfikacji żądania, aby zapobiec fałszerzowaniu żądań między witrynami (w przypadku użycia z atrybutem [ValidateAntiForgeryToken] w metodzie akcji Post HTTP). Ochrona czystego formularza HTML przed fałszerstwami żądań międzywitrynowych jest trudna, ale Pomocnik Tagów Formularza udostępnia tę usługę.

Używanie nazwanej trasy

Atrybut asp-route Pomocnika tagów może również generować znaczniki dla atrybutu HTML action . Aplikacja z trasą o nazwie register może używać następującego znacznika dla strony rejestracji:

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

Wiele widoków w folderze Views/Account (generowanych podczas tworzenia nowej aplikacji internetowej z kontami indywidualnymi) zawiera atrybut asp-route-returnurl :

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

Pomocnik tagu akcji formularza

Pomocnik tagu akcji formularza generuje atrybut na wygenerowanym tagu formaction lub <button ...>. Atrybut formaction określa, gdzie formularz przesyła dane. Wiąże się z elementami wejściowymi<> typu oraz elementamiimage przycisku<>. Pomocnik tagu akcji formularza umożliwia użycie kilku atrybutów elementu AnchorTagHelperasp-, aby kontrolować, jaki formaction link jest generowany dla odpowiedniego elementu.

Obsługiwane atrybuty AnchorTagHelper do kontrolowania wartości formaction

Przykład przesyłania do kontrolera

Poniższy znacznik przesyła formularz do akcji IndexHomeController po wybraniu danych wejściowych lub przycisku:

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

Poprzedni znacznik generuje następujący kod HTML:

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

Wyślij na przykładową stronę

Następujący znacznik przesyła formularz do AboutRazor strony:

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

Poprzedni znacznik generuje następujący kod HTML:

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

Przykład przesyłania do trasy

Rozważmy /Home/Test punkt końcowy:

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

Poniższy znacznik przesyła formularz do punktu końcowego /Home/Test .

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

Poprzedni znacznik generuje następujący kod HTML:

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

Pomocnik tagu wejściowego

Pomocnik tagów wejściowych wiąże element HTML <wejściowy> z wyrażeniem modelu w widoku Razor.

Składnia:

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

Pomocnik tagów wejściowych:

• Generuje atrybuty HTML id i name dla nazwy wyrażenia określonego w atrybucie asp-for. asp-for="Property1.Property2" jest równoważne z m => m.Property1.Property2. Nazwa wyrażenia jest używana dla wartości atrybutu asp-for . Aby uzyskać więcej informacji, zobacz sekcję Nazwy wyrażeń .

• Ustawia wartość atrybutu HTML type na podstawie typu modelu i atrybutów adnotacji danych zastosowanych do właściwości modelu.

• Nie zastąpi wartości atrybutu HTML type po określeniu.

• Generuje atrybuty weryfikacji HTML5 na podstawie atrybutów adnotacji danych zastosowanych do właściwości modelu.

• Funkcja pomocnika HTML, która nakłada się na Html.TextBoxFor i Html.EditorFor. Aby uzyskać szczegółowe informacje, zobacz sekcję alternatywy dla pomocnika tagu wejściowego — pomocnik HTML.

• Zapewnia silne typowanie. Jeśli nazwa właściwości ulegnie zmianie i nie zaktualizujesz pomocnika tagów, zostanie wyświetlony błąd podobny do następującego:

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

Pomocnik Input tagów ustawia atrybut HTML type na podstawie typu .NET. W poniższej tabeli wymieniono niektóre typowe typy platformy .NET i wygenerowany typ HTML (nie każdy typ platformy .NET jest wymieniony).

W poniższej tabeli przedstawiono niektóre typowe atrybuty adnotacji danych, które pomocnik tagu input mapuje na określone typy pól wejściowych (nie wymieniono wszystkich atrybutów walidacji).

Przykład:

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>

Powyższy kod generuje następujący kod 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>

Adnotacje danych zastosowane do właściwości Email i Password generują metadane na modelu. Pomocnik tagów wejściowych używa metadanych modelu i generuje atrybuty HTML5data-val-* (zobacz Walidacja modelu). Te atrybuty opisują moduły sprawdzania poprawności do dołączania do pól wejściowych. Zapewnia to nieinwazyjną walidację HTML5 i jQuery. Atrybuty niestrudne mają format data-val-rule="Error Message", gdzie reguła jest nazwą reguły walidacji (np data-val-required. , data-val-email, data-val-maxlengthitp.). Jeśli w atrybucie zostanie podany komunikat o błędzie, zostanie wyświetlony jako wartość atrybutu data-val-rule . Istnieją również atrybuty formularza data-val-ruleName-argumentName="argumentValue" , które zawierają dodatkowe szczegóły dotyczące reguły, na przykład data-val-maxlength-max="1024" .

W przypadku powiązania wielu kontrolek input z tą samą właściwością, wygenerowane kontrolki współdzielą ten sam element id, co sprawia, że wygenerowany znacznik jest nieprawidłowy. Aby zapobiec duplikatom, określ id atrybut dla każdej kontrolki jawnie.

Pole wyboru ukrytego renderowania danych wejściowych

Pola wyboru w kodzie HTML5 nie przesyłają wartości, gdy nie są zaznaczone. Aby włączyć wysyłanie wartości domyślnej dla niezaznaczonego pola wyboru, pomocnik tagu wejściowego generuje dodatkowe ukryte dane wejściowe dla pól wyboru.

Rozważmy na przykład następujący Razor znacznik, który używa pomocnika tagów wejściowych dla właściwości IsCheckedmodelu logicznego:

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

Razor Powyższy znacznik generuje znaczniki HTML podobne do następujących:

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

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

Powyższy znacznik HTML przedstawia dodatkowe ukryte dane wejściowe o nazwie IsChecked i wartości false. Domyślnie ukryte dane wejściowe są renderowane na końcu formularza. Po przesłaniu formularza:

• Jeśli pole wyboru IsChecked jest zaznaczone, zarówno true, jak i false są przesyłane jako wartości.
• IsChecked Jeśli dane wejściowe pola wyboru są niezaznaczone, zostanie przesłana tylko ukryta wartość false wejściowa.

Proces powiązywania modelu w ASP.NET Core odczytuje tylko pierwszą wartość podczas wiązania z wartością bool, co skutkuje true dla zaznaczonych pól wyboru i false dla niezaznaczonych pól wyboru.

Aby skonfigurować zachowanie renderowania ukrytego elementu wejściowego, ustaw właściwość CheckBoxHiddenInputRenderMode na MvcViewOptions.HtmlHelperOptions. Na przykład:

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

Powyższy kod wyłącza ukryte renderowanie danych wejściowych dla pól wyboru, ustawiając wartość CheckBoxHiddenInputRenderMode .CheckBoxHiddenInputRenderMode.None Aby zapoznać się ze wszystkimi dostępnymi trybami renderowania, zobacz wyliczenie CheckBoxHiddenInputRenderMode .

Pomocnik HTML alternatywy dla pomocnika tagów wejściowych

Html.TextBox, Html.TextBoxFor, Html.Editor i Html.EditorFor mają nakładające się funkcje z pomocnikiem tagów wejściowych. Pomocnik tagów wejściowych type automatycznie ustawi atrybut, ale Html.TextBox i Html.TextBoxFor tego nie zrobią. Html.Editor i Html.EditorFor obsługują kolekcje, złożone obiekty i szablony; pomocnik tagów wejściowych tego nie robi. Pomocnik tagów wejściowych, Html.EditorFor i Html.TextBoxFor są silnie typizowane (używają wyrażeń lambda), Html.TextBox i Html.Editor nie są (używają nazw wyrażeń).

Atrybuty HTML

@Html.Editor() i @Html.EditorFor() używają specjalnego ViewDataDictionary wpisu o nazwie htmlAttributes podczas wykonywania ich domyślnych szablonów. To zachowanie jest opcjonalnie rozszerzone przy użyciu additionalViewData parametrów. Klucz "htmlAttributes" jest nieczuły na wielkość liter. Klucz "htmlAttributes" jest obsługiwany podobnie do htmlAttributes przekazywanego jako obiekt do pomocników wejściowych, takich jak @Html.TextBox().

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

Nazwy wyrażeń

Wartość atrybutu asp-for to ModelExpression oraz jest prawą stroną wyrażenia lambda. asp-for="Property1" W związku z tym staje się m => m.Property1 w wygenerowanym kodzie, czemu nie trzeba używać prefiksu Model. Możesz użyć znaku "@", aby rozpocząć wyrażenie wbudowane i przesunąć przed znakiem m.:

@{
  var joe = "Joe";
}

<input asp-for="@joe">

Generuje następujące elementy:

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

W przypadku właściwości asp-for="CollectionProperty[23].Member" kolekcji generuje taką samą nazwę, jak asp-for="CollectionProperty[i].Member" w przypadku, gdy i ma wartość 23.

Gdy ASP.NET Core MVC oblicza wartość ModelExpression, sprawdza kilka źródeł, w tym ModelState. Rozważmy<input type="text" asp-for="Name">. Atrybut obliczeniowy value jest pierwszą wartością inną niż null:

• ModelState wpis z kluczem "Nazwa".
• Wynik wyrażenia Model.Name.

Nawigowanie po właściwościach podrzędnych

Możesz również przejść do właściwości podrzędnych przy użyciu ścieżki właściwości modelu widoku. Rozważ bardziej złożoną klasę modelu zawierającą właściwość podrzędną Address .

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

W widoku wiążemy się z elementem 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>

Następujący kod HTML jest generowany dla elementu Address.AddressLine1:

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

Nazwy wyrażeń i kolekcje

Przykładowy model zawierający tablicę Colors:

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

    public int Age { get; set; }
}

Metoda akcji:

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

Razor Poniżej przedstawiono sposób uzyskiwania dostępu do określonego Color elementu:

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

Szablon Views/Shared/EditorTemplates/String.cshtml :

@model string

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

Przykład użycia List<T>:

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

    public bool IsDone { get; set; }
}

Poniższy Razor pokazuje, jak iterować przez zbiór:

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

Szablon 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 należy używać, jeśli to możliwe, gdy wartość będzie stosowana w kontekście równoważnym asp-for lub Html.DisplayFor. Ogólnie rzecz biorąc, for jest lepszy niż foreach (jeśli scenariusz go umożliwia), ponieważ nie musi przydzielić modułu wyliczającego, jednak ocena indeksatora w wyrażeniu LINQ może być kosztowna i powinna być zminimalizowana.

Pomocnik tagu obszaru tekstowego

Textarea Tag Helper Pomocnik tagu jest podobny do pomocnika tagów wejściowych.

• Generuje atrybuty id i name oraz atrybuty weryfikacji danych z modelu dla elementu <textarea>.

• Zapewnia silne typowanie.

• Alternatywa pomocnika HTML: Html.TextAreaFor.

Przykład:

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>

Generowany jest następujący kod 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>

Pomocnik tagów etykiet

• Generuje etykietę i atrybut for na elemencie <label> dla nazwy wyrażenia.

• Alternatywa pomocnika HTML: Html.LabelFor.

Zapewnia Label Tag Helper następujące korzyści w porównaniu do czystego elementu etykiety HTML:

• Automatycznie uzyskujesz wartość etykiety opisowej z atrybutu Display . Docelowa nazwa wyświetlana może się zmienić z czasem, a kombinacja atrybutu Display i Pomocnika Tagów Display będzie stosowana wszędzie tam, gdzie zostanie użyta.

• Mniej znaczników w kodzie źródłowym.

• Silne typowanie za pomocą cechy modelu.

Przykład:

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>

Dla elementu <label> jest generowany następujący kod HTML:

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

Pomocnik tagów etykiet wygenerował wartość atrybutu for, który wynosi "Email" i jest identyfikatorem skojarzonym z elementem <input>. Pomocnicy tagów generują spójne id i for elementy, aby można je było poprawnie skojarzyć. Podpis w tym przykładzie pochodzi z atrybutu Display . Jeśli model nie zawiera atrybutu Display , podpis będzie nazwą właściwości wyrażenia. Aby zastąpić podpis domyślny, dodaj podpis wewnątrz tagu etykiety.

Pomocnicy tagów walidacji

Istnieją dwie pomocniki tagów weryfikacji. Element Validation Message Tag Helper (który wyświetla komunikat weryfikacji dla pojedynczej właściwości modelu) i Validation Summary Tag Helper (który wyświetla podsumowanie błędów walidacji). Element Input Tag Helper dodaje atrybuty weryfikacji po stronie klienta HTML5 do elementów wejściowych na podstawie atrybutów adnotacji danych w klasach modelu. Walidacja jest również wykonywana na serwerze. Pomocnik tagu weryfikacji wyświetla te komunikaty o błędach po wystąpieniu błędu walidacji.

Pomocnik tagu komunikatu sprawdzania poprawności

• Dodaje atrybut HTML5data-valmsg-for="property" do elementu span, który dołącza komunikaty o błędach walidacji w polu wejściowym określonej właściwości modelu. Po wystąpieniu błędu weryfikacji po stronie klienta zapytanie jQuery wyświetla komunikat o błędzie w elemecie <span> .

• Walidacja odbywa się również na serwerze. Klienci mogą mieć wyłączony język JavaScript, a niektóre weryfikacje można wykonać tylko po stronie serwera.

• Alternatywa pomocnika HTML: Html.ValidationMessageFor.

Parametr Validation Message Tag Helper jest używany z atrybutem asp-validation-for w elemecie span HTML.

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

Pomocnik tagu komunikatu weryfikacji wygeneruje następujący kod HTML:

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

Zwykle używasz Validation Message Tag Helper po pomocniku tagów Input dla tej samej właściwości. Spowoduje to wyświetlenie wszystkich komunikatów o błędach walidacji w pobliżu danych wejściowych, które spowodowały błąd.

W przypadku wystąpienia błędu weryfikacji po stronie serwera (na przykład gdy masz niestandardową weryfikację po stronie serwera lub weryfikacja po stronie klienta jest wyłączona), MVC umieszcza ten komunikat o błędzie jako treść <span> elementu.

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

Pomocnik tagu podsumowania walidacji

• Celuje w elementy <div> z atrybutem asp-validation-summary.

• Alternatywa pomocnika HTML: @Html.ValidationSummary.

Element Validation Summary Tag Helper służy do wyświetlania podsumowania komunikatów weryfikacji. Wartość atrybutu asp-validation-summary może być dowolna z następujących:

Przykład

W poniższym przykładzie model danych ma DataAnnotation atrybuty, które generują komunikaty o błędach walidacji w elemecie <input> . Po wystąpieniu błędu sprawdzania poprawności pomocnik tagu weryfikacji wyświetla komunikat o błędzie:

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>

Wygenerowany kod HTML (gdy model jest prawidłowy):

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

Pomocnik wybierania tagów

• Generuje elementy select i skojarzone z nimi elementy option dla właściwości Twojego modelu.

• Istnieje alternatywa dla HTML Helper Html.DropDownListFor i Html.ListBoxFor.

Element Select Tag Helperasp-for określa nazwę właściwości modelu dla elementu select i asp-items określa elementy opcji . Na przykład:

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

Przykład:

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

Metoda Index inicjuje CountryViewModel, ustawia wybrany kraj i przekazuje go do widoku Index.

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

Metoda HTTP POST Index wyświetla wybó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);
}

Widok Index :

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

Spowoduje to wygenerowanie następującego kodu HTML (przy użyciu wybranego przycisku "CA"):

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

Wartość atrybutu asp-for jest specjalnym przypadkiem i nie wymaga prefiksu Model . Inne atrybuty pomocnika tagów działają (takie jak asp-items).

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

Powiązanie Enum

Często wygodne jest używanie <select> z właściwością enum i generowanie SelectListItem elementów na podstawie enum wartości.

Przykład:

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

Metoda GetEnumSelectList generuje obiekt SelectList dla wyliczenia.

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

Możesz oznaczyć listę modułów wyliczania za pomocą atrybutu Display , aby uzyskać bogatszy interfejs użytkownika:

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

Generowany jest następujący kod 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>

Grupa opcji

Element HTML <optgroup> jest generowany, gdy model widoku zawiera co najmniej jeden SelectListGroup obiekt.

Element CountryViewModelGroup grupuje elementy SelectListItem w grupy "Ameryka Północna" i "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; }

Dwie grupy są wyświetlane w następujący sposób:

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

Wybór wielokrotny

Pomocnik wyboru tagu automatycznie wygeneruje atrybut multiple = "multiple", jeśli właściwość określona w atrybucie asp-for jest IEnumerable. Na przykład biorąc pod uwagę następujący 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"}
         };
    }
}

W następującym widoku:

@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 następujący kod 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>

Brak zaznaczenia

Jeśli często używasz opcji "nieokreślonej" na wielu stronach, możesz utworzyć szablon, aby wyeliminować powtarzanie kodu HTML.

@model CountryViewModel

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

Szablon Views/Shared/EditorTemplates/CountryViewModel.cshtml :

@model CountryViewModel

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

Dodawanie elementów HTML <option> nie jest ograniczone do przypadku brak wyboru. Na przykład następujący widok i metoda akcji wygenerują kod HTML podobny do poprzedniego kodu:

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>

Prawidłowy element <option> zostanie wybrany (zawierający atrybut selected="selected") w zależności od bieżącej wartości 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>

Dodatkowe zasoby

• Pomocnicy tagów na platformie ASP.NET Core
• element formularza HTML
• Żądanie tokenu weryfikacji
• Powiązanie modelu w ASP.NET Core
• Walidacja modelu w usłudze ASP.NET Core MVC
• Interfejs IAttributeAdapter
• Fragmenty kodu dla tego dokumentu