Aspnet MVC DropDownList

 HTML de karşılığı select tag i olan  Aspnet  MVC DropDownList metodunu kullanımını göstereceğim.

HTML.DropDownList() Kullanımı
8 Farklı şekilde yazılabilir. En az bir parametre almalıdır.

@Html.DropDownList(string name, IEnumrable selectList, string optionLabel, IDictionary 

htmlAttributes)

Sık kullandığımız parametreler şunlardır.

string name = "Kontrolün ismini"
IEnumrable = "Listenin tanımlandığı parametredir"
string optionLabel = "Default değeridir -Bir seçim yapınız-"
IDictionary = "DropDownListimizde HTML kodlarını kullanacağımız parametredir."
Şimdi ise kodlamasını yapalım.

 


@*name mi kategoriler ve  manuel olarak yazdığımız list parametrelerini kullanarak bir dropdownlist oluşturuyoruz *@
@Html.DropDownList("kategoriler",
                 new List {
                     new SelectListItem {
                        Text="CSS",
                        Value="1",
                        // Selected = true, seçili olarak gelsin
                        // Disabled = true  disable olarak gelsin istersek kullanıyoruz
                     },
                     new SelectListItem {
                        Text="HTML",
                        Value="2",
                     },
                 })

@*Default Bir değer atamak istersek yani listenin ilk değeri değil de kendi belirlediğimiz bir yazının listenin başında default değer olarak gözükmesini istiyorsak bunu için yapmamız gereken optionLabel parametresini kullanmak olacaktır. *@
@Html.DropDownList("kategoriler",
                 new List {
                     new SelectListItem {
                        Text="CSS",
                        Value="1",
                        // Selected = true, seçili olarak gelsin
                        // Disabled = true  disable olarak gelsin istersek kullanıyoruz
                     },
                     new SelectListItem {
                        Text="HTML",
                        Value="2",
                     },
                 },"Kategori Seçiniz")
@*Html kodlarımızı eklemek istersek de bir parametre daha yazmamız yeterli olacaktır. *@
//Class için
// new { @class = "form-control" }
//id için 
// new { @id ="select-list" }
//style için
// new { @style ="width: 250px......" }

@Html.DropDownList("kategoriler",
                 new List {
                     new SelectListItem {
                        Text="CSS",
                        Value="1",
                        // Selected = true, seçili olarak gelsin
                        // Disabled = true  disable olarak gelsin istersek kullanıyoruz
                     },
                     new SelectListItem {
                        Text="HTML",
                        Value="2",

                     },

                 },"Kategori Seçiniz",new { @class = "form-control"})   

 

Evet temel olarak Html.DropDownlist i tanımış olduk. Biraz da veri tabanlı olarak kullanmak istersek nasıl yapacağımızdan bahsedelim.. Veri tabanı olarak NorthWind tablo olarak da Categories tablosunu seçtim. Entity Framework ile db işlemlerimi yapacağım.

 

 


//ilk olarak HomeController ımıza şu kodları yazıyoruz
public ActionResult Index()
        {
            //veritabanımızdan instance alıyoruz.
            NORTHWNDEntities db = new NORTHWNDEntities();
            //bir list oluştuyoruz selectlistitem tipi alacak
            List< SelectListItem > kategoriler = new List < SelectListItem >();
            //foreach ile db.Categories deki kategorileri listemize ekliyoruz
            foreach (var item in db.Categories.ToList())
            {   //Text = Görünen kısımdır. Kategori ismini yazdıyoruz
                //Value = Değer kısmıdır.ID değerini atıyoruz
                kategoriler.Add(new SelectListItem { Text = item.CategoryName, Value = item.CategoryID.ToString() });
            }
            //Dinamik bir yapı oluşturup kategoriler list mizi view mize göndereceğiz
            //bunun için viewbag kullanıyorum
            ViewBag.Kategoriler = kategoriler;
            return View();
        }
//Controller daki kodlarımızı yazmış bulunmaktayız..sıra geldi view kısmına
//View Kısmına yazacağımız kodlar...
 @*ViewBag.Kategoriler deki "Kategoriler" yazmamız veri tabanındaki kategorilerin listelenmesi yeterli olacaktır.*@
 @Html.DropDownList("Kategoriler")

 @*ihtiyaçlarınız doğrultusunda parametreler eklemek istersek de bu şekilde yapıyoruz@
 @Html.DropDownList("Kategoriler",new SelectList(ViewBag.Kategoriler,"Value","Text"),"Kategori Seçiniz",new { @class="form-control" })

// ya da 
 @Html.DropDownList("Kategoriler",null,"Kategori Seçiniz", new { @class = "form-control" })


Eğer DropDownList imizin seçili gelmesini istiyorsak...

 

//Contollerımıza kodlarımızı yazıyoruz
        public ActionResult Index()
        {
            NORTHWNDEntities db = new NORTHWNDEntities();
            List kategoriler = new List();
            //Basit olarak bir int değişkeni oluştuyorum ve ona bir değer atıyorum
            //bu değerim benim listeki selected olarak gelmesini istediğim değer
            int kategoriID = 2;
            foreach (var item in db.Categories.ToList())
            {
                kategoriler.Add(
                    new SelectListItem {
                        Text =item.CategoryName,
                        Value =item.CategoryID.ToString(),
                        //Burada Ternary Operatörünü kullanıyorum 
                        //itemden gelen id == kategoriid eşitse true olsun yani seçili olarak gelsin diyorum
                        Selected = (item.CategoryID == kategoriID  ? true : false),
                        
                    });
            }
            ViewBag.Kategoriler = kategoriler;
            return View();
        }

//Evet controller tarafımızda kodlarımızı yazdık sıra view kısmında yazacağımız koda geldi
@Html.DropDownList("Kategoriler", null, new { @class = "form-control" })
//Sayfamız açıldığında List miz otomatik olarak seçilmiş olarak gelecektir.

Html.DropDownList() Bildiğim kadarıyla anlatmaya çalıştım. 

Etiketler

Yorum Yap