Segítők címkézése űrlapokon a ASP.NET Core-ban

Készítette: Rick Anderson, N. Taylor Mullen, Dave Paquette és Jerrie Pelser

Ez a dokumentum bemutatja az űrlapok és az űrlapokon gyakran használt HTML-elemek használatát. A HTML-űrlap elem biztosítja az elsődleges mechanizmust, amelyet a webalkalmazások az adatok kiszolgálóra történő közzétételéhez használnak. A dokumentum nagy része leírja a címkesegítőket , és azt, hogyan segíthetnek hatékony HTML-űrlapok létrehozásában. Javasoljuk, hogy a dokumentum elolvasása előtt olvassa el a Címkék segítőinek bemutatása című cikket.

A HTML-segítők sok esetben alternatív megközelítést biztosítanak egy adott címkesegítőhöz, de fontos felismerni, hogy a címkesegítők nem helyettesítik a HTML-segítőket, és nem mindegyik HTML-segítőhöz tartozik címkesegítő. Ha létezik EGY HTML-segéd alternatíva, azt megemlítjük.

Az űrlap címkeelem segítője

Az Űrlap címke segítő:

Létrehozza a HTML <FORM>action attribútum értékét egy MVC-vezérlőművelethez vagy egy elnevezett útvonalhoz
Létrehoz egy rejtett kérés-ellenőrzési jogkivonatot a helyek közötti hamisítás megakadályozása érdekében (ha a HTTP Post művelet metódusban az [ValidateAntiForgeryToken] attribútummal együtt használják)
Megadja az asp-route-<Parameter Name> attribútumot, amely <Parameter Name> hozzá lesz adva az útvonalértékekhez. A routeValues paraméterek Html.BeginForm és Html.BeginRouteForm hasonló funkciókat biztosítanak.
Van egy HTML-segéd alternatíva Html.BeginForm , és Html.BeginRouteForm

Minta:

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

A fenti űrlapcímke-segéd a következő HTML-t hozza létre:

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

Az MVC futtatókörnyezet a action attribútumértéket az űrlap címke segéd attribútumaiból, asp-controller és asp-action, generálja. Az űrlapcímke-segéd emellett létrehoz egy rejtett kérés-ellenőrzési jogkivonatot is, amely megakadályozza a helyek közötti kérések hamisítását (ha a HTTP Post művelet metódusban az [ValidateAntiForgeryToken] attribútummal együtt használják). A tiszta HTML-űrlapok helyközi hamisítás elleni védelme nehéz, az űrlapcímke-segéd biztosítja ezt a szolgáltatást.

Névvel ellátott útvonal használata

A asp-route Tag Helper attribútum a HTML-attribútumhoz action is létrehozhat korrektúrát. Egy útvonal nevű register alkalmazás a következő jelölést használhatja a regisztrációs oldalhoz:

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

A Nézetek/Fiók mappa számos nézete (amely akkor jön létre, amikor egyéni fiókokkal hoz létre új webalkalmazást) tartalmazza az asp-route-returnurl attribútumot:

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

Megjegyzés:

A beépített sablonok csak akkor lesznek automatikusan feltöltve, returnUrl ha egy engedélyezett erőforráshoz próbál hozzáférni, de nincsenek hitelesítve vagy engedélyezve. Ha jogosulatlan hozzáférést próbál meg, a biztonsági köztes szoftver átirányítja a bejelentkezési lapra a returnUrl készlettel.

Az űrlapművelet címkék segítője

Az űrlapműveletcímke-segéd létrehozza az formaction attribútumot a létrehozott <button ...> vagy <input type="image" ...> címkén. Az formaction attribútum szabályozza, hogy az űrlap hol küldi el az adatait. Az <bemeneti> és image típusú elemekhez kapcsolódik. Az űrlapműveletcímke-segéd lehetővé teszi több AnchorTagHelperasp- attribútum használatát annak szabályozásához, hogy milyen formaction hivatkozás jön létre a megfelelő elemhez.

