Asp.Net Core ile Sayfalama Nasıl Yapılır?

Asp.Net Core ile Sayfalama Nasıl Yapılır?

umutduran

26 Tem, 2020 07:56

umutduran

Merhaba arkadaşlar,

Bu gün sizlere .Net Core projelerinizde uzun listelerin oluştuğu, özellikle blog gibi yapılarda sürekli aşağı doğru inen blog yazıları listelerinin olduğu kısımları nasıl sayfalama ile bölebilirsiniz bunu anlatacağım. Öncelikle bunu yapmanın en kolay yolu bir Component oluşturmak olacak. Sebebi projede sadece tek sayfada değil bir çok farklı kısımda sayfalama yapmak zorunda kaldığınız da kolayca kullanabileceğiniz bir yapı oluşturacağız.

Şimdi başlayalım, öncelikle projemize Paged isimli bir klasör oluşturun. Bu klasörün içerisinde kullanacağınız class dosyaları yer alacak.

İlk oluşturacağımız dosyadan başlayıp sırası ile içeriklerini aşağıda yazıyorum.

LinqExtensions.cs

public static class LinqExtensions
    {
        public static PagedResult<T> GetPaged<T>(this IList<T> query, int page, int pageSize) where T : class
        {
            var result = new PagedResult<T>();
            result.CurrentPage = page;
            result.PageSize = pageSize;
            result.RowCount = query.Count();

            var pageCount = (double)result.RowCount / pageSize;
            result.PageCount = (int)Math.Ceiling(pageCount);

            var skip = (page - 1) * pageSize;
            result.Results = query.Skip(skip).Take(pageSize).ToList();

            return result;
        }
    }

PagedResult.cs

public class PagedResult<T> : PagedResultBase where T : class
    {
        public IList<T> Results { get; set; }

        public PagedResult()
        {
            Results = new List<T>();
        }
    }

PagedResultBase.cs

 public abstract class PagedResultBase
    {
        public int CurrentPage { get; set; }
        public int PageCount { get; set; }
        public int PageSize { get; set; }
        public int RowCount { get; set; }

        public int FirstRowOnPage
        {

            get { return (CurrentPage - 1) * PageSize + 1; }
        }

        public int LastRowOnPage
        {
            get { return Math.Min(CurrentPage * PageSize, RowCount); }
        }
    }

Paged klasörü içerisinde yukarıdaki dosyaları oluşturduysak şimdi ana dizine ViewComponents isimli bir klasör oluşturuyoruz.

İçine PagerViewComponent.cs isimli bir dosya oluşturuyoruz ve aşağıdaki kodları yazıyoruz.

PagerViewComponent.cs

public class PagerViewComponent : ViewComponent
    {
        public Task<IViewComponentResult> InvokeAsync(PagedResultBase result)
        {
            return Task.FromResult((IViewComponentResult)View("Default", result));
        }
    }

Daha sonra Shared klasörümüze Components isimli bir klasör açıyoruz. Bu klasörde bütün componentlerimiz olacağından içine bir de Pager isimli bir klasör açıyoruz. Bu bizim sayfalama tasarımımızın içerisinde bulunduğu klasör olacak. İçine Default.cshtml açıp aşağıdaki kodları ekliyoruz.

Default.cshtml

@model PagedResultBase
@{
    var urlTemplate = Url.Action() + "?sayfa={0}";
    var request = ViewContext.HttpContext.Request;
    foreach (var key in request.Query.Keys)
    {
        if (key == "sayfa")
        {
            continue;
        }

        urlTemplate += "&amp;" + key + "=" + request.Query[key];
    }

    var startIndex = Math.Max(Model.CurrentPage - 2, 1);
    var finishIndex = Math.Min(Model.CurrentPage + 2, Model.PageCount);
}

<nav class="blog-pagination justify-content-center d-flex">
    @if (Model.PageCount > 1)
    {
    <ul class="pagination">
        <li class="page-item">
            <a href="@urlTemplate.Replace("{0}", "1")" class="page-link" aria-label="Previous">
                <span aria-hidden="true">
                    <span class="lnr lnr-chevron-left"></span>
                </span>
            </a>
        </li>
        @for (var i = startIndex; i <= finishIndex; i++)
        {
            @if (i == Model.CurrentPage)
            {
                <li class="page-item active"><div class="page-link">@i</div></li>
            }
            else
            {
                <li class="page-item"><a href="@urlTemplate.Replace("{0}", i.ToString())" class="page-link">@i</a></li>
            }
        }
        <li class="page-item">
            <a href="@urlTemplate.Replace("{0}", Model.PageCount.ToString())" class="page-link" aria-label="Next">
                <span aria-hidden="true">
                    <span class="lnr lnr-chevron-right"></span>
                </span>
            </a>
        </li>
    </ul>
    }

Evet herşey bu kadar arkadaşlar. Şimdi ise bu yazdığınız componenti nasıl kullanırız onu anlatayım. Öncelikle biz bu sayfalamayı nerede kullanacaksak o sayfanın altına şu şekilde çağırıyoruz.

@(await Component.InvokeAsync<PagerViewComponent>(Model))

Daha sonra Controller sayfamızda menüyü, blog yazılarını vb. artık neyi listeleyecekseniz, listelediğiniz alana 

var sayfa = 1;
List<BlogYazilari> yazilar = new List<BlogYazilari>();
var dataPage = yazilar.GetPaged(Convert.ToInt32(sayfa), 10);
View(dataPage);

şeklinde yazıyoruz. 

Şimdi biz burada ne yaptık ? Öncelikle bir liste oluşturup blog yazılarımızı içerisine attık. Daha sonra GetPaged() kullanarak kaçıncı sayfadan kaç veri çekeceğimizi belirttik. 

Default.cshtml içerisindeki bu kod tarayıcıdan sayfalama yapılırken oluşturulan sayfa sayısını kolayca kod kısmına ulaştıralım diye bize QueryString ile bir sayfa değişkeni veriyor. Bizde bunu işleyerek kaçıncı sayfayı çağıracağımızı ve kaç satır çağıracağımızı GetPaged() ile belirtiyoruz.

var urlTemplate = Url.Action() + "?sayfa={0}";

Evet arkadaşlar bu kadar basit. Aklınıza takılan bir problem olursa yorumlarda bana danışabilirsiniz.

İyi Bloglamalar!

Aşağıya mail adresini girerek web sitemdeki makalelere abone olabilirsin. İlgini çekecek bir makale yazdığım zaman seni haberdar edebilirim!

Yorum Yap

*HTML kodlarına izin verilmemektedir. Düz metin olarak yorum giriniz.