ASP.NET MVC’de Ajax ve Json ile Dropdown Doldurma

Arkadaşlar herkese merhabalar,

Bugün sizlere Ajax çağrısı üzerinden Json türünde verileri alarak dropdownları nasıl dolduracağımızı anlatacağım.

Ama öncelikle Ajax ve Json nedir biraz onlardan bahsedelim.

Ajax (Asynchronous JavaScript And XML)

Kelime anlamı, eş zamansız olarak çalışabilen JavaScript ve XML. Okurken pek bir şey anlamadınız değil mi ? İlk duyduğumda bende de aynısı olmuştu. Semptomlar benzer demek ki. 🙂 O zaman lafı fazla uzatmadan, hemen açıklayalım.

Ajax, sayfanın herhangi bir yenilemeye ihtiyaç duymadan arka tarafa istek göndererek, verilerin ön  tarafta görüntülenmesi sağlar.

Json (JavaScript Object Notation)

Bir veri formatı olup, tüm programlama dilleri için geçerlidir. JavaScript uygulamaları için geliştirilmiştir. XML’den avantajı, daha küçük boyutta olması ve client tarafına daha az yük bindirmesidir.

Senaryomuz işe şu şekilde olacak ;

Sayfamız üzerinde İl ve İlçe adında iki tane açılır listemiz (dropdown) olacak. Seçilen ile göre ilçe dropdown’ımız dolacak.

Gerekli açıklamalarımızı yaptığımıza göre, .NET MVC’de Ajax ve JSON olayının nasıl gerçekleşeceğini görelim.

İl ve İlçe adında iki model oluşturup, bağlantıları da navigation property’ler aracılığıyla yapıyorum.

Buradaki bağlantılar ne anlama geliyor ? Bir il, birden çok ilçeye sahip olurken, bir ilçe de sadece bir ile kayıtlı olabilir.

İnternet üzerinden .sql uzantılı olarak bulduğum il ve ilçe verilerini de tablolara ekledikten sonra kodlama kısmına geçiyorum(Makalenin sonunda bu dosyaları da indirme linki şeklinde vereceğim).

HomeController adında bir Controller oluşturuyorum ve Index ActionResult’ı içerisinde işlemlerimi gerçekleştireceğim.

SehirIlceViewModel adında bir class oluşturuyorum. Bu class’ın görevi sayfa açıldığında ‘İl’ ve ‘İlçe’ dropdownlarımı doldurmak (Bu işi ViewBag ile de yapardık ancak tercih ettiğim bir yöntem değil).

İçerisine resimdeki gibi IEnumerable tipinde Sehirler ve Ilceler tanımlıyorum. Bu şekilde tanımlama yapmamın sebebi, dropdown’ın verileri SelectList tipinde almasıdır.

 

 

Index sayfasının ilk açılışında dropdownların dolması için gerekli kodları da ActionResult içerisine yazıyorum. İlk işim oluşturduğum ViewModel’in instance’ını almak ve dbContext üzerinden SelectList tipinde illeri ve ilçeleri doldurmak. Daha sonra ise ViewModel’i ön tarafa göndermek. O da şu şekilde ;

 

 

Ön tarafa geçmeden önce SelectList’in overloadlarına bi göz atalım.

SelectList içerisinde 2 nesne barındırır. Birincisi listelenecek olan verilerin değeri yani value’su, ikincisi ise ön tarafta nasıl görüntüleneceği yani text’i. Biz de burada 4.overloadını kullanıyoruz.

Verileri dropdownlarda nasıl göstereceğimize bakalım ;

Value ve text değerleri de şu şekilde ;

 

 

Görüldüğü gibi tüm il ve ilçe verilerini getirdik. Şimdi amacımız DrpSehirler dropdown’ından seçilen ile göre, ilçeler dropdown’ınını doldurmak. Bunun için öncelikle sayfamıza jquery.min.js dosyasını çekiyoruz ve Ajax çağrımızı yazmaya başlıyoruz.

Iller açılır listesinin seçilen değerine yani change fonksiyonu içerisine ajax çağrımızı yazıyoruz. Controller tarafına IlceDoldur adında bir JsonResult oluşturuyoruz ve seçilen ilin value’sını buraya gönderiyoruz. Success fonksiyonunda ise ilçe verileri başarıyla geldiğinde gelen veriyi for döngüsü ile dönerek Ilceler dropdown’ına value ve text şeklinde ekliyor.

Controller tarafındaki IlceDoldur JsonResult’ı ;

 

 

Veriler de bu şekilde ön tarafa geliyor.

Bugünlük anlatacaklarım bu kadar.

Esenle kalın…

İndirme linki

 

You may also like...

Bir cevap yazın

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