Támogatott AnchorTagHelper attribútumok a következő érték szabályozásához formaction:

Jellemző	Leírás
asp-controller	A vezérlő neve.
asp-action	A műveletmetódus neve.
asp-area	A terület neve.
asp-page	A Razor oldal neve.
asp-page-handler	Az oldalkezelő neve: Razor.
asp-route	Az útvonal neve.
asp-route-{value}	Egyetlen URL-útvonalérték. Például: `asp-route-id="1234"`.
asp-összes-útvonal-adat	Minden útvonalérték.
asp-fragment	Az URL-töredék.

Küldés a vezérlőbe – példa

Az alábbi jelölés elküldi az űrlapot a IndexHomeController művelethez, amikor a bemenet vagy gomb ki van választva.

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

Az előző korrektúra a következő HTML-t hozza létre:

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

Küldés példaoldalra

Az alábbi korrektúra elküldi az űrlapot a AboutRazor lapnak:

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

Az előző korrektúra a következő HTML-t hozza létre:

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

Küldés az útvonal példába

Fontolja meg a végpontot /Home/Test :

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

Az alábbi korrektúra elküldi az űrlapot a /Home/Test végpontnak.

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

Az előző korrektúra a következő HTML-t hozza létre:

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

Beviteli címke segítő

A Beviteli tag segéd egy HTML <input> elemet köt egy modellkifejezéshez a razor nézetben.

Szintaxis:

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

A beviteli tag segítője:

Létrehozza a id és name HTML attribútumokat a asp-for attribútumban megadott kifejezésnév alapján. asp-for="Property1.Property2"egyenértékű a .-nak.m => m.Property1.Property2 Az attribútumértékhez asp-for a kifejezés neve használható. További információkért tekintse meg a Kifejezésnevek szakaszt.
A HTML-attribútum type értékét a modelltípus és a modelltulajdonságra alkalmazott adatjegyzet-attribútumok alapján állítja be
Nem írja felül a HTML-attribútum type értékét, ha meg van adva
HTML5-érvényesítési attribútumokat hoz létre a modelltulajdonságokra alkalmazott adatjegyzet-attribútumokból
Az HTML-segéd funkció átfedésben van a Html.TextBoxFor és Html.EditorFor elemekkel. A részletekért tekintse meg a Beviteli Tag Segéd alternatíváit a HTML Helper szakaszban.

Erős gépelést biztosít. Ha a tulajdonság neve megváltozik, és nem frissíti a címkesegítőt, a következőhöz hasonló hibaüzenet jelenik meg:

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

A Input Címkesegítő a .NET típus alapján állítja be a HTML-attribútumot type . Az alábbi táblázat felsorol néhány gyakori .NET-típust és létrehozott HTML-típust (nem minden .NET-típus szerepel a listán).

.NET-típus	Bemeneti típus
Boole	típus="jelölőnégyzet"
Lánc	type="text"
Dátum/idő	type="datetime-local"
Bájt	type="szám"
Int	type="szám"
Egy- és kétszemélyes	type="szám"

Az alábbi táblázat néhány gyakori adatjegyzet-attribútumot mutat be, amelyeket a bemeneti címke segédje adott bemeneti típusokra képez le (nem minden érvényesítési attribútum szerepel a listában):

Jellemző	Bemeneti típus
[E-mail cím]	type="e-mail"
[URL]	type="url"
[HiddenInput]	type="hidden"
[Telefon]	type="tel"
[DataType(DataType.Password)]	type="password"
[DataType(DataType.Date)]	type="date"
[DataType(DataType.Time)]	type="time"

Minta:

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>

A fenti kód a következő HTML-t hozza létre:

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

