Infinite Scroll Pagination (Sayfalama)

Merhabalar, bu yazımda Infinite Scroll Pagination uygulamasına bir örnek yapacağız.

Normal pagination dan farkı sayfanın alt tarafında numaralar şekilde bir geçiş yerine, sayfa aşağı doğru kaydırıldığında yeni verileri beklemeden hızlı bir şekilde yüklenmesi sağlayıp kullanıcı dostu bi bir işlem sağlamış oluyoruz. Çok uzatmadan kod kısmına geçelim.

İlk olarak controller taraflı kodlarımızı yazalım.

  int sayfaBoyutu = 10;
public ActionResult List(int? sayfaNo)
        {       
     IQueryable<Product> products = null;
            if (sayfaNo == null)
            {
    products = _productService.GetAll().OrderByDescending(x => x.Id).Take(sayfaBoyutu);
            }
            else
            {
    products = _productService.GetAll().OrderByDescending(x => x.Id).Skip(sayfaBoyutu * sayfaNo.Value).Take(sayfaBoyutu);
            }
            if (Request.IsAjaxRequest())
            {
    return PartialView("~/Views/Shared/_ProductPartial.cshtml", products);
            }
            return View(products);
        }

Yapıyı partial view i kullanarak ajax yapısıyla çalıştıracağız. Şimdi List action nun view ine gidelim.

@model IQueryable<Deneme.Entities.Product> 
<div class="row" id="ProList">
  @Html.Partial("~/Views/Shared/_ProductPartial.cshtml", Model) 
    </div>

@section script{
<script type="text/javascript">
       
            var SayfaSayisi = 1;
            var ajx = true;
            var SayfaPost = true;
            $(window).scroll(function () {

      if (ajx && $(window).scrollTop() > $(document).height() - $(window).height() - $("footer").height()) {
                    ajx = false;
 if (SayfaPost) {
                        $.ajax({
                            url: '/Home/List',
                            data: { sayfaNo: SayfaSayisi },
                            success: function (data) {

                                if ($.trim(data) == '') {
                                    SayfaPost = false;
                                }
                                else {

                                    $("#ProList").append(data);
                                    SayfaSayisi++;
                                }

                                ajx = true;
                             
                            }
                        })
                    }
                }
            })   
    </script>   
}


Şimdi bir tane _ProductPartial.cshtml adlı partial page oluşturalım.

@model IQueryable<Deneme.Entities.Product> 
@foreach (var item in Model)
{
    <div class="col-6 col-sm-4 ">
        <div>
            <p> @item.Name</p>
            <p> @item.Description</p>
            <p> @item.Price</p>
        </div>
    </div>
}

Evet bu bölümümüz bu kadar projeyi derleyip çalıştırdığınızda nasıl çalıştığını göreceksiniz.


Yazımın sonuna geldik. Bir sonraki yazımda görüşmek üzere. Sağlıcakla kalın.

Kaynak

https://www.gencayyildiz.com/blog/asp-net-mvc-jquery-ile-scroll-pagingsayfalama/

Bir cevap yazın