Aranabilir DropdownList MVC Kullanmak ve Eklemek

MVC mimarisini kullanan bir web uygulaması geliştiriyorsanız muhtemelen arayüzde kullanacağınız componentleri bulmak biraz problem olacaktır. İşinizi görecek componentleri bulduktan sonra projeyi yazmak çok daha hızlı bir işlem olacaktır. Ancak bu componentleri bulabilmek bazen çok zaman alabilmektedir. Bazen internette ihtiyaçlarınızı tam karşılayan componentleri bulamayabilir ve kendi componentlerinizi yazmak zorunda kalabilirsiniz. Aranabilir DropdownList MVC componentine bir örneği bu yazıda ele alacağım ve nasıl ekelebileceğini anlatacağım.

Aranabilir DropdownList MVC Kullanmak

Chosen olarak isimlendirilen bir jQuery eklentisini MVC projemize searchable dropdownlist eklemek için kullanacağım. Bu eklentiyi eklenti indirme sayfasından indirebilirsiniz. İndirdiğiniz zip dosyasından chosen.jquery.min.js, chosen.min.css ve chosen-sprite.png dosyalarını projenize dahil edin.

İsterseniz bu dosyaları paylaşılan tasarıma dahil edin isterseniz aranabilir dropdownlisti kullanacağınız dosyaya dahil edin. Aranabilir comboboxı eklemek için ise kodlamanız şu şekilde olacaktır:

@Html.DropDownListFor(model => model.EklenecekDokumHareketi.Dokum.dokumID, new SelectList(Model.Dokumler, "dokumID", "dokumAdi"), new { id = "DokumDropDown"})

İşin aslında MVC projelerinde normalde DropDownList kullanmasını biliyorsanız ya da araştırırsanız yukarıdaki kodun normal işlemden pek de farklı olmadığını göreceksiniz. İş sihri ekleyeceğimiz Javascript dosyaları verecektir.

Sayfanın en altına ya da kendi oluşturduğunuz Javascript dosyasına aşağıdaki Javascript kodlarını ekleyin.

<script>
    $(function () {
        $("#DokumDropDown").chosen();
    });
</script>

Sonrasında cümlelerin başından itibaren arama yapabilen aranabilen comboboxınız olacaktır. Yukarıdaki kodlarda döküm listesi gibi bazı değişkenler kullandım. Türkçe’ye yakın yazdığım için neyin nereye konulacağını rahatlıkla anlayabileceğinizi düşünüyorum.

Normal bir dropdownlistte seçilen öğeyi aldığınız gibi bu componentte de seçilen öğeyi alabilirsiniz. İyi kodlamar.