Az Email és Password tulajdonságokra alkalmazott adatjegyzetek metaadatokat hoznak létre a modellen. A beviteli címke segédje felhasználja a modell metaadatait, és HTML5-attribútumokatdata-val-* hoz létre (lásd : Modellérvényesítés). Ezek az attribútumok a bemeneti mezőkhöz csatolandó érvényesítőket írják le. Ez nem zavaró HTML5- és jQuery-ellenőrzést biztosít. A nem zavaró attribútumok formátuma data-val-rule="Error Message", ahol a szabály az érvényesítési szabály neve (például data-val-required, data-val-email, data-val-maxlengthstb.) Ha az attribútumban hibaüzenet jelenik meg, az az attribútum értékeként data-val-rule jelenik meg. Az űrlapnak data-val-ruleName-argumentName="argumentValue" vannak olyan attribútumai is, amelyek további részleteket nyújtanak a szabályról, például data-val-maxlength-max="1024" .

Ha több vezérlőt köt input ugyanarra a tulajdonságra, a létrehozott vezérlők azonosak id, ami érvénytelensé teszi a létrehozott korrektúrajelet. Az ismétlődések elkerülése érdekében explicit módon adja meg az id egyes vezérlők attribútumát.

A jelölőnégyzet rejtett bevitelének megjelenítése

A HTML5-ben lévő jelölőnégyzetek nem küldenek értéket, ha nincsenek bejelölve. Annak érdekében, hogy alapértelmezett érték legyen elküldve egy nem bejelölt jelölőnégyzethez, a beviteli címkék súgója egy további rejtett bemenetet generál a jelölőnégyzetek számára.

Vegyük például a következő Razor jelölést, amely az Input Tag Helper-ként ismert segédet használja egy logikai modell tulajdonsághoz IsChecked:

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

A fenti Razor jelölés a következőhöz hasonló HTML-jelölést hoz létre:

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

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

Az előző HTML-jelölés egy további rejtett bemenetet jelenít meg, amelynek neve IsChecked és értéke false. Alapértelmezés szerint ez a rejtett bemenet az űrlap végén jelenik meg. Az űrlap elküldésekor:

Ha a IsChecked jelölőnégyzet bemenete be van jelölve, mindkettő truefalse értékként lesz elküldve.
Ha a IsChecked jelölőnégyzet bemenete nincs bejelölve, a rendszer csak a rejtett bemeneti értéket false küldi el.

Az ASP.NET Core modellkötési folyamata csak az első értéket olvassa be, amikor egy bool értékhez van kötés, ami true eredményez a bejelölt jelölőnégyzetek esetén és false a nem bejelölt jelölőnégyzeteknél.

A rejtett bemeneti renderelés viselkedésének konfigurálásához állítsa be a CheckBoxHiddenInputRenderMode tulajdonságot a MvcViewOptions.HtmlHelperOptions elemen. Például:

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

Az előző kód letiltja a rejtett beviteli renderelést a jelölőnégyzetekhez a következő beállítással CheckBoxHiddenInputRenderModeCheckBoxHiddenInputRenderMode.None: . Az összes elérhető renderelési mód esetében lásd az enumerálást CheckBoxHiddenInputRenderMode .

HTML-segítő alternatívák az Input Tag Helper helyett

Html.TextBox, Html.TextBoxFor, Html.Editor és Html.EditorFor átfedésben vannak az Input Tag Helperrel. A beviteli címke súgója automatikusan beállítja az type attribútumot, Html.TextBox és Html.TextBoxFor nem. Html.Editor és Html.EditorFor kezelheti a gyűjteményeket, az összetett objektumokat és a sablonokat; a beviteli címke súgója nem. A beviteli címke segédje, Html.EditorFor és Html.TextBoxFor erősen be van állítva (lambdakifejezéseket használnak), Html.TextBox és Html.Editor nem (kifejezésneveket használnak).

HTML attribútumok

