ASP.NET Core formlardaki etiket yardımcıları

By Rick Anderson, N. Taylor Mullen, Davve Patııve Jerrie Pelser

Bu belge, formlarda ve genellikle form üzerinde kullanılan HTML öğeleriyle çalışmayı gösterir. HTML form öğesi, Web uygulamalarının sunucuya veri geri göndermek için kullanacağı birincil mekanizmayı sağlar. Bu belgenin çoğunda Etiket Yardımcıları ve BUNLARıN güçlü HTML formları oluşturma konusunda nasıl yardımcı olabilecekleri açıklanmaktadır. Bu belgeyi okuyabilmeniz Için yardımcıları etiketleyerek okumanız önerilir.

Birçok durumda, HTML Yardımcıları belirli bir etiket Yardımcısı için alternatif bir yaklaşım sağlar, ancak bu etiket yardımcıların HTML yardımcılarını değiştirmez ve her HTML Yardımcısı için bir etiket Yardımcısı olmadığını bilmek önemlidir. Bir HTML Yardımcısı alternatifi varsa, bu, bahsedilir.

Form etiketi Yardımcısı

Form etiketi Yardımcısı:

• <FORM> action MVC denetleyicisi eylemi veya adlandırılmış yol için html öznitelik değeri oluşturur

• Siteler arası istek yasaklamasını engellemek için gizli bir Istek doğrulama belirteci ÜRETIR ( [ValidateAntiForgeryToken] http post eylem yönteminde özniteliğiyle birlikte kullanıldığında)

• asp-route-<Parameter Name>, <Parameter Name> Yol değerlerine eklendiği özniteliği sağlar. routeValuesVe için parametreler Html.BeginForm , Html.BeginRouteForm benzer işlevlere sahiptir.

• Bir HTML Yardımcısı alternatifi Html.BeginForm ve Html.BeginRouteForm

Örnek:

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

Yukarıdaki form etiketi Yardımcısı aşağıdaki HTML 'yi oluşturur:

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

MVC çalışma zamanı, action form etiketi yardımcı öznitelikleri ve ' den öznitelik değeri asp-controller oluşturur asp-action . Form etiketi Yardımcısı ayrıca siteler arası istek sahteciliği (HTTP POST eylem yönteminde özniteliğiyle kullanıldığında) engellemek için gizli bir Istek doğrulama belirteci oluşturur [ValidateAntiForgeryToken] . Bir saf HTML formunun siteler arası istek sahteciliğini önleme 'den korunması zordur, form etiketi Yardımcısı bu hizmeti sizin için sağlar.

Adlandırılmış yol kullanma

asp-routeEtiket Yardımcısı özniteliği, HTML özniteliği için de biçimlendirme oluşturabilir action . Adlı yolu içeren bir uygulama register , kayıt sayfası için aşağıdaki biçimlendirmeyi kullanabilir:

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

Görünümler/hesap klasöründeki görünümlerin birçoğu ( bireysel kullanıcı hesaplarıyla yeni bir Web uygulaması oluşturduğunuzda oluşturulur), ASP-Route-ReturnUrl özniteliğini içerir:

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

Form eylemi etiketi Yardımcısı

Form eylemi etiketi Yardımcısı, formaction oluşturulan <button ...> veya etiketteki özniteliği oluşturur <input type="image" ...> . formactionÖzniteliği bir formun verilerini nereden gönderdiğini denetler. <input>Türü image ve öğeleri öğelerine bağlanır <button> . Form eylemi etiketi Yardımcısı, asp- formaction ilgili öğe için hangi bağlantının oluşturulduğunu denetlemek için çeşitli AnchorTagHelper özniteliklerinin kullanılmasını sağlar.

Değerini denetlemek için desteklenen AnchorTagHelper öznitelikleri formaction :

Denetleyiciye gönder örneği

Aşağıdaki biçimlendirme, formu Index HomeController giriş veya düğme seçildiğinde eyleme gönderir:

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

Önceki biçimlendirme, aşağıdaki HTML 'yi oluşturur:

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

Sayfa örneğine gönder

Aşağıdaki biçimlendirme formu About Razor sayfasına gönderir:

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

