Asp .Net Core MVC üzerinde Sayfalama (Pagination) Nasıl Yapılır ?

Herkese Selamlar ! Bugün sizler ile beraber sayfalama yani pagination nasıl yapılır ona bir bakacağız . Özellikle bir sayfa üzerinde çok satırlı veri göstermek durumunda kaldığımız da bazen hem kullanıcı taraflı hem de yazılım geliştirmeni taraflı problemler ortaya çıkabiliyor. Bir sürü veriyi tek bir sayfa üzerinde göstermek demek aslında kullanıcının aramak istediği veriyi bulması için sayfa üzerinde dakikalarca aşağı inmek zorunda kalması anlamına gelebilir. Yazılım geliştirmeni tarafından baktığımız da ise çok satırlı verileri veri tabanı üzerinden çektikten sonra tek bir sayfa üzerinde göstermeye çalışmak ciddi performans sorunlarına sebep olabilir. Bu tarz durumlarda sayfalama kullanmak gerçekten başarılı bir çözüm yolu olacaktır. Yazımız içerisinde .net core mvc ve entity framework core kullanarak hazırladığım örnek üzerinden ilerleyeceğiz.

İlk olarak PaginationDB isminde bir veritabanı , içerisine ise Product isimli bir tablo yaratıyorum. Tablonun sütunları ise ProductID, ProductName , ve Discontinued isimli. ProductID tipi int , primary key ve otomatik artan . ProductName nvarchar(50) ve son olarak Discontinued ise bool tipinde . Bu aşamayı geçtikten sonra ise bir .net core mvc projesi başlatıyoruz. StartUp.cs in içerisnde ConfigureServices methodunun gövdesine ise 2 farklı kod satırı ekliyoruz. Bunlarda ilki ;

Services.AddMvc( ) methodu . Bu method aracılığı ile projemizi tam olarak bir MVC seklinde kullanmak ya da bir diğer şekli ile mvc hizmetini kullanmak istiyorsanız bu methodu ConfigureServices isimli methodun gövdesine ekliyoruz.

Ardından eklememiz gereken method ise Services.AddSingleton() fakat bu method tam olarak giriş yapmadan önce IActionContextAccessor tam olarak ne işe yarıyor bir onu açıklayalım sizlere. Bu görmüş olduğumuz nesne Context bilgilerimizin Controller tarafında tam olarak kullanılmasını sağlar Services. AddSingleton methodu sayesinde ise kullanacağımız nesneye her ihtiyac duyduğumuzda değil sadece bir sefer instance alınarak kullanılmasını sağlar.  

public void ConfigureServices(IServiceCollection services)
{
                             services.AddSingleton<IActionContextAccessor,ActionContextAccessor>();
            services.AddMvc();
}

Takiben ise Configure methodunun içerisine uygulamamızın standart routin kısmını ayarlıyoruz ve Startup.cs içerisinde işimiz bitiyor.

app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Product}/{action=Index}/{id?}");
            });

Projemize appsettings.json dosyasını ekleyerek yolumuza devam ediyoruz. Dosyamız içerisinde veri tabanına bağlanmamızı sağlayacak olan bağlantı ifademizi yazıyoruz.

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.;Database=PaginationDB;user id=sa;Password=YourPasswordMustBeHere"
  }
}

Yavaş yavaş uygulamamız şekilleniyor. Models klasörünün içerisine Product isimli bir sınıf ekliyoruz ve gövdesini veri çekeceğimiz tabloya göre oluşturuyoruz.

    [Table("Product")]

    public class Product
    {
        public int ProductID { get; set; }

        public string ProductName { get; set; }

        public bool Discontinued { get; set; }
 }

Sınfın üzerinde görmüş olduğunuz [Table(“Product”)]  veri tabanı içerisinde özellikle belirtilmiş olan bir tabloya map edilecek ise yani eşitlenecek ise kullanıyoruz . Bu sınıfı da tamamladıktan sonra DataContext isimli ayrı bir sınıf daha ekliyoruz. DataContext sınıfımıza DbContext sınıfımızdan kalıtım alıyoruz ki problemsiz bir şekilde Entity Framework Core yapısını kullanabilelim . DataContext sınıfımızın esas amacı ise daha önceden uygulamamıza eklemiş olduğumuz appsettings.json dosyamızda yer alan connection strings yani bağlandı ifadesini okumak ve doğru bir şekilde veri tabanı ile haberleşebilmektir. DataContext sınıfımızın gövdesini ise aşağıda ki gibi doldurabiliriz.