@Html.Editor() és @Html.EditorFor() a speciális ViewDataDictionary bejegyzést használják, amelyet htmlAttributes-nek neveznek az alapértelmezett sablonok végrehajtásakor. A viselkedést opcionálisan a additionalViewData paraméterekkel lehet kibővíteni. Az "htmlAttributes" kulcs nem érzékeny a kis- és nagybetűkre. A "htmlAttributes" kulcs kezelése hasonlóan történik, mint a htmlAttributes bemeneti segítőknek @Html.TextBox()átadott objektum.

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

Kifejezésnevek

Az asp-for attribútum értéke ModelExpression és egy lambda kifejezés jobb oldala. asp-for="Property1" tehát m => m.Property1 lesz a létrehozott kódban, ezért nem szükséges előtagot hozzáadni Model-hez. A "@" karakter használatával inline kifejezést indíthat, és a m.következő elé léphet:

@{
  var joe = "Joe";
}

<input asp-for="@joe">

A következőket hozza létre:

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

A gyűjteménytulajdonságokkal asp-for="CollectionProperty[23].Member" ugyanazt a nevet hozza létre, mint asp-for="CollectionProperty[i].Member", amikor a i értéke 23.

Ha ASP.NET Core MVC kiszámítja ModelExpressionaz értékét, több forrást is figyelembe kell vennie, többek között ModelState. Fontolja meg <input type="text" asp-for="Name">. A számított value attribútum az első nem null érték a következőből:

ModelState "Name" nevű bejegyzés kulccsal.
A kifejezés Model.Nameeredménye.

Gyermektulajdonságok navigálása

A gyermektulajdonságokra a nézetmodell tulajdonságútvonalán keresztül is navigálhat. Vegyünk egy összetettebb modellosztályt, amely tartalmaz egy gyermektulajdonságot 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; }
}

Ebben a nézetben a következőhöz Address.AddressLine1kötődünk:

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

A következő HTML generálódik a(z) Address.AddressLine1 számára:

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

Kifejezésnevek és gyűjtemények

Minta, a következő tömböt Colorstartalmazó modell:

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

    public int Age { get; set; }
}

A műveleti módszer:

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

Az alábbiakban Razor bemutatjuk, hogyan férhet hozzá egy adott Color elemhez:

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

A Views/Shared/EditorTemplates/String.cshtml sablon:

@model string

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

Minta a következő használatával List<T>:

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

    public bool IsDone { get; set; }
}

A következő Razor bemutatja, hogyan lehet iterálni egy gyűjteményen:

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

A Views/Shared/EditorTemplates/ToDoItem.cshtml sablon:

@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 ha lehetséges, akkor kell használni, ha az értéket egy asp-for vagy Html.DisplayFor azzal egyenértékű környezetben fogják használni. Általában jobb, for mint foreach (ha a forgatókönyv lehetővé teszi), mert nem kell enumerátort lefoglalnia; azonban a LINQ-kifejezések indexelőinek kiértékelése költséges lehet, és minimálisra kell csökkenteni.

Megjegyzés:

A fenti kommentált mintakód bemutatja, hogyan cserélné le a lambda kifejezést az @ operátorra, hogy elérje a lista minden ToDoItem elemét.

A Textarea címke segéd

A Textarea Tag Helper címkesegítő hasonló a Beviteli címke segédhöz.

Létrehozza a id és name attribútumokat, valamint az adatérvényesítési attribútumokat a modellből egy <textarea> elemhez.
Erős gépelést biztosít.
HTML-segéd alternatíva: Html.TextAreaFor

Minta:

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>

A következő HTML jön létre:

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

** A címkesegéd

A címke feliratát és for attribútumát hozza létre egy <címkeelemen a kifejezésnévhez>.
HTML-segéd alternatíva: Html.LabelFor.

A Label Tag Helper következő előnyöket nyújtja egy tiszta HTML-címkeelemnél:

Az attribútumból automatikusan lekérheti a leíró címkeértéket Display . A kívánt megjelenítendő név idővel változhat, és a Display attribútum és a címke-címke segéd kombinációja mindenhol alkalmazni fogja a Display értéket, ahol azt használták.
Kevesebb jelölés a forráskódban
Erős gépelés a modelltulajdonságokkal.

