Daha önce paylaştığım yazılarımda genel olarak problem çıkardığında kaynak bulmanın zor olabileceği konuları hedef aldım. Bu yazımda sizlere direkt olarak bir çözüm sunmayı istiyorum. ASP.NET MVC ile uygulama geliştirenler tablolarında sayfalandırma yapmak için genelde PagedList paketini kullanırlar. Ancak bu senkron bir çözümdür ve sayfalarda dolaşmak için bütün sayfaların tekrar tekrar yüklenmelerini gerektirir. Bu durumda JQuery’nin sağladığı hazır ajax fonksiyonları imdadımıza yetişir. Peki PagedList ile gelen veriyi JQuery ile nasıl sayfama yazdırırım.

public ActionResult GetList(int? page, int pageSize = 10)
    // Buraya başka kodlar
    var people = Person.GetPeople.AsQueryable();
    var pagedPeople = people.ToPagedList(pageNumber, pageSize);
    return Json(pagedPeople);
}

tarzında bir controller’dan sorguyu çekmek için :

$.getJSON('/Home/GetList', {page: 1, pageSize:10}, function(result){
    //Buraya veriyi satır satır yazdıracak mantık içeren kodlar
};

gibi bir javascript kodu işinizi görecektir. Ancak bu çözüm sayfamızdaki html tasarımında değişiklikler yaptığımızda bizlere problem çıkarmaktadır. Tasarımı temiz tutmak için knockoutjs kütüphanesini kullanacağız.

Yapılabilecek en basit örneği sizlere sunmak istiyorum. Öncelikte hâlihazırda oluşturduğumuz ASP.NET projemizde ‘Models’ klasörüne dosyaadı ‘Person.cs’ isminde bir sınıf ekleyelim. Eklediğimiz sınıf aşağıdaki gibi olsun:

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public Person(string name, string surname)
    {
         this.Name = name;
         this.Surname = surname;
    }
    public static List GetPeople = new List{
       new Person("Cahit", "Sıtkı"),
       new Person("Yaşar", "Kemal"),
       new Person("Nafiz", "Çamlıbel"),
       new Person("Mehmet Akif", "Ersoy")
       new Person("Nazım", "Hikmet")
       new Person("Ahmet Hamdi", "Tanpınar")
       new Person("Ahmet", "Haşim")
    };
}

‘Controllers’ dizini altındaki HomeController.cs dosyasına aşağıdaki kodu ekliyoruz:

public ActionResult GetList(int? page, int pageSize = 10)
{
    var people = Person.GetPeople.AsQueryable();
    var pageNumber = page ?? 1;
    var pagedPeople = people.ToPagedList(pageNumber, pageSize);
    return Json(new { items=pagedPeople.ToList(), metaData = pagedPeople.GetMetaData() },   JsonRequestBehavior.AllowGet);
}

Burada dikkatinizi çekmek istediğim nokta nesneleri Json ile parse ederken item adı altında bir liste ve metaData adı altında PagedList’in sayfa numarası, sayfa sayısı gibi bilgilerini barındıran bir anonim nesne oluşturduk.

Şimdi bize gereken bize gönderilen bu JSON verisini HTML sayfamıza bağlamak. Bunun için öncelikle View’ımıza aşağıdaki tabloyu ekliyoruz.

Pager.js isimli bir js dosyası oluşturup içine aşağıdaki kodu ekleyin.

function loadPagedData(url, pageSize) {
  var vm = function () {
    var self = this;
    self.Items = ko.observableArray([]);
    self.MetaData = ko.observable();
  }
  $(function () {
    $('#Next').click(function () {
      var parsedData = ko.mapping.toJS(model.MetaData);
      if (parsedData.HasNextPage)
      loadPage(parsedData.PageNumber + 1);
      });
      $('#Prev').click(function () {
        var parsedData = ko.mapping.toJS(model.MetaData);
        if (parsedData.HasPreviousPage)
        loadPage(parsedData.PageNumber - 1);
        });
        var model = null;
        function loadPage(pageNumber) {
          $.getJSON(url, { page: pageNumber, pageSize: pageSize }, function (data) {
            if (model == null) {
              model = new vm();
              model.Items = ko.mapping.fromJS(data.items);
              model.MetaData = ko.mapping.fromJS(data.metaData);
              ko.applyBindings(model);
            }
            else {
              model.Items(data.items);
              ko.mapping.fromJS(data.metaData, {}, model.MetaData);
              }
              }
            );
        }
        loadPage(1);
    });
}

ve HTML kodumuzun başına :

kodunu eklersek sayfamızda sayfalandırılabilir tablo kullanılabilir. Aynı kodu isteğiniz sayfada kullanabilirsiniz GetList aksiyonunda kullandığımız kalıbı kullanmak kaydıyla.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Items">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Surname"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                Page Number <span data-bind="text: MetaData.PageNumber"></span> of <span data-bind="text: MetaData.PageCount"></span><a id="Prev" href="javascript:;">< Prev </a> <a id="Next" href="javascript:;"> Next ></a>
            </td>
        </tr>
    </tfoot>
</table>

JSON ile gelen verilerin çeşitliliğine göre tbody de değişiklik yapabilirsiniz. Temel mantığı anladığınızı umuyorum.

Artık tek satırlık bir javascript kodu ile web sayfalarınızda sayfalandırma yapabilirsiniz. Bir sonraki yazımda görüşmek üzere hoşçakalın.