Select Tag Helper – ASP.NET – MVC

Select Tag Helper, verilerinize dayalı olarak HTML SELECT öğelerini kolayca oluşturmanıza olanak tanır. Bu zamana kadar gördüğümüz örneklerden daha fazla işlevselliğe sahip daha gelişmiş Tag Helper’lardan biridir.

Öncelikle SELECT öğesinin ne yaptığını bir hatırlayalım. Bir HTML örneği:

<select>
 <option value="1">The Godfather</option>
 <option value="2">Forrest Gump</option>
 <option value="3">Fight Club</option>
</select>

Sonuç:

Gördüğünüz gibi, SELECT öğesi bir listede (varsayılan olarak bir açılır liste) bir veya birkaç seçenek oluşturacak ve bir seçenek seçmenize olanak tanıyacaktır. Seçenekler OPTION öğeleriyle sağlanır ve her birinin bir değeri (örneğin bir ID) ve ayrıca bir metin etiketi (bu durumda bir film başlığı) olabilir. Ancak, tüm bu OPTION etiketlerini elle kodlamaya gerek yoktur – Select Tag Helper ile bir veri kaynağına (genellikle bir veritabanına) dayalı olarak bunların otomatik olarak oluşturulmasını sağlayabiliriz.

asp-for ve Items Özelliği

Diğer Tag Helper’ların birçoğunda olduğu gibi, Select Tag Helper asp-for niteliğine sahiptir. Bu özellik, değerini Modeldeki belirli bir özelliğe bağlamanıza izin verecektir. Buna ek olarak, SELECT öğesi için bir veri kaynağı sağlamanıza olanak tanıyan asp-items adlı bir özellik mevcuttur.

asp-for özeliklerinin bağlanmak için Model üzerinde bir özelliğe ihtiyacı vardır ve asp-öğelerinin olası seçenekler listesine ihtiyacı vardır. Her iki şey de aynı Modelden gelebilirken, birlikte çalıştığınız Modeli ve olası seçeneklerin listesini birleştirecek belirli bir ViewModel oluşturmak genellikle daha pratiktir. Bunun bir örneği, ad, e-posta vb. gibi temel bilgileri düzenleyebilmek ve aynı zamanda kullanıcının hangi ülkede yaşadığını seçmesine izin vermek istediğiniz bir kullanıcıyı düzenlemek için bir FORM olabilir. Bu ülke listesi muhtemelen başka bir kaynaktan gelebilir, ör. bir veritabanı veya elle seçilmiş ülkeler listesinden. Bu durumda, şöyle bir ViewModel oluşturabilirsiniz:

    public class WebUser
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Country { get; set; }
    }

    public class EditUserViewModel
    {
        public WebUser User { get; set; }
        public List<string> Countries { get; set; }

    }

Şimdi, EditUserView’i kullanıcıya göstermek istediğinizde, ViewModel’i oluşturacak ve ona bir WebUser nesnesi ve bir ülke listesi sağlayacaksınız. Açıkçası, her iki şey de normalde başka bir yerden gelir, ör. bir veritabanı, ancak örneklemek için onları anında oluşturuyorum.

Controller:

        public IActionResult Movie()
        {
            EditUserViewModel viewModel = new EditUserViewModel();
            viewModel.User = new WebUser()
            {
                FirstName = "John",
                LastName = "Doe",
                Country = "USA"
            };
            viewModel.Countries = new List<string>()
            {
            "USA",
            "Great Britain",
            "Germany"
            };
            return View(viewModel);

        }

Şimdi Tag Helper’ın kullanıldığı View’e bakalım:

@model TagHelper.Models.EditUserViewModel
<form asp-action="UpdateUser" method="post">
    <input asp-for="User.FirstName" placeholder="First name" />
    <input asp-for="User.LastName" placeholder="Last name" />
    <select asp-items="@(new SelectList(Model.Countries))" asp-for="User.Country"></select>

    <input type="submit" value="Save" />
</form>

Sonuç:

Buradaki önemli kısım, elbette, açılır listeyi oluşturmak için Select Tag Helper’ı kullandığım SELECT etiketidir. Ülke listesine göre yeni bir SelectList oluşturduğum asp-items özelliğine özellikle dikkat edin. Bunun nedeni, asp-items niteliğinin sağlanan listenin SelectItem sınıfının örneklerini içermesini beklemesidir. SelectList yapıcısının bu sürümü, sağlanan kaynağa dayalı olarak bu örnekleri bizim için otomatik olarak oluşturur. Bu öğe için oluşturulan HTML şöyle görünecektir:

<select id="User_Country" name="User.Country">
    <option selected="selected">USA</option>
    <option>Great Britain</option>
    <option>Germany</option>
</select>

Key/Value İçeren Listeler

Yukarıdaki örnekte merak edebileceğiniz bir şey: OPTION etiketleri için herhangi bir değer sağlanmamıştır, bu, FORM gönderilirken seçilen öğenin metninin de değer olarak kullanılacağı anlamına gelir. Bunun nedeni, ilk örneği biraz daha basit tutmak için seçenek etiketlerini basit bir string listesinden (bu durumda ülkelerin adı) oluşturmamızdır. Bununla birlikte, çoğu durumda, muhtemelen bir anahtar ve değer kombinasyonuna dayalı listeler oluşturacaksınız. Örneğin, ülkeler, id olarak bir sayı kullandıkları ve ardından ülke adı için bir title/name alanı kullandıkları bir veri tabanından gelebilir. Neyse ki, bu da mümkündür ve başarılması çok kolaydır. Diyelim ki Country adında iki özellikten oluşan bir sınıfınız var: Id ve Name. ViewModel’i oluştururken, ülkeleri bir veri tabanından veya başka bir veri kaynağından yükleyebilirsiniz. View’de, sağlanan nesnelerin hangi özelliklerinin değer ve metin için kullanılacağını belirtmenize olanak tanıyan SelectList için alternatif bir kurucu kullanın, bunun gibi:

<select asp-items="@(new SelectList(Model.Countries, "Id", "Name"))" asp-for="User.Country"></select>