Önceki biçimlendirme, aşağıdaki HTML 'yi oluşturur:

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

Yönlendirme örneğine gönder

Uç noktayı göz önünde bulundurun /Home/Test :

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

Aşağıdaki biçimlendirme formu /Home/Test uç noktaya gönderir.

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

Önceki biçimlendirme, aşağıdaki HTML 'yi oluşturur:

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

Giriş etiketi Yardımcısı

Giriş etiketi Yardımcısı, bir HTML <input> öğesini Razor görünüminizdeki bir model ifadesine bağlar.

Söz dizimi:

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

Giriş etiketi Yardımcısı:

• id name Özniteliğinde belirtilen ifade adı için ve HTML özniteliklerini üretir asp-for . asp-for="Property1.Property2", m => m.Property1.Property2 ile eşdeğerdir. İfadenin adı, öznitelik değeri için kullanılan şeydir asp-for . Ek bilgi için ifade adları bölümüne bakın.

• Model type özelliğine uygulanan model türüne ve veri ek açıklaması özniteliklerine göre html öznitelik değerini ayarlar

• typeBELIRTILDIĞINDE html öznitelik değerinin üzerine yazılmaz

• Model özelliklerine uygulanan veri ek açıklama özniteliklerinden HTML5 doğrulama öznitelikleri oluşturur

• , Ve ile çakışan bir HTML yardımcı özelliğine sahiptir Html.TextBoxFor Html.EditorFor . Ayrıntılar için bkz. giriş etiketi Yardımcısı Için HTML Yardımcısı alternatifleri .

• Güçlü yazma sağlar. Özelliğin adı değişirse ve etiket yardımcısını güncelleştirmezseniz aşağıdakine benzer bir hata alırsınız:

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

InputEtiket Yardımcısı, HTML type özniteliğini .net türüne göre ayarlar. Aşağıdaki tabloda bazı ortak .NET türleri ve oluşturulan HTML türü listelenmekte (her .NET türü listelenmemiştir).

Aşağıdaki tabloda, giriş etiketi Yardımcısı 'nın belirli giriş türleriyle eşleşecağı bazı ortak veri ek açıklamaları (her doğrulama özniteliği listelenmez) gösterilmektedir:

Örnek:

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>

Yukarıdaki kod, aşağıdaki HTML 'yi oluşturur:

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

Ve özelliklerine uygulanan veri ek açıklamaları Email Password modelde meta veriler oluşturur. Giriş etiketi Yardımcısı, model meta verilerini kullanır ve HTML5 data-val-* öznitelikleri üretir (bkz. model doğrulama). Bu öznitelikler, giriş alanlarına iliştirilecek Doğrulayıcıları anlatmaktadır. Bu unobtrusive HTML5 ve jQuery doğrulaması sağlar. Unobtrusive öznitelikleri biçimindedir data-val-rule="Error Message" , burada kural doğrulama kuralının adıdır (örneğin,, data-val-required data-val-email data-val-maxlength vb.) Öznitelikte bir hata iletisi sağlanırsa, özniteliği için değer olarak görüntülenir data-val-rule . Ayrıca, data-val-ruleName-argumentName="argumentValue" kural hakkında ek ayrıntılar sağlayan formun öznitelikleri de vardır, örneğin data-val-maxlength-max="1024" .

CheckBox gizli giriş işleme

HTML5 içindeki onay kutuları işaretlenmediğinde bir değer göndermez. Denetlenmemiş bir onay kutusu için varsayılan bir değerin gönderilmesini etkinleştirmek üzere, giriş etiketi Yardımcısı onay kutuları için ek bir gizli giriş oluşturur.

Örneğin, Razor bir Boolean model özelliği Için giriş etiketi yardımcısını kullanan aşağıdaki biçimlendirmeyi göz önünde bulundurun IsChecked :

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

Yukarıdaki Razor biçimlendirme, aşağıdakine benzer HTML biçimlendirmesi üretir:

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

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

Önceki HTML biçimlendirmesinde, adı ve değeri olan ek gizli bir giriş gösterilmektedir IsChecked false . Varsayılan olarak, bu gizli giriş formun sonunda işlenir. Form gönderildiğinde:

• IsCheckedCheckBox girişi işaretlenirse, her ikisi de true false değer olarak gönderilir.
• IsCheckedCheckBox girişi işaretlenmezse, yalnızca gizli giriş değeri false gönderilir.

ASP.NET Core model bağlama işlemi bir değere bağlanırken yalnızca ilk değeri okur bool , bu, true denetlenen onay kutuları ve denetlenmemiş onay kutuları için de sonuçlanır false .

Gizli giriş işlemenin davranışını yapılandırmak için, CheckBoxHiddenInputRenderMode özelliğini üzerinde ayarlayın MvcViewOptions.HtmlHelperOptions . Örnek:

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

Önceki kod, onay kutuları için gizli giriş işlemesini öğesine ayarlayarak devre dışı bırakır CheckBoxHiddenInputRenderMode CheckBoxHiddenInputRenderMode.None . Tüm kullanılabilir işleme modları için bkz CheckBoxHiddenInputRenderMode . sabit listesi.

Giriş etiketi Yardımcısı için HTML Yardımcısı alternatifleri

Html.TextBox, Html.TextBoxFor Html.Editor ve, Html.EditorFor giriş etiketi Yardımcısı ile çakışan özelliklere sahiptir. Giriş etiketi Yardımcısı otomatik olarak type özniteliği ayarlar ve bu şekilde Html.TextBox Html.TextBoxFor çalışmaz. Html.Editor ve Html.EditorFor koleksiyonlar, karmaşık nesneler ve şablonlar; giriş etiketi Yardımcısı değildir. Giriş etiketi Yardımcısı Html.EditorFor ve kesin olarak Html.TextBoxFor yazılmış (lambda ifadeleri kullanır) Html.TextBox ve Html.Editor değildir (ifade adları kullanır).

HtmlAttributes

@Html.Editor() ve @Html.EditorFor() ViewDataDictionary varsayılan şablonlarını yürütürken adlı özel bir giriş kullanın htmlAttributes . Bu davranış, isteğe bağlı olarak parametreler kullanılarak genişletilmiş şekilde belirlenir additionalViewData . "HtmlAttributes" anahtarı büyük/küçük harfe duyarlıdır. "HtmlAttributes" anahtarı, htmlAttributes gibi giriş yardımcılarını geçirilmiş nesneye benzer şekilde işlenir @Html.TextBox() .

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

İfade adları

asp-forÖznitelik değeri bir ModelExpression lambda ifadesinin bir ve sağ tarafıdır. Bu nedenle asp-for="Property1" , m => m.Property1 ile öneki gerekmez, oluşturulan kodda olur Model . " @ " Karakterini kullanarak bir satır içi ifade başlatabilir ve öğesinden önce taşıyabilirsiniz m. :

@{
  var joe = "Joe";
}

<input asp-for="@joe">

Şunları üretir:

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

Koleksiyon özellikleriyle, asp-for="CollectionProperty[23].Member" değeri olduğu gibi aynı adı oluşturur asp-for="CollectionProperty[i].Member" i 23 .

ASP.NET Core MVC değeri hesapladığında, ModelExpression dahil olmak üzere çeşitli kaynakları inceler ModelState . Göz önünde bulundurun <input type="text" asp-for="@Name"> . Hesaplanan value öznitelik, öğesinden gelen ilk null olmayan değerdir:

• ModelState "Name" anahtarına sahip giriş.
• İfadenin sonucu Model.Name .

Alt özelliklerde gezinme

Ayrıca, görünüm modelinin özellik yolunu kullanarak alt Özellikler ' e gidebilirsiniz. Alt özellik içeren daha karmaşık bir model sınıfı düşünün 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; }
}

Görünümünde, şu şekilde bağlandık 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>

İçin aşağıdaki HTML oluşturulur Address.AddressLine1 :

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

İfade adları ve koleksiyonlar

Örnek, bir dizisi içeren bir model Colors :

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

    public int Age { get; set; }
}

Eylem yöntemi:

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

Aşağıda Razor belirli bir öğeye nasıl erişebileceğiniz gösterilmektedir Color :

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

Views/Shared/EditorTemplates/String. cshtml şablonu:

@model string

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

Örnek kullanarak List<T> :

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

    public bool IsDone { get; set; }
}

