jQuery Ajax ile HTML Tablo Doldurmak

Merhaba arkadaşlar,

Bugünkü yazımda, modern MVC Web projelerinde sıklıkla kullanılan jQuery Ajax ile HTML tablo oluşturma işlemini nasıl gerçekleştirebileceğinizi paylaşmak istiyorum.
Daha sonra dilerseniz ASP.NET Projelerinize’de bu örneği ufak tefek değişiklikler ile uygulayabilirsiniz.

İlk olarak senaryomuzdan bahsedeyim, ardından adım adım gerçekleştirelim.

Bu örnek sonunda site ziyaretçimiz, ekranında göreceği butona tıklandığında database’de yer alan üyeleri UserTypeId parametresine göre tablonun içerisinde görecek.

1) Öncelikle dataları getireceğimiz butonu ekliyor ve ardından butonumuzun Id’sini “btnLoadUserData” olarak tanımlıyoruz.

2) Dataların gösterileceği div’i sayfamıza ekliyoruz.

3) Controller tarafında ise yapımız şu şekildedir.
İşlemleri gerçekleşeceği controller’ın adı: UserController

4) _userListPartial adında, yeni bir Partial View oluşturuyoruz. Burada dikkat etmeniz gereken, Partial View’daki modelimiz, UserController‘daki GetMembers ActionResult’ından dönen model ile aynı olmalıdır.

5) Butona tıklandıktan sonra ne olacak peki ? Ajax Get ile UserContoller‘ın içinde yer alan GetMembers metodumuzu UserTypeId parametresini gönderiyoruz. GetMembers metodu bize liste dönderecektir. (İster liste, ister Dto döndürebilirsiniz. Bu yazımızda basit bir örnek üzerinden gideceğimiz için şimdilik liste göndermemiz, aklı karışan arkadaşlar için daha faydalı olacaktır. 🙂 )

The End… Hepsi bu kadar arkadaşlar 🙂

Paylaştığım örnek kodları ve işleyişi, kendi iş akışınıza uyarlayabilir, kolaylıkla projelerinizde kullanabilirsiniz.

Umarım jQuery Ajax ile Tablo Doldurma konusunda sorun yaşayan arkadaşlarımıza kolaylık sağlar. Bir sonraki yazımda görüşmek üzere, sağlıcakla kalın 🙂

Bir cevap yazın

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