.Net Core Pagination (Sayfalama)

Merhabalar, bu yazımda Asp .Net Core Mvc de pagination (sayfalama) uygulamasına bir örnek yapacağız. Hemen başlayalım.

Projemizin models klasörünün içine “PaginatedList” adında bir class açıyoruz. İçini aşağıdaki gibi dolduruyoruz.

 public class PaginatedList<T> : List<T>
    {
        public int PageIndex { get; private set; }
        public int TotalPages { get; set; }

        public PaginatedList(List<T> items, int count, int pageIndex, int pageSize)
        {
            PageIndex = pageIndex;
            TotalPages = (int)Math.Ceiling(count / (double)pageSize);
            this.AddRange(items);
        }
        public bool PreviousPage
        {
            get
            {
                return (PageIndex > 1);
            }
        }
        public bool NextPage
        {
            get
            {
                return (PageIndex < TotalPages);
            }
        }
        public static async Task<PaginatedList<T>> CreateAsync(IQueryable<T> source, int pageIndex, int pageSize)
        {
            var count = await source.CountAsync();
            var items = await source.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToListAsync();
            return new PaginatedList<T>(items, count, pageIndex, pageSize);
        }
    }

Sonra ilgili action’ın içine gelip çağırdığımız veriyi aşağıdaki gibi düzenliyoruz.

public async Task<IActionResult> Index(int? pageNumber = 1)
        {
       var prod= _productService.GetAll();
    var list = await PaginatedList<Product>.CreateAsync(prod, pageNumber.Value, 10);
            return View(list);
        }

Sonra action’ın view’ine geliyoruz.

@model PaginatedList<Blog.Entities.Product>

     //.....Veriyi dönüyoruz

  @{
  var prevDisabled = !Model.PreviousPage ? "disabled" : "";
  var nextDisabled = !Model.NextPage ? "disabled" : "";
   }
 <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item @prevDisabled">
               <a class="page-link " asp-action="Index"
 asp-route-pageNumber="@(Model.PageIndex-1)">Previous</a>
            </li>

            <li class="page-item @nextDisabled">
               <a class="page-link " asp-action="Index"
 asp-route-pageNumber="@(Model.PageIndex+1)">Next</a>
            </li>
         </ul>
 </nav>


Evet her şey bu kadar. Projeyi derleyip çalıştırabilirsiniz.

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

Bir cevap yazın