mehmetduran.com - Paylaşmak Güzeldir...
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 deger isimli dropdown elementine eklenen option elementinin value özelliğine atanırken, diğeri metin isimli değer ise option elementinin text özelliğine atanmaktadır. Buradaki deger ve metin değ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.
Mehmet Duran 22 Şubat Pazartesi 2010 10 24745 4,4
jQuery Ajax Asp.net C Sharp Jquery DropDownList Eklenti Plugin Class Generic Class Linq List İndir Webmethod JSON
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net ve MySql ile Üyelik (MemberShip) Sistemini Kullanma Jquery Bütün Özellikler (E-Book) Asp.net MVC'de Kullanıcı Kontrolü (User Control) Kullanımı Asp.net ile Arşiv Bölümü Hazırlama - Örnek Uygulama Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Ahmet ŞAŞMAZ 24 Şubat Çarşamba 2010 09:31 #1
Gerçekten çok güzel bir paylaşım emeğine sağlık.Etiket Bulutu nasıl yapılır bu konuda da yazılarını bekliyorum.
Mehmet Duran 24 Şubat Çarşamba 2010 22:30 #2
Etiket bulutu konusunda birçok örnek var internet ortamında. Özellikle flash ile hazırlanan efektif uygulamalar var. Eğer fırsat bulursam bu konuda bir yazı hazırlamaya çalışırım.
Hasan Gürsoy 05 Mart Cuma 2010 16:06 #3
Güzel örnek. Bu arada sayaçlarda bir sorun mu var? amung.us 14 gösteriyor şu anda MD 229 online gösteriyor. Bir de bu istatistikler analytics'ten mi alınıyor yoksa sen mi kayıt ediyosun?
Mehmet Duran 05 Mart Cuma 2010 22:14 #4
Sayaç değerlerini kendim tutuyorum ama online değerinin sorunlu olduğunu biliyorum. Son dönemde oldukça yoğunum. Bu yüzden hiç ilgilenemiyorum. Fırsat bulunca düzeltmeye çalışacağım. Hatta bunu her sitede kullanılabilen bir widget yapmayı bile düşünmekteyim.
Berkay 22 Mart Pazartesi 2010 23:40 #5
Kardeşim örenek çok güzel olmuş indirip inceleme fırsatım oldu. Sorum şu burdaki downnlist sayısını üçe veya dörde nasıl çıkarabliriz.İlgilenirsen sevinirim.
Mehmet Duran 24 Mart Çarşamba 2010 00:53 #6
Net olarak şu şekilde yapılır diyemem. Çünkü yapmak istediğin uygulamanın ne olduğunu bilmek gerekir. Yapacağın uygulmaya göre kodları uyarlayabilir ve istediğini yapabilirsin.
Salih Selametoğlu 07 Nisan Çarşamba 2010 12:15 #7
Güzel bir çalışma olmuş teşekkür ederim. Fakat benim bir sorunum var. Verdiğiniz kod ile ilceler dropdown unu doldurduruyorum. fakat c# ile arkada erişmeye çalıştığımda içi boş gözüküyor neden olabilir ya da nasıl aşabilirim ? yardım ederseniz sevinirim.
Mehmet Duran 07 Nisan Çarşamba 2010 14:37 #8
Merhaba. Söylediğin sorunu daha önceki bir yazımda dile getirmiştim. Script ile işlem yaptığımız bir elementin değişmiş halini yine script ile kullanabiliyoruz. Server tarafında script ile değişikliğe uğramış bir elementin değişmiş halini elde edemiyoruz. Bunun nedeni script ile yapılan manipülasyonların client tarafında kalıp, server tarafına aktarılamamasından oluyor. Belirttiğiniz dropdown'u kullanabilmek için ya script tarafında kullanacağız ya da sayfanın postback olmasını ve verilerin server tarafında doldurulmasını (verilerin sayfanın kaynağında olmasını) sağlamamız gerekiyor.
OGAN 06 Şubat Pazar 2011 02:38 #9
Durgutcum çok güzel anlatmışsın ancak biz bu alttaki dropdown a server tarafından ulaşamadıkdan sonra pek bir anlam ifade etmiyor keşke onada bir çözüm bulsaydın. Benim aklıma şimdi birşey geldi, alttaki dropdown değiştiği zaman değerini js ile hidden text e yazacağım sonra şehiri oradan çekmeyi deneyecğeim umarım olur :)
Mehmet Duran 08 Nisan Cuma 2011 21:54 #10
@Ogan, eğer script ile böyle bir işlem yapıyorsan ve post ile bunu sunucu tarafında alacaksan söylediğin yöntem en ideal yöntem.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Gençken bilgi ağacını dikmesek, yaşlandığımız zaman gölgesine sığınacak bir yerimiz olmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009