Formlarda Etiket Yardımcıları ASP.NET Core

Rick Anderson, N. Taylor Andersonlen, Dave Paquetteve Rierie Pelser

Bu belgede Formlarla çalışma ve Form üzerinde yaygın olarak kullanılan HTML öğeleri gösterildi. HTML Formu öğesi, web uygulamalarının verileri sunucuya geri gönderirken kullanabileceği birincil mekanizmayı sağlar. Bu belgenin çoğunda Etiket Yardımcıları ve bunların verimli bir şekilde sağlam HTML formları oluşturmanıza nasıl yardımcı olduğu açıkılmaktadır. Bu belgeyi okumadan önce Etiket Yardımcıları'ne Giriş makalelerini okumanizi öneririz.

Çoğu durumda HTML Yardımcıları belirli bir Etiket Yardımcısı için alternatif bir yaklaşım sağlar ancak Etiket Yardımcılarının HTML Yardımcılarının yerini alamayacak ve her HTML Yardımcısı için etiket yardımcısı olmadığını fark etmek önemlidir. Html Yardımcı alternatifi mevcut olduğunda bu söz konusu olur.

Form Etiketi Yardımcı

Form Etiketi Yardımcısı:

  • MVC denetleyicisi eylemi veya adlandırılmış yol için HTML <FORM> action özniteliği değerini üretir

  • Siteler arası istek sahteciliklerini önlemek için gizli bir İstek Doğrulama Belirteci üretir (HTTP Post eylem [ValidateAntiForgeryToken] yönteminde özniteliğiyle birlikte kullanılır)

  • yol asp-route-<Parameter Name> değerlerine <Parameter Name> eklenmiştir özniteliğini sağlar. routeValuesve parametreleri Html.BeginForm benzer işlevler Html.BeginRouteForm sağlar.

  • Bir HTML Yardımcı alternatifi vardır ve Html.BeginForm``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 üretir:

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

MVC çalışma zamanı, Ve action Form Etiketi Yardımcı özniteliklerinden öznitelik değerini asp-controller asp-action üretir. Form Etiketi Yardımcısı, siteler arası istek sahteciliğe karşı (HTTP Post eylem yönteminde özniteliğiyle birlikte kullanılır) önlemek için gizli bir İstek Doğrulama [ValidateAntiForgeryToken] Belirteci de üretir. Saf bir HTML Formunu siteler arası istek sahteciluğundan korumak zordur, Form Etiketi Yardımcısı bu hizmeti sizin için sağlar.

Adlandırılmış yol kullanma

Etiket asp-route Yardımcı özniteliği, HTML özniteliği için işaretleme de action oluşturabilir. adlı bir yolu olan bir register uygulama, kayıt sayfası için aşağıdaki işaretlemeyi kullanabilir:

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

Görünümler/Hesap klasöründeki görünümlerin çoğu (Bireysel Kullanıcı Hesapları ile yeni bir web uygulaması 7.000.000 00.000 00.000) 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">

Not

Yerleşik şablonlarla, yalnızca yetkili bir kaynağa erişmeye çalışsanız ancak kimliği doğrulanmamış veya yetkilendirilmilmiş returnUrl değilken otomatik olarak doldurulur. Yetkisiz erişim girişiminde bulunarak, güvenlik ara yazılımı sizi kümeli oturum açma sayfasına returnUrl yeniden yönlendirmektedir.

Form Eylem Etiketi Yardımcısı

Form Eylem Etiketi Yardımcısı, oluşturulan formaction veya etikette <button ...> <input type="image" ...> özniteliğini üretir. Öznitelik, formaction formun verilerini nereye gönder olduğunu kontrol eder. Türü ve öğeleri <input> image öğelerine <button> bağlar. Form Eylem Etiketi Yardımcısı, ilgili öğe için hangi bağlantının oluşturulacaklarını kontrol etmek için çeşitli AnchorTagHelper asp- formaction özniteliklerinin kullanımını sağlar.

değerini kontrol etmek için AnchorTagHelper öznitelikleri desteklendi: formaction

Öznitelik Açıklama
asp-controller Denetleyicinin adı.
asp-action Eylem yönteminin adı.
asp-area Alan adı.
asp-page Sayfanın Razor adı.
asp-page-handler Sayfa Razor işleyicinin adı.
asp-route Rotanın adı.
asp-route-{value} Tek bir URL yol değeri. Örneğin, asp-route-id="1234".
asp-all-route-data Tüm yol değerleri.
asp-fragment URL parçası.

Denetleyiciye gönder örneği

Aşağıdaki işaretleme, girdi veya düğme Index seçildiğinde HomeController formunu eylemine göndermektedir:

<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 işaretleme aşağıdaki HTML'yi üretir:

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

Sayfaya gönder örneği

Aşağıdaki işaretleme formu Sayfaya About Razor göndermektedir:

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

Önceki işaretleme aşağıdaki HTML'yi üretir:

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

Uç noktayı /Home/Test düşünün:

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

Aşağıdaki işaretleme formu uç noktasına /Home/Test göndermektedir.

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

Önceki işaretleme aşağıdaki HTML'yi üretir:

<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ı, html öğesini <input> razor görünümdeki bir model ifadesine bağlar.

Söz dizimi:

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

Giriş Etiketi Yardımcısı:

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

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

  • Belirtilen html özniteliği type değerinin üzerine yazmaz

  • Model özelliklerine uygulanan veri açıklaması özniteliklerinden HTML5 doğrulama öznitelikleri üretir

  • ve ile çakışan bir HTML Yardımcı özelliği Html.TextBoxFor Html.EditorFor vardır. Ayrıntılar için Giriş Etiketi Yardımcısı'nın HTML Yardımcı alternatifleri bölümüne bakın.

  • Güçlü yazma sağlar. Özelliğin adı değişirse ve Etiket Yardımcısını güncelleştirmezse 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?)
    

Etiket Input Yardımcı, HTML type özniteliğini .NET türüne göre ayarlar. Aşağıdaki tabloda bazı yaygın .NET türleri ve oluşturulan HTML türleri listelenmiştir (her .NET türü listelenmiyor).

.NET türü Giriş Türü
Bool type="checkbox"
Dize type="text"
DateTime type="datetime-local"
Bayt type="number"
int type="number"
Tek, Çift type="number"

Aşağıdaki tabloda, giriş etiketi yardımcı tarafından belirli giriş türlerine eşlenecek bazı yaygın veri ek açıklamaları öznitelikleri gösterilir (her doğrulama özniteliği listelenmiyor):

Öznitelik Giriş Türü
[EmailAddress] type="email"
[Url] type="url"
[HiddenInput] type="hidden"
[Telefon] type="tel"
[DataType(DataType.Password)] type="password"
[DataType(DataType.Date)] type="date"
[DataType(DataType.Time)] type="time"

Ö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 üretir:

  <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 Email Password açıklamaları modelde meta veriler üretir. 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ştirilen doğrulayıcıları açıklar. Bu, göze görünmeden HTML5 ve jQuery doğrulaması sağlar. Dikkatsiz öznitelikler biçimindedir; burada kural doğrulama kuralının data-val-rule="Error Message" adıdır data-val-required data-val-email (örneğin, data-val-maxlength vb.) özniteliğinde bir hata iletisi sağlanırsa, özniteliğin değeri olarak data-val-rule görüntülenir. Ayrıca, kural hakkında ek ayrıntılar data-val-ruleName-argumentName="argumentValue" sağlayan formun öznitelikleri de vardır, örneğin, data-val-maxlength-max="1024" .

Giriş Etiketi Yardımcısı'nın HTML Yardımcı alternatifleri

Html.TextBox, Html.TextBoxFor ve Giriş Etiketi Html.Editor Html.EditorFor Yardımcısı ile çakışan özelliklere sahiptir. Giriş Etiketi Yardımcısı özniteliği otomatik olarak type Html.TextBox ayarlamaz ve Html.TextBoxFor ayarlamaz. Html.Editor ve Html.EditorFor koleksiyonları, karmaşık nesneleri ve şablonları işlemektedir; Giriş Etiketi Yardımcısı işlemez. Giriş Etiketi Yardımcısı ve türü kesin olarak yazılmıştır Html.EditorFor Html.TextBoxFor (lambda ifadeleri kullanırlar); ve değildir Html.TextBox Html.Editor (ifade adlarını kullanırlar).

HtmlAttributes

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

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

İfade adları

Öznitelik asp-for değeri, ModelExpression lambda ifadesinin bir ve sağ tarafıdır. Bu asp-for="Property1" nedenle, m => m.Property1 oluşturulan kodda olur ve bu nedenle ön eke ihtiyacınız Model yoktur. Satır içi ifade başlatmak ve öncesinde taşımak için " @ " karakterini m. kullanabilirsiniz:

@{
  var joe = "Joe";
}

<input asp-for="@joe">

Şunları üretir:

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

Koleksiyon asp-for="CollectionProperty[23].Member" özellikleriyle, değerine sahip olduğunda asp-for="CollectionProperty[i].Member" ile aynı adı i 23 üretir.

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

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

