ASP.NET MVC Ajax ile Jquery DataTable Kullanımı

Arkadaşlar merhabalar,

Bir önceki DataTable yazımda model üzerinden işlemlerimizi gerçekleştirmiştik. Şimdi ise Ajax ile DataTable’ımızı nasıl dolduracağız ona bakacağız.

Başlamadan önce model ile arasında ne fark var onu belirteyim. DataTable’ın Client Side işlemini anlatan sayfasında 50 bin kayıt ile işlem yapılmış. Ancak biz model ile 50 bin kaydı veritabanımızdan alıp, foreach ile de tabloya basarsak, saniyelerce sayfamızın açılmasını bekleriz. 🙂 Bu da bizim istediğimiz bir durum değil tabi ki.  O yüzden imdadımıza Ajax yetişiyor.

Hadi o zaman başlayalım. 🙂

İşlemlerimi Northwind veritabanı üzerinden gerçekleştireceğim.

Öncelikle sayfama JQuery ve DataTable için gerekli olan CDN scriptlerini ekliyorum.

Oluşturduğum Controller içerisine, geri dönüş tipi Json olan bir JsonResult oluşturduktan sonra tablodan belirlediğim kolonların verisini alıyorum.

Not: ActionResult açıp, geri dönüş değerini Json olarakta verebilirdik. İkisi de aynı görevi görecektir.

View tarafına geliyorum ve Ajax isteğimi yazmaya başlıyorum.

Url : JsonResult’ımın ve bulunduğu Controller’ın  ismi. ASP.NET MVC kullandığımız için @Url.Action ile Ajax’ta url belirtebiliyoruz.
dataType : Ajax isteği sonucu dönecek verinin tipini belirtiyoruz.

Success fonksiyonunda ise istek başarılı olduğunda ne yapılacağını yazıyoruz.

HTML olarak oluşturduğumuz id’si tblCustomer olan tabloyu DataTable yapacağımızı, dilinin Türkçe olacağını ve dil dosyasının yolunu belirtiyoruz.

data : DataTable’ın veri kaynağını belirtir. Biz de Ajax’tan gelen result adındaki veriyi, DataTable’a kaynak olarak veriyoruz.

Columns : Arkadan gelen verinin kolonlarının nereye yerleşeceğini belirtiyoruz. İlk kolona Name, ikinci kolona Title vs. şeklinde verdik. Çünkü arka taraftan bu sıra ile çekmiştik.

Ve tablonun HTML kısmını da oluşturuyoruz.

Sonucumuz ise bu şekilde ;

Bugünlük anlatacaklarımın sonuna geldik. Bir sonraki makalede görüşmek üzere.

Esenle kalın…

You may also like...

Bir cevap yazın

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