Aşağıda Razor bir koleksiyonun üzerinde nasıl yinelemi yapılacağı gösterilmektedir:

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

Views/Shared/EditorTemplates/TodoItem. cshtml şablonu:

@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 değer bir asp-for veya eşdeğer bağlamda kullanılacaksa, mümkünse kullanılması gerekir Html.DisplayFor . Genel olarak, for foreach bir Numaralandırıcı ayırması gerekmiyorsa (senaryo buna izin veriyorsa) daha iyidir; ancak, bir LINQ ifadesinde bir dizin oluşturucunun değerlendirilmesi pahalı olabilir ve simge durumuna küçültülmüş olmalıdır.

TextArea etiketi Yardımcısı

Textarea Tag HelperEtiket Yardımcısı giriş etiketi Yardımcısı ile benzerdir.

• , id Ve name özniteliklerini ve bir öğe için modelden veri doğrulama özniteliklerini üretir <textarea> .

• Güçlü yazma sağlar.

• HTML Yardımcısı alternatifi: Html.TextAreaFor

Örnek:

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şağıdaki HTML oluşturulur:

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

Etiket etiketi Yardımcısı

• Bir for <label> ifade adı için bir öğe üzerinde etiket başlığı ve özniteliği oluşturur

• HTML Yardımcısı alternatifi: Html.LabelFor .

, Label Tag Helper Saf HTML etiket öğesi üzerinde aşağıdaki avantajları sağlar:

• Öznitelikten açıklayıcı etiket değerini otomatik olarak alırsınız Display . İstenen görünen ad zaman içinde değişebilir ve Display öznitelik ve etiket etiketi Yardımcısı 'nın birleşimi, Display kullanıldığı her yere uygulanır.

• Kaynak kodunda daha az biçimlendirme

• Model özelliğiyle güçlü yazma.

Örnek:

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>

Öğesi için aşağıdaki HTML oluşturulur <label> :

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

Etiket etiketi Yardımcısı, for öğesiyle ILIŞKILI kimlik olan "e-posta" öznitelik değerini oluşturdu <input> . Etiket Yardımcıları, id for doğru şekilde ilişkilendirilebilen tutarlı ve öğeleri oluşturur. Bu örnekteki başlık, Display özniteliğinden gelir. Modelde bir Display öznitelik yoksa, başlık ifadenin Özellik adı olacaktır.

Doğrulama etiketi yardımcıları

İki doğrulama etiketi yardımcıları vardır. Validation Message Tag Helper(Bu, modelinizde tek bir özellik için bir doğrulama iletisi gösterir) ve Validation Summary Tag Helper (doğrulama hatalarının özetini görüntüler). , Input Tag Helper Model sınıflarınızda bulunan veri ek açıklaması özniteliklerini temel alan giriş ÖĞELERINE HTML5 istemci tarafı doğrulama öznitelikleri ekler. Doğrulama de sunucuda gerçekleştirilir. Doğrulama etiketi Yardımcısı, bir doğrulama hatası oluştuğunda bu hata iletilerini görüntüler.

Doğrulama Iletisi etiketi Yardımcısı

• data-valmsg-for="property" Belirtilen model özelliğinin giriş alanındaki doğrulama hatası mesajlarını bağlayan span öğesine HTML5 özniteliğini ekler. İstemci tarafı doğrulama hatası oluştuğunda jQuery , öğesinde hata iletisini görüntüler <span> .

• Doğrulama de sunucuda gerçekleşir. İstemciler JavaScript devre dışı bırakılmış olabilir ve bazı doğrulamalar yalnızca sunucu tarafında yapılabilir.

• HTML Yardımcısı alternatifi: Html.ValidationMessageFor

, Validation Message Tag Helper asp-validation-for Bir HTML span öğesinde özniteliğiyle kullanılır.

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

Doğrulama Iletisi etiketi Yardımcısı aşağıdaki HTML 'yi oluşturur:

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

Genellikle Validation Message Tag Helper Input aynı özellik için bir etiket Yardımcısı ' nı kullanırsınız. Bunun yapılması, hataya neden olan girişin yakınında herhangi bir doğrulama hata iletisi görüntüler.

