jQuery Ajax ile Dropdown Etkileşimleri (Eklenti ile)

Bu yazımda jQuery Ajax işlemlerinde Dropdown elementleri arasında etkileşim sağlayan eklentimi paylaşacağım. Son dönemde bu konuda oldukça soru oldu. Bu sorulara ve isteklere cevap verebilmek adına kullandığım eklentiyi paylaşacağım. Bu eklenti ile bir dropdown elementini kontrol ediyoruz. Kontrol edilen dropdown üzerinde bir seçim yapıldığında Ajax ile seçilen değere göre ilişkili veriler alınıp, diğer bir dropdown elementine aktarılıyor. Bunun en çok kullanıldığı durum ise şehirlere ait ilçelerin alınmasıdır. Şimdi eklentiyi nasıl kullanacağımıza ve örneğimize göz atalım.

Öncelikle hazırladığım jQuery eklentsini buradan görebilirsiniz. Eklentinin adı DropIslem‘dir. Eklentinin mutlaka alması gereken 2 parametresi vardır. Biri Ajax isteğinde bulunulacak ve seçilen değerle ilişkili verileri getirecek olan adres (url) parametresi ve Ajax isteği sonucu verileri alacak olan elementin id değerini belirten hedef parametresidir. Bunları öğrendikten sonra eklentimizi aşağıdaki gibi kullanabiliriz.

  $(function() {
    $("#Sehirler").DropIslem({
      adres: "Default.aspx/Ilceler",
      hedef: "#Ilceler"
    });
  });

Bu şekilde eklentimizi kullanabiliyor, dropdown elementleri arasında etkileşim sağlayabiliyoruz. Ayrıca eklenti içinde Webmethod ile alınan ilişkili verilerin iki değeri söz konusudur. Biri degerisimli dropdown elementine eklenen option elementinin value özelliğine atanırken, diğeri metinisimli değer ise option elementinin text özelliğine atanmaktadır. Buradaki deger ve metindeğerlerini Webmethod ile gelen Json tipindeki verilerin içerdiği özelliklere göre değiştirebiliriz.

Örneği çalışır halde buradan görebilir, buradan da indirebilirsiniz.

Ayrıca örnek içerisinde C# 3.0 ile gelen Generic Class olan List yapısını kullandım ve ilişkili verileri çekerken de Linq sorgusu yazdım. Bu bakımdan bu konularda örnek arayanlar için de faydalı olacaktır.

İyi çalışmalar.