Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Asp.NET MVC’de JQuery İle İç İçe Bağımlı DropDownList(Cascading DropDownList)

İnternet kullanıcıları olarak bir foruma ya da sisteme kayıt olurken genellikle kayıt formlarında DropDownList nesnesi sayesinde bulunduğumuz şehri seçip ardında ilgili şehirle alakalı ilçelerin diğer DropDownList nesnesinde listelendiğini görürüz.Bu işlem Asp.NET Web Form platformunda UpdatePanel yardımıyla çok kolay bir şekilde yapılabilir.Ama mevzu Asp.NET MVC mimarisine gelince JQuery desteği almamız gerekmektedir.Tabi Post işlemi olmaksızın koşullardan bahsediyorum.Bu makalemizde Asp.NET MVC mimarisinde JQuery ile iç içe bağımlı DropDownList yani Cascading DropDownList mantığını ve yapımını irdeleyim.

Öncelikle yukarıdaki açıklamadan bir şey anlamayanlar için aşağıda ufak bir anlatım daha yapmayı öngörüyorum.
Mesela “A”,”B”,”C” ve “D” olmak üzere dört ana kategorimiz olsun ve bu dört ana kategorimize ikişer tane alt kategori oluşturalım.

A B C D
e f g ğ
h ı i o

Şimdi ana kategorilerimizi gösterecek DropDownList nesnemizde sadece “A”,”B”,”C” ve “D” kategorileri mevcut olacaktır.Eğer ben bu DropDownList nesnemizden “B” kategorisini seçersem, alt kategorileri listeleyek olan DropDownList nesnemizde sayfa Post olmadan JQuery sayesinde “f” ve “ı” kategorileri listelenecektir.

Mantık bu 🙂

Şimdi gelelim gerçek bir proje üzerinde bu işlemin nasıl yapılacağına.
Öncelikle boş bir MVC projesinde, Model katmanında “Kategori.cs” ve “AltKategori.cs” isminde iki sınıf oluşturalım ve aşağıdaki gibi içlerini dolduralım.

    public class Kategori
    {
        public int ID { get; set; }
        public string KategoriAdi { get; set; }
    }
    public class AltKategori
    {
        public int ID { get; set; }
        public int UstKategoriID { get; set; }
        public string KategoriAdi { get; set; }
    }

Controller katmanımızda, “Kategori(Controller).cs” adında bir Controller sınıfı oluşturalım ve “Index” isimli ActionResult tipinden olan metodumuzu aşağıdaki gibi dolduralım.

    public class KategoriController : Controller
    {
        public ActionResult Index()
        {
            Kategori Kategori1 = new Kategori { ID = 1, KategoriAdi = "A" };
            Kategori Kategori2 = new Kategori { ID = 2, KategoriAdi = "B" };
            Kategori Kategori3 = new Kategori { ID = 3, KategoriAdi = "C" };
            Kategori Kategori4 = new Kategori { ID = 4, KategoriAdi = "D" };

            List<Kategori> Kategoriler = new List<Kategori> { Kategori1, Kategori2, Kategori3, Kategori4 };

            ViewBag.KategoriListesi = new SelectList(Kategoriler, "ID", "KategoriAdi");
            return View();
        }
    }

Şimdi bu Index Action metodumuzun View katmanındaki görüntüsünü oluşturalım ve aşağıdaki gibi kodlayalım.

<script type="text/javascript">
    $(document).ready(function () {
        // Kategori seçildiğinde bu fonksiyonumuz çalışmaya başlayacaktır.
        $('#UstKategoriler').change(function () {
            // Seçilen Kategorinin ID sini alıyoruz.
            var KategoriID = $(this).val();
            /*Seçilen KategoriID sini kullanarak
            Kategori(Controller) sınıfı içerisindeki AltKategorileriGetir
            Action metodunu çağırıyoruz.
            Bu metoddan dönen liste sayesinde .each fonksiyonu ile 
            AltKategori isimli DropDownList nesnesini dolduruyoruz.*/
            if (KategoriID != null && KategoriID != '') {
                $.ajax({
                    type: "post",
                    url: '@Url.Action("AltKategorileriGetir", "Kategori")',
                    data: { KategoriID: KategoriID },
                    success: function (altkategoriler) {
                        $.each(altkategoriler, function (index, kategori) {
                            $('#AltKategoriler').append($('<option/>', {
                                value: kategori.ID,
                                text: kategori.KategoriAdi
                            }));
                        });
                    },
                    error: function () {
                        /*Bu metod ile Ajax işlemi başarısız
                        olursa eğer hata mesajı verebiliyoruz.*/
                        alert("Hata");
                    },
                    beforeSend: function () {
                        /*Burada ise Form Post edilmeden önce
                        işlemler yapılabilir.Örnek olarak Loading, yükleniyor vs..*/
                    },
                    complete: function () {
                        /*Burada ise Form Post edildikten sonra
                        işlemler yapılabilir.Örnek olarak yükleme tamamlandı vs..*/
                    }
                });
            }
        });
    });
</script>
@Html.DropDownList("UstKategoriler", ViewBag.KategoriListesi as SelectList, "---Kategori Seçiniz---")
@Html.DropDownList("AltKategoriler", Enumerable.Empty<SelectListItem>(), "---Alt Kategori Seçiniz---")