Minta:

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>

Az alábbi HTML generálódik a <label> elemhez:

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

A Címke Label Segéd létrehozta az for "Email" attribútumértéket, amely az <input> elemhez társított azonosító. A címkesegítők konzisztens id és for elemeket hoznak létre, hogy megfelelően lehessen őket társítani. A minta felirata az Display attribútumból származik. Ha a modell nem tartalmaz attribútumot Display , a felirat a kifejezés tulajdonságneve lesz. Az alapértelmezett felirat felülbírálásához adjon hozzá egy feliratot a címkecímkéhez.

Az érvényesítési címkesegítők

Két érvényesítési címke segítője van. A Validation Message Tag Helper (modell egyetlen tulajdonságára vonatkozó érvényesítési üzenetet megjelenítő) és a Validation Summary Tag Helper (az érvényesítési hibák összegzését megjelenítő) üzenet. A Input Tag Helper HTML5 ügyféloldali érvényesítési attribútumokat ad hozzá a bemeneti elemekhez a modellosztályok adatjegyzet-attribútumai alapján. Az ellenőrzés a kiszolgálón is történik. Az érvényesítési címke súgója érvényesítési hiba esetén megjeleníti ezeket a hibaüzeneteket.

Az érvényesítési üzenetcímke súgója

Hozzáadja a HTML5data-valmsg-for="property" attribútumot a span elemhez, amely csatolja az érvényesítési hibaüzeneteket a megadott modelltulajdonság bemeneti mezőjéhez. Ügyféloldali érvényesítési hiba esetén a jQuery megjeleníti a hibaüzenetet az <span> elemben.
Az ellenőrzés a kiszolgálón is megtörténik. Előfordulhat, hogy az ügyfeleknél le van tiltva a JavaScript, és bizonyos ellenőrzés csak a kiszolgáló oldalán végezhető el.
HTML-segéd alternatíva: Html.ValidationMessageFor

Ez Validation Message Tag Helper egy asp-validation-forHTML-span elem attribútumával együtt használatos.

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

Az érvényesítési üzenetcímke-segéd a következő HTML-t hozza létre:

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

Általában ugyanahhoz a tulajdonsághoz használja az Validation Message Tag Helper after an Input Tag Helpert. Ezzel megjelenít minden érvényesítési hibaüzenetet a hibát okozó bemenet közelében.

Megjegyzés:

Az ügyféloldali ellenőrzéshez feltétlenül rendelkeznie kell megfelelő JavaScript- és jQuery-szkripthivatkozásokkal. További információt a Modellérvényesítés című témakörben talál.

Kiszolgálóoldali érvényesítési hiba (például ha egyéni kiszolgálóoldali ellenőrzés vagy ügyféloldali ellenőrzés le van tiltva), az MVC az elem törzseként helyezi el a <span> hibaüzenetet.

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

Az érvényesítési összefoglaló címke súgója

Azokat az elemeket célozza meg, amelyek rendelkeznek a(z) <div> attribútummal asp-validation-summary
HTML-segéd alternatíva: @Html.ValidationSummary

A Validation Summary Tag Helper rendszer az érvényesítési üzenetek összegzését jeleníti meg. Az asp-validation-summary attribútum értéke az alábbiak bármelyike lehet:

ASP-érvényesítési összefoglaló	Érvényesítési üzenetek jelennek meg
`All`	Tulajdonság- és modellszint
`ModelOnly`	Modell
`None`	Egyik sem

Minta

Az alábbi példában az adatmodell attribútumokkal rendelkezik DataAnnotation , amelyek érvényesítési hibaüzeneteket hoznak létre az <input> elemen. Érvényesítési hiba esetén az érvényesítési címke súgója a következő hibaüzenetet jeleníti meg:

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>

A létrehozott HTML (ha a modell érvényes):

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

A Címkekiválasztó Segéd

