Yazılım Mimarileri ve Tasarım Desenleri Üzerine

Asp.NET MVC – JQuery İle Scroll Paging(Sayfalama)

Gençay

Web sayfalarında verilerimizi listelerken sayfalamaya ihtiyaç duyuyoruz.Bu ihtiyacın temel kaynağı binlerce veriyi tek sayfada yoğunlaştırıp kullanıcıları yormamak olsa da serverdan gelen veri yoğunluğunu azaltmak ve sayfa oluşum aşamasındaki negatif etkileri ortadan kaldırmak gibi faktörlerde işin içine girmektedir.Bu durumda düzinelerce sayfalama yöntemleri ve algoritmaları mevcuttur.Tabi ki de bu algoritmalardan bir tanesinide kendinize özgü oluşturabilirsin.Bu hususta hiç bir sınırlama olmaksızın daha görsel ve animasyonel yapılar barındıran yöntemlerde icat edebilirsiniz.Velhasıl, şahsın biri düşünmüş ve Scroll Paging diye isimlendirdiğimiz animasyonda tavan yapan bir listeleme mantığı oluşturmuş.Aslında bu yapıyı Facebook kullanıcıları kullanmakta ve bazı internet sitelerinde de karşımıza çıkmaktadır.Bu makalemizin içeriğinde Scroll Paging nasıl yapıldığını detaylı bir biçimde adım adım irdeleyeceğiz.

Öncelikle bilmeyenler için Scroll Paging nedir izah edelim.
Scroll Paging, bir sayfada listelenen verileri scrollbar aracılığıyla sayfalamaktır.Scrollbar sayfanın sonuna geldiğinde listelenen verinin devamını dinamik olarak Ajax ve JQuery yardımıyla ilgili alana basmaktır.Hızlı örnek vermek gerekirse, Facebook anasayfasına girin ve scrollbar’ı sayfanın en aşağısına indirin.Kısa bir yüklemeden sonra hızlıca önceki yayın akışı karşınıza gelecektir.İşte şimdi bu mekanizmayı bu makalede teknik olarak tanımlayacağız. 😉

Yukarıda değindiği gibi Scroll Paging işlemi için Ajax ve JQuery’den yardım alacağız.Makalemizde örneklendirmeyi Northwind veritabanıyla gerçekleştireceğiz.Hadi başlayalım…

Öncelikle Visual Studio platformunda Asp.NET MVC projesi oluşturup anında Models katmanına bir Linq To Sql dosyası atıyoruz ve Northwind veritabanındaki Musteriler isimli tabloyu projemize entegre ediyoruz.

İşlemlerimizi örneklendirmek amaçlı bu tablo üzerinden gerçekleştireceğiz.

“Home(Controller).cs” isimli Controller sınıfı oluşturup, içerisindeki “Index” Action metodu üzerinde bu işlemi gerçekleştireceğim.Sizler kendi çalışmanıza göre uyarlayabilirsiniz.Bu makalenin tüm mevzusu bu Action görüntüsü üzerinde dönecektir.

Öncelikle “Index” Action’ımızı aşağıdaki gibi oluşturuyorum.

    public class HomeController : Controller
    {
        VeriTabaniDataContext Veri = new VeriTabaniDataContext();
        int SayfaBoyutu = 10;//Bir sayfada kaç adet listeleme yapılacak.

        public ActionResult Index(int? sayfano)
        {
            List<Musteriler> MusteriListesi = null;
            if (sayfano == null)
            {
                MusteriListesi = Veri.Musterilers.OrderByDescending(m => m.MusteriID).Take(SayfaBoyutu).ToList();
            }
            else
            {
                MusteriListesi = Veri.Musterilers.OrderByDescending(m => m.MusteriID).Skip(SayfaBoyutu * sayfano.Value).Take(SayfaBoyutu).ToList();
            }

            if (Request.IsAjaxRequest())
            {
                return PartialView("~/Views/Home/Partial/PartialMusteriler.cshtml", MusteriListesi);
            }
            return View(MusteriListesi);
        }
    }

Yukarıdaki kod bloğunu siz incelerken ben izah edeyim.

Evet, artık Controller katmanımız tüm işlemlerimiz için hazır.Şimdi sıra geldi View katmanını düzenlemeye.

“Index” Action metodun View katmanındaki “.cshtml” uzantılı dosyasını oluşturuyoruz.Ayriyetten, yukarıda 20. satırda dizinini belirttiğimiz PartialView’i de benzer dizinde “PartialMusteriler” adında oluşturuyoruz.Burada kafanız karışırsa eğer siz direkt olarak “~/View/Home/—PartialAdi—.cshmtl” olarakta oluşturabilirsiniz.Ben genellikle Partial’ları ilgili View katmanının altında bir Partial isimli klasör oluşturarak tuttuğum için makalede de aynı şekilde örneklendirmekteyim.

Öncelikle “PartialMusteriler” isimli Partial dosyamızı aşağıdaki gibi düzenleyelim.

@model IEnumerable<Calisma.Models.Musteriler>
    
@foreach (var item in Model)
{
    <div style="width:300px;border:ridge;">
        <p><strong>Müşteri Adı : </strong>@item.MusteriAdi</p>
        <p><strong>Adres : </strong>@item.Adres</p>
        <p><strong>Posta Kodu : </strong>@item.PostaKodu</p>
    </div>
}