Ayrıca, görünüm modelinin özellik yolunu kullanarak alt özelliklere de gidebilirsiniz. Alt özellik içeren daha karmaşık bir model sınıfı Address düşünün.

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ümde, ile Address.AddressLine1 bağlanabilirsiniz:

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

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

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

İfade adları ve Koleksiyonlar

Örnek, dizisi içeren bir Colors model:

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 belirli Razor bir öğeye nasıl erişebilirsiniz? 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 />

kullanan List<T> örnek:

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

    public bool IsDone { get; set; }
}

Aşağıda, Razor bir koleksiyon üzerinde nasıl tekrarlan olduğu gösterir:

@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 veya eşdeğer bağlamda kullanılacaksa mümkünse asp-for Html.DisplayFor kullanılmalıdır. Genel olarak, bir numaralayıcı ayırması gerekmesi nedeniyle (senaryo izin verdiyseniz) durumundan daha iyidir; ancak LINQ ifadesinde dizinleyicinin değerlendirilmesi pahalı olabilir ve en aza for foreach indirilmesi gerekir.

 

Not

Yukarıdaki açıklamalı örnek kod, lambda ifadesini listeden her biri için erişmek üzere @ işleciyle nasıl ToDoItem değiştiryebilirsiniz?

Textarea Etiket Yardımcısı

Etiket Textarea Tag Helper yardımcı, Giriş Etiketi Yardımcısı ile benzerdir.

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

  • Güçlü yazma sağlar.

  • HTML Yardımcı 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ı

  • İfade adı için bir for öğede etiket <label> açıklamalı alt yazısını ve özniteliğini üretir

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

, Label Tag Helper saf HTML etiketi öğesine göre aşağıdaki avantajları sağlar:

  • Özniteliğinden açıklayıcı etiket değerini otomatik olarak Display elde edersiniz. Amaçlanan görünen ad zaman içinde değişebilir ve öznitelik ile Etiket Etiketi Yardımcısı birleşimi, kullanılan Display Display her yere uygulanır.

  • Kaynak kodunda daha az işaretleme

  • 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 <label> oluşturulur:

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

Etiket Etiketi Yardımcısı, for öğesiyle ilişkili kimlik olan "Email" öznitelik değerini <input> oluşturmıştır. Etiket Yardımcıları tutarlı ve id doğru for ilişkilendirilen öğeler üretir. Bu örnekteki açıklamalı alt yazı özniteliğinden Display gelir. Model bir öznitelik içermese Display açıklamalı alt yazı, ifadenin özellik adı olur.

Doğrulama Etiketi Yardımcıları

İki Doğrulama Etiketi Yardımcısı vardır. Validation Message Tag Helper(modeliniz üzerinde tek bir özellik için doğrulama iletisi görüntüler) ve Validation Summary Tag Helper (doğrulama hatalarının özetini görüntüler). , Input Tag Helper model sınıflarında veri açıklaması özniteliklerine göre giriş öğelerine HTML5 istemci tarafı doğrulama öznitelikleri ekler. Doğrulama sunucuda da gerçekleştirilir. Doğrulama Etiketi Yardımcı, bir doğrulama hatası oluştuğunda bu hata iletilerini görüntüler.

Doğrulama İletisi Etiketi Yardımcı

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

  • Doğrulama sunucuda da sürer. İstemcilerde JavaScript devre dışı bırakılmış olabilir ve bazı doğrulamalar yalnızca sunucu tarafında yapılabilir.

  • HTML Yardımcı alternatifi: Html.ValidationMessageFor

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

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

Doğrulama İletisi Etiketi Yardımcısı aşağıdaki HTML'yi oluşturacak:

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

Aynı özellik için Validation Message Tag Helper bir Etiket Input Yardımcıdan sonra genellikle kullanırsiniz. Bunu yapmak, hataya neden olan girişe yakın doğrulama hata iletilerini görüntüler.

Not

İstemci tarafı doğrulama için doğru JavaScript ve jQuery betiği başvurularını içeren bir görünüme sahipsiniz. Daha fazla bilgi için bkz. Model Doğrulama.

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

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

  • özniteliğine <div> sahip öğeleri asp-validation-summary hedefler

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

ASP-doğrulama-Özet Görünen doğrulama iletileri
ValidationSummary. All Özellik ve model düzeyi
Yalnızca ValidationSummary. model Modelleme
ValidationSummary. None Hiçbiri

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

Not

ViewBag ViewData Etiket Seç Yardımcısı ile veya kullanmayı önermiyoruz. Bir görünüm modeli, MVC meta verileri sağlamaya ve genellikle daha az soruna neden olacak daha sağlamdır.

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:

seçenek grubu örneği

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