public class DataContext:DbContext
    {
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            var builder = new ConfigurationBuilder()
                                .SetBasePath(Directory.GetCurrentDirectory())
                                .AddJsonFile("appsettings.json");

            var configuration = builder.Build();

            optionsBuilder.UseSqlServer(configuration["ConnectionStrings:DefaultConnection"]);
        }

        public DbSet<Product> Product { get; set; }

    }

Controller tarafına tam olarak geçmeden önce sayfalama işlemini kolay bir şekilde yapmamızı sağlayan 3. Parti bir araç olan “PagedList.Core.Mvc” aracını Manage Nuget Packages üzerinden kuruyoruz projemize.

• 

Uygulamamızda ihtiyaç duyduğumuz altyapıyı neredeyse tamamladık. Bir adet Product isminde controller ekliyorum ve gövdesini aşağıda ki gibi kodluyorum.

using Microsoft.AspNetCore.Mvc;

using PagedList.Core;

using PaginationWithASPNETCoreWithEF.Models;

namespace PaginationWithASPNETCoreWithEF.Controllers
{
    [Route("Product")]
    public class ProductController : Controller
    {
        private DataContext _db = new DataContext();

        [Route("index")]
        [Route("")]
        [Route("~/")]
        public IActionResult Index(int page = 1, int pageSize = 3)
        {
            PagedList<Product> model = new PagedList<Product>(_db.Product,page,pageSize);

            return View("Index",model);
        }
    }
}

IActionResult içerisinde sayfalama içerisinde ihtiyaç duyacağımız 1 sayfa içerisinde kaç adet satır bulunacak kısmını ise Index methodunun içerisinde parametre olarak barındırıyoruz . Methodun gövdesinde ise PagedList üzerinden instance alıyoruz ve hangi nesne üzerinde çalışması gerektiğini 1 sayfa üzerinde kaç satır veri gözükmesi gerekiyor pagedlist nesnesi içerisine bunları parametre olarak giriyoruz.Methodun dönüş tarafında ise View kısmına yönlendirirken model ile beraber gönderiyoruz ki sayfalama yaptığımız her veriyi taşıyabilelim. Tüm bu aşamaları geçtikten sonra bir adet view eklememiz gerekmekte fakat View eklemeden önce son bir kısım daha var o da ViewImport . Uygulama içerisinde aslında uygulama yerine birden fazla view içerisinde ortak olarak kullanılmasını beklediğimiz directiveleri topladığımız bir yer var orası da ViewImport . Ayrı ayrı eklemek zorunda kaldığımız bir takım directivelari sadece bir adet ViewImport içerisine ekleyerek tüm viewlar tarafından kullanılmasını sağlayabiliriz. Şu an pek ihtiyacımız yok ama yine de bu yazı içerisinde bahsetmek istedim. Proje içerisine bir adet Razor View Import ekliyoruz ve gövdesini ise aşağıda ki gibi düzenliyoruz .

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *,PagedList.Core.Mvc

Geriye sadece tek bir iş kaldı o da View tarafını düzenlemek . View alanında sayfalamayı zaten harici bir araç üzerinden gerçekleştirdiğimiz için sadece veriyi uygun formatta ve bootstrap kullanarak göstermek kalıyor o kadar .

View kısmını ise aşağıda ki gibi düzenliyoruz.

@{
    Layout = null;
}

@model  PagedList.Core.IPagedList<PaginationWithASPNETCoreWithEF.Models.Product>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

    <table class="table table-hover">

        <tr>
            <th>ProductID</th>
            <th>ProductName</th>
            <th>Discontinued</th>
        </tr>
        @foreach (var product in Model)
        {
        <tr>
            <td>@product.ProductID</td>
            <td>@product.ProductName</td>
            <td>@product.Discontinued</td>
        </tr>
        }
        <tr>
            <td colspan="3" align="center">
                <pager list="@Model" asp-controller="Product" asp-action="Index"/>
            </td>
        </tr>
    </table>
</body>
</html>

Şu an her şey hazır . Uygulamamızın ekran görüntüsü ise aşağıda ki gibi;

• 

Bu yazılıkta bu kadar uygulamayı github adresimden indirebilirsiniz. Yazımı okuduğunuz için teşekkür ederim . Sonra ki yazılar da görüşmek üzere.