Sunucu tarafı doğrulama hatası oluştuğunda (örneğin, özel sunucu tarafı doğrulama veya istemci tarafı doğrulaması devre dışı bırakılmışsa), MVC bu hata iletisini öğenin gövdesi olarak koyar <span> .

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

Doğrulama Özeti etiketi Yardımcısı

• <div>Özniteliği olan öğeleri hedefler asp-validation-summary

• HTML Yardımcısı alternatifi: @Html.ValidationSummary

, Validation Summary Tag Helper Doğrulama iletilerinin özetini göstermek için kullanılır. asp-validation-summaryÖznitelik değeri, aşağıdakilerden herhangi biri olabilir:

Örnek

Aşağıdaki örnekte, veri modelinde, DataAnnotation öğesinde doğrulama hatası iletileri üreten öznitelikler vardır <input> . Doğrulama hatası oluştuğunda, doğrulama etiketi Yardımcısı şu hata iletisini görüntüler:

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>

Oluşturulan HTML (model geçerli olduğunda):

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

Etiket Seç Yardımcısı

• Modelinizin özellikleri için Select ve ilişkili seçenek öğeleri oluşturur.

• Bir HTML Yardımcısı alternatifi Html.DropDownListFor ve Html.ListBoxFor

, Select Tag Helper asp-for Select öğesi için model özelliği adını belirtir ve asp-items seçenek öğelerini belirtir. Örnek:

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

Örnek:

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

IndexYöntemi CountryViewModel öğesini başlatır, seçilen ülkeyi ayarlar ve görünüme geçirir Index .

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

HTTP POST Index yöntemi seçimi görüntüler:

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

IndexGörünüm:

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

Aşağıdaki HTML 'yi üreten ("CA" seçiliyken):

<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-forÖznitelik değeri özel bir durumdur ve bir Model ön ek gerektirmez, diğer etiket Yardımcısı öznitelikleri olur (gibi asp-items )

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

Sabit Listesi bağlama

Genellikle <select> bir enum özellikle kullanılması ve SelectListItem değerlerden öğeleri oluşturmak kullanışlıdır enum .

Örnek:

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

Yöntemi, bir GetEnumSelectList SelectList numaralandırma için bir nesne oluşturur.

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

DisplayDaha zengin bir kullanıcı arabirimi almak için, Numaralandırıcı listenizi özniteliğiyle işaretleyebilirsiniz:

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şağıdaki HTML oluşturulur:

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

Seçenek grubu

HTML <optgroup> öğesi, görünüm modeli bir veya daha fazla nesne içerdiğinde oluşturulur SelectListGroup .

CountryViewModelGroup SelectListItem Öğeleri "Kuzey Amerika" ve "Avrupa" gruplarında gruplandırır:

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

İki grup aşağıda gösterilmiştir:

Oluşturulan 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>

Çoklu seçim

Öznitelikte belirtilen özellik bir ise, select etiketi Yardımcısı otomatik olarak birden çok = "çoklu" özniteliği oluşturur asp-for IEnumerable . Örneğin, aşağıdaki model verildiğinde:

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şağıdaki görünümle:

@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şağıdaki HTML 'yi oluşturur:

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

Seçim yok

Birden çok sayfada "belirtilmemiş" seçeneğini kullanarak kendinizi bulursanız, HTML 'yi yinelemeyi ortadan kaldırmak için bir şablon oluşturabilirsiniz:

@model CountryViewModel

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

Views/Shared/EditorTemplates/CountryViewModel. cshtml şablonu:

@model CountryViewModel

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

HTML <option> öğelerinin eklenmesi hiçbir seçim durumuyla sınırlı değildir. Örneğin, aşağıdaki görünüm ve eylem yöntemi yukarıdaki koda benzer HTML oluşturur:

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>

<option> selected="selected" Geçerli değere bağlı olarak doğru öğe seçilir (özniteliği içerir) 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>

Ek kaynaklar

• ASP.NET Core etiket yardımcıları
• HTML form öğesi
• İstek doğrulama belirteci
• ASP.NET Core'da Model Bağlama
• ASP.NET Core MVC 'de Model doğrulaması
• Iattributeadapter arabirimi
• Bu belge için kod parçacıkları