Şimdi de “Index” isimli View dosyamızı aşağıdaki gibi düzenleyelim.

@model IEnumerable<Calisma.Models.Musteriler>

<div style="border-style:ridge;width:300px;background-color:black;color:white;font-size:25px;">Müşteri Listesi</div>
<div id="MusteriListesi">
    @Html.Partial("~/Views/Home/Partial/PartialMusteriler.cshtml", Model)
</div>

Şimdi bu şekilde projemizi derleyip çalıştırdığımız zaman ilk 10 veriyi ekranda göreceğiz.

Artık Scroll Paging ile geri kalan verilerimizi onar onar çekelim.

<script type="text/javascript">
    var SayfaSayisi = 0;

    $(window).scroll(function () {
        //Scroll hareket ettiği zaman devreye girer.
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            //Bu algoritma ile ScrollBar'ın sayfanın en aşağı indiği anı yakalarız.
            $.ajax({
                url: '/Home/Index',
                data: { sayfano: SayfaSayisi },
                //Index Action metodunun aldığı sayfano isimli parametreye SayfaSayisi değişkenindeki değeri gönderiyoruz.
                success: function (data) {
                    $("#MusteriListesi").append(data);
                    SayfaSayisi++;
                }
            });
        }
    });
</script>

Bu şekilde projemizi derleyip çalıştırdığımız zaman Scroll Paging işleminin başarıyla çalıştığını göreceksiniz.Lakin burada bir olası hatayı bilinçli bir şekilde es geçmiş bulunmaktayım.Aslında buna hata demek yanlış olacaktır.Buna bir performans kaybı ya da lüzumsuz server işlemi diye isim verebiliriz.Burada olayımız şudur.Scroll Paging ile ScrollBar’ı aşağı indirdikçe verilerinizi listeleyiniz.Sonuna kadar!!!En sonunda Server’dan liste boş geleceği için Scroll Paging işlemi yapılmayacaktır.Lakin ScrollBar her sayfanın sonuna geldiğinde Index Action’ı yeniden tetiklenecek ve serverda lüzumsuz bir iş yükü ortaya çıkacaktır.Bu durumu performanstan tutun, sistemin trafiğine kadar negatif sonuçlar doğurabilir.O yüzden script komutlarımızda aşağıdaki güncellemeyi gerçekleştirelim.

<script type="text/javascript">
    var SayfaSayisi = 0;
    var SayfaPost = true;
    //Sayfa hala Post edilebilir durumda mı değil mi kontrolü sağlayan değişkendir.
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            if (SayfaPost) {
                $.ajax({
                    url: '/Home/Index',
                    data: { sayfano: SayfaSayisi },
                    success: function (data) {
                        if ($.trim(data) == '') {
                            //Server'dan gelen veri boş ise
                            SayfaPost = false;
                            //SayfaPost değişkenini false yap.Bu sayede bir daha Server tetiklenmeyecektir.
                        } else {
                            $("#MusteriListesi").append(data);
                            SayfaSayisi++;
                        }
                    }
                });
            }
        }
    });
</script>

Evet, artık Scroll Paging ile sayfalamayı gerçekleştirip, listenin sonuna gelindiğinde de serverı tetiklemeyi durdurmuş olduk.

Aslında yazımız içerik olarak burada son bulmaktayken ek olarak görsellik katacak bir durumu eklemeyi göz ardı etmiyorum.Scroll Paging yapılırken verilerin bodoslama ilgili alana yapıştırılması hiç hoş gözükmemektedir.Bu işlem esnasında “Yükleniyor…” gibisinden bir pencere oldukça şık olabilir.

Aşağıda oluşturmuş olduğum div elemanını Index.cshtml sayfanızda herhangi bir yere ekleyiniz.

<div id="pencere" style="display:none;width:133px;height:25px;border:0 solid black;position:fixed;top:50%;left:50%;padding:2px;text-align:center;">
    Yükleniyorrrrr....
</div>
[code]

Şimdide script kodlarımızı aşağıdaki gibi güncellersek eğer her Scroll Paging işleminde "Yükleniyor" mesajı verilecektir.
[code lang="js"]
<script type="text/javascript">
    var SayfaSayisi = 0;
    var SayfaPost = true;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $("#pencere").show();
            //ScrollBar sona geldiğinde pencereyi göster...
            if (SayfaPost) {
                $.ajax({
                    url: '/Home/Index',
                    data: { sayfano: SayfaSayisi },
                    success: function (data) {
                        if ($.trim(data) == '') {
                            SayfaPost = false;
                        } else {
                            $("#MusteriListesi").append(data);
                            SayfaSayisi++;
                        }
                        $("#pencere").hide();
                        //Ajax işlemleri bittirip, sayfalama neticesinde ilgili verilerin ilgili alana bastırılmasından sonra pencereyi kapat.
                    }
                });
            }
        }
    });
</script>

Bu işlemden sonra makalemizin sonuna gelmiş bulunmaktayız.Son kez aşağıdaki videodan bu yapının nasıl çalıştığını net bir şekilde irdeleyebilirsiniz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Exit mobile version