MVC – Pagination (PagedList) With Ajax

Merhabalar,

Yılbaşına yeni bir yazı ile giriyorum bkz: yılbaşına yalnız girmek , evet 🙂

Senaryo şu ; 4 farklı belge türü var ve bu belgelerin her birinden yüzlerce var. Bunları sayfamızda listelemek ve de sayfalamak için ise ajax kullanmak istiyoruz.

yukarıdaki yapıya benzer bir de yapımız olsun.

İçerikleri görebilmek/listeleyebilmek için “belgeleri gör” butonlarına tıkladığımızda ajax methodlarımız sayesinde controller a istek yollayıp oluşan collection ları partial view ile döndürebilip sonucu sayfanın view inde tanımladığımız id yada class lardan birinin içine gömebiliyoruz.

Bunun için de belgeleri gör ün onclick olayında belgeGetir(1) şeklinde bir method tanımlayabiliriz.Sunumları gör ün onclick inde bu durumda belgeGetir(2) diye tanımlama yapabiliriz.

JS

url de belirtilen path ile area nın altındaki controller ın içindeki method a parametre yi gönderecektir.Sonucu ise .docAdminResult isimli class ın altına döndürecektir.

Controller

Yukarıdaki method ile o id ye sahip veritabanında kayıtlı tüm dosyaların bilgilerini docAdminList isimli partial view e gönderecektir.  (getdocs(id) methodu iş katmanında sınıfa ait servis içerisinde bulunan bir methodtur.repository & singleton pattern ile yapılan geliştirmelerde veritabanına yapılan işlemleri bu şekilde kontrol edersiniz.buna daha sonra değinebiliriz,kısacası orada yapılmak istenen db deki id si 1 olan tüm kayıtların getirilmesidir.)

View

Buradaki view de ise yukarıdaki ajax method a dönecek olan sonucun yazılması istenen kısmı görebiliriz.Controller da belirtilen partial view de yine buradan çağırılmaktadır.

Partial View

docAdminList partial view ünde ise model den gelen collection ların filetype yani dosya tipine göre bloklayıp tıklanıldıklarında o belgeye götürecek yapıyı hazırlıyoruz.

Buraya kadar ki tüm yapının sonucu olarak “belgeyi gör” butonuna tıklanılmasıyla birlikte oluşacak yapı şudur; ne kadar pdf uzantılı dosya varsa dökülecektir.

Bizim istediğimiz ise tıklanılması ile birlikte dönen sonuç ilk 10 veya 20 kayıt idi.

Bunu sağlamak içinde mvc de pagedList paketini kullanacağız.

Manage Nuget Packages ta Paged List diye arattığımızda PagedList.Mvc yazılı paketi seçip yüklüyoruz.Projemizdeki Content klasörü altına PagedList.css dosyasını atmış olarak gelecektir. Bunu,sayfalama yapmak istediğimiz view lerin kullandığı layout unda tanımlıyoruz,yada bundle config ile çalıştıysanız oraya da tanımlayabiliriz.

Daha sonra da pagedList ile birlikte ajax methodlarını kullanabilmek için ;

jquery validate ve jquery validate unobstrusive kütüphanelerini de projeye ekliyoruz.

Sayfalamayı kullanabilmek için ilk olarak controller da değişiklik yapıyoruz.

Controller (Edit)

PagedList in dll lerini gösterdikten sonra controller a topagedlist methodunu yukarıdaki gibi kullanabiliriz. açıklamaları yazdığım için ekstra birşey söylemeye gerek yok.

Bu aşamadan sonraki değiştireceğimiz kısım ise partial view olacak,yani docAdminList.

Partial View (Edit)

@using PagedList
@using PagedList.Mvc
@model IPagedList<HausCloud.Data.Model.{Class İsmi}>

partial view de yukarıdaki model ve dll leri kullanacağımızı belirttikten sonra

bu kısım pagination yani sayfalama yapmamızı sağlayacak görselin kullanacağı methodları çağıran kod yapısıdır. Yeşil ile gösterilen  method ismi olup,EnableUnobstrusiveAjaxReplacing ile dönecek olan sonucun yine sayfa yenilenmeden partial a yazmamızı sağlayacağız. UpdateTargetId ise bu ikinci method tan dönecek olan result ın view deki hangi id altına yazılacağını gösterir. Yukarıdaki View başlığı altında id yi görebilirsiniz.

Id olarak belgeID artı sayfalama id sini göndermemin nedeni yukarıdaki senaryomdan kaynaklıdır.Hem belge türünü kontrol edip hem de onları sıralattırmam gerektiği için bu şekilde kullandım.

Şimdi gelelim burada çağırdığımız ikinci method un kod bloklarına;

ADocsLi

action a gönderdiğimiz ikili veriyi parçalarına ayırıp hem belge türü hem kaçıncı sayfada olduğu ile ilgili bilgileri alıp methodlarımızda işleyip partial view e tekrar geri gönderiyoruz.2.sayfanın 10 usu 3.sayfanın 10lusu şeklinde gidecektir.

Bu işlemler sonunda sayfalama başarıyla sağlanmış olacaktır.