Dipnot !!! jquery-1.7.1.js kütüphanesini Layout ya da View sayfanıza eklemeniz gerekmektedir.

Yukarıdaki “Index.cshtml” sayfasındaki JavaScript kodlarını iyi inceleyiniz.Şimdi buna göre “Kategori(Controller).cs” sınıfımızda işlemler yapacağız.Kodlar arasına bakarsanız eğer yorum satırında “AltKategorileriGetir” isimli bir metod dan bahsetmişim.Şimdi bu metod isminde “Kategori(Controller).cs” isimli Controller sınıfımızda bir Action metod oluşturacağız.

        public ActionResult AltKategorileriGetir(int KategoriID)
        {
            AltKategori Kategori1 = new AltKategori { ID = 1, KategoriAdi = "e", UstKategoriID = 1 };
            AltKategori Kategori2 = new AltKategori { ID = 2, KategoriAdi = "f", UstKategoriID = 1 };
            AltKategori Kategori3 = new AltKategori { ID = 3, KategoriAdi = "g", UstKategoriID = 2 };
            AltKategori Kategori4 = new AltKategori { ID = 4, KategoriAdi = "ğ", UstKategoriID = 2 };
            AltKategori Kategori5 = new AltKategori { ID = 5, KategoriAdi = "h", UstKategoriID = 3 };
            AltKategori Kategori6 = new AltKategori { ID = 6, KategoriAdi = "ı", UstKategoriID = 3 };
            AltKategori Kategori7 = new AltKategori { ID = 7, KategoriAdi = "i", UstKategoriID = 4 };
            AltKategori Kategori8 = new AltKategori { ID = 8, KategoriAdi = "o", UstKategoriID = 4 };

            List<AltKategori> TumAltKategoriler = new List<AltKategori> { Kategori1, Kategori2, Kategori3, Kategori4, Kategori5, Kategori6, Kategori7, Kategori8 };

            List<AltKategori> altkategoriler = TumAltKategoriler.Where(k => k.UstKategoriID == KategoriID).ToList();
            return Json(altkategoriler);
        }

Bu metodun işlevi seçilen ana kategorinin ID si JQuery ile UstKategoriID parametresine gönderiliyor.Burada gerekli alt kategoriler çekildikten sonra Json ile geriye veri gönderilmekte ve alt kategorilerimiz “AltKategoriler” isimli DropDownList nesnemizde listelenmektedir.Burada dikkat etmemiz gereken noktalardan birisi, “Index.cshtml” dosyamızdaki JavaScript kodlarını incelersek eğer “success: function (altkategoriler)” satırında gördüğünüz “altkategoriler” isminde aynı veriyi geri göndermeniz gerekmektedir.Bende bu yüzden “AltKategori” tipinden olan koleksiyon nesnesinin referans adını “altkategoriler” olarak verdim.

Son olarak projemizi derleyip çalıştırdığımız zaman ekran görüntüsü aşağıdaki gibi olacaktır.
DropDownList

Asp.NET MVC mimarisinde genellikle sıkıntı yaşanılan ve çözümü nadir bulunan bu işlemi sizlere elimden geldiği kadar detaylı bir biçimde aktarmaya çalıştım.Faydalanmanız ve bir sonraki yazımda görüşmek dileğiyle..

İyi çalışmalar

Bunlar da hoşunuza gidebilir...

5 Cevaplar

  1. ömer fatih dedi ki:

    gerçekten çok faydalı oldu çok teşekkür ederim

  2. Serdar dedi ki:

    Selamın aleyküm bu konu benim için çok önemli ve acil Gencay Bey eğer yardımcı olursanız size ne kadar teşekkür etsem az olur bu mübarek ramazan ayında çok büyük sevap işlemiş olursunuz lafı çok uzattım konu şu sayfamda il ve ilçe dropdownlistlerim var birbirine veritabanından bağlı verileride veritabanından alıyor veri aldıkları tablolarda seo diye alan oluşturdum benim isteğim dropdownlistte il ilçe seçildiği vakit il ve ilçenin veritabanındaki seo sunu alsın ve o seo larla sayfaya yönlendirilsin seodakiler adres çubuğunda yazsın yapmak istediğim şey tam olarakta 90transfer.com sitesinde var sitenin banner ındaki arama sayfasını incelerseniz arama butonuna tıklayınca giden sayfanın url sini görmüş olacaksınız bu web sayfası asp ben bunu asp nete çevirmek istiyorum tabi bu konuda yeni olduğum içinde çok zorlandım hocam kime sorduysam ellerim boş döndüm yardımcı olursanız çok duacınız olurum kod şeklinde bir paylaşım yaparsanız çok makbule geçer ya da farklı bi şekilde iletişimede geçebiliriz skype watsapp falan yeterki yardımcı olun:)

  3. Aytekin dedi ki:

    Hocam gerçekten çok faydalı bir bilgi .Benim,yapmak istediğim bir projede her kullanıcı bir kurumdan randevu almakta, view sayfamda bir adet takvim bir adet ise saatlerin bulunduğu dropdown list var. ben o seçilen tarihte randevu olan saatleri disabled yapmam lazım nasıl bir yol izleyebilirim.

  4. Ercan Akar dedi ki:

    Merhaba,

    indirme linkini de vereydiniz keşke 🙂 Kendi localimde çalışmadı şimdi kontrol edicem tekrardan

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*