Létrehozza a select és az ahhoz tartozó opció elemeket a modell tulajdonságaihoz.
Van egy HTML-segéd alternatíva Html.DropDownListFor , és Html.ListBoxFor

Ez Select Tag Helperasp-for megadja a modelltulajdonság nevét a kiválasztási elemhez, és asp-items megadja a beállításelemeket . Például:

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

Minta:

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

A Index metódus inicializálja a CountryViewModel-t, beállítja a kiválasztott országot, és átadja a Index nézetnek.

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

A HTTP POST Index metódus megjeleníti a kijelölést:

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

A Index nézet:

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

Ez a következő HTML-t hozza létre (a "CA" ki van jelölve):

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

Megjegyzés:

Nem javasoljuk a ViewBag vagy ViewData használatát a Select Tag Helperrel. A nézetmodell robusztusabb az MVC-metaadatok biztosításában, és általában kevésbé problémás.

Az asp-for attribútum értéke egy speciális eset, és nem igényel Model előtagot, a többi Címkesegéd attribútum viszont igen (például asp-items)

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

Enumeráció összekapcsolása

Gyakran kényelmesen használható <select> egy enum tulajdonsággal, és létrehozhatja az SelectListItem elemeket az enum értékekből.

Minta:

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

A GetEnumSelectList metódus létrehoz egy objektumot SelectList egy enumhoz.

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

Az enumerátorlistát az Display attribútummal megjelölve gazdagabb felhasználói felületet kaphat:

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

A következő HTML jön létre:

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

Beállításcsoport

A HTML <optgroup> elem akkor jön létre, ha a nézetmodell egy vagy több SelectListGroup objektumot tartalmaz.

A CountryViewModelGroup csoportok az SelectListItem elemeket az "Észak-Amerika" és az "Európa" csoportokba csoportosítják:

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

A két csoport az alábbiakban látható:

opciócsoport példa

A létrehozott 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>

Többszörös kijelölés

A Címke kiválasztása segéd automatikusan létrehozza a multiple = "multiple" attribútumot, ha az asp-for attribútumban megadott tulajdonság egy IEnumerable. Például a következő modell alapján:

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

A következő nézettel:

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

A következő HTML-t hozza létre:

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

Nincs kijelölés

Ha több lapon is a "nincs megadva" lehetőséggel találja magát, létrehozhat egy sablont a HTML ismétlésének kiküszöböléséhez:

@model CountryViewModel

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

A Views/Shared/EditorTemplates/CountryViewModel.cshtml sablon:

@model CountryViewModel

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

A HTML-beállításelemek<> hozzáadása nem korlátozódik a Nincs kijelölési esetre. A következő nézet- és műveletmetódus például a fenti kódhoz hasonló HTML-t hoz létre:

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>

A megfelelő <option> elem lesz kiválasztva (az selected="selected" attribútumot tartalmazza) az aktuális Country értéktől függően.

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>

További erőforrások

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-05

Megosztás a következőn keresztül:

Segítők címkézése űrlapokon a ASP.NET Core-ban

Az űrlap címkeelem segítője

Névvel ellátott útvonal használata

Az űrlapművelet címkék segítője

Küldés a vezérlőbe – példa

Küldés példaoldalra

Küldés az útvonal példába

Beviteli címke segítő

A jelölőnégyzet rejtett bevitelének megjelenítése

HTML-segítő alternatívák az Input Tag Helper helyett

HTML attribútumok

Kifejezésnevek

Gyermektulajdonságok navigálása

Kifejezésnevek és gyűjtemények

A Textarea címke segéd

** A címkesegéd

Az érvényesítési címkesegítők

Az érvényesítési üzenetcímke súgója

Az érvényesítési összefoglaló címke súgója

Minta

A Címkekiválasztó Segéd

Enumeráció összekapcsolása

Beállításcsoport

Többszörös kijelölés

Nincs kijelölés

További erőforrások

Visszajelzés

További források