Home > Software engineering >  How to perform Pagination in ASP.NET Core MVC
How to perform Pagination in ASP.NET Core MVC

Time:05-31

I'm trying to do pagination on a table records in ASP.NET Core MVC and Entity Framework. I followed this video and this is my code:

Pager.cs

using System;

namespace WebApp.Models
{
    public class Pager
    {
        public int TotalItems { get; private set; }
        public int CurrentPage { get; private set; }
        public int PageSize { get; private set; }
        public int TotalPages { get; private set; }
        public int StartPage { get; private set; }
        public int EndPage { get; private set; }

        public Pager()
        {    
        }

        public Pager(int totalItems, int page, int pageSize = 10)
        {
            int totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
            int currentPage = page;
            int startPage = currentPage - 5;
            int endPage = currentPage   4;

            if (startPage <= 0)
            {
                endPage = endPage - (startPage - 1);
                startPage = 1;
            }

            if (endPage > totalPages)
            {
                endPage = totalPages;

                if (endPage > 10)
                {
                    startPage = endPage - 9;
                }
            }

            TotalItems = totalItems;
            CurrentPage = currentPage;
            PageSize = pageSize;
            TotalPages = totalPages;
            StartPage = startPage;
            EndPage = endPage;
        }
    }
}

ToursController:

public IActionResult AllTours(int pg = 1)
{
        List<Tour> tours = _context.Tour.ToList();
        const int pageSize = 9;

        if (pg < 1)
            pg = 1;

        int recsCount = tours.Count();
        var pager = new Pager(recsCount,pg,pageSize);
        int recSkip = (pg - 1)* pageSize;
        var data = tours.Skip(recSkip).Take(pager.PageSize).ToList();
        this.ViewBag.Pager= pager;

        return View(data);
}

Index.cshtml:

@model IEnumerable<WebApp.Models.Tour>
@{
    ViewData["Title"] = "Tours";
    Pager pager=new Pager();
    int pageNo = 0;

    if (ViewBag.Pager != null)
    {
        pager = ViewBag.Pager;
        pageNo = pager.CurrentPage;
    }
}
<div >
            @if(pager.TotalPages > 0)
                {
                    <div >
                        
                            <div >
                                <ul >
                                    @for(var pge = pager.StartPage;pge <= pager.EndPage;pge  )
                                    {
                                        <li active" : "")">
                                            <a asp-controller="Tour" asp-action="AllTours" asp-route-pg="@pge">@pge</a>
                                        </li>
                                    }   
                                </ul>    
                            </div>    
                    </div>
                }
        </div>

But this code is not doing pagination, when I click on the page number, I get this error:

This localhost page can’t be found No webpage was found for the web address: https://localhost:5001/Tour/AllTours?pg=2 HTTP ERROR 404

CodePudding user response:

Check the error message, It shows:

https://localhost:5001/Tour/AllTours?pg=2

But in your question, You provide your controller is ToursController, So try to change asp-controller="Tour" to asp-controller="Tours".

The point I am very confused about is your action name is AllTours, In general, the corresponding page is AllTours.cshtml, But you write Index.cshtml in your question, So I'm not sure if you wrote the question wrong or if you really wrote the page on Index.cshtml.

The default route template {controller=Home}/{action=Index}/{id?}, So If you write action AllTours to page Index.cshtml, The url will not correctly navigate to that page.

  • Related