how to create pagination in mvc core project

Question

Jignesh Kumar · Answer

Hello Poesa, You can take a look at this article which will help you with step-by-stpe implementation. https://www.c-sharpcorner.com/article/implementing-pagination-and-filtering-options-to-optimize-api-responses-and-hand/

Jaish Mathews · Answer

It is recommended to leverage third-party controls for pagination. While this involves a one-time investment, these controls often provide additional functionalities that can be utilized across multiple features, maximizing value and efficiency. Below is a general approach. Pagination is an essential feature for managing large data sets in an ASP.NET MVC Core project. Here's a step-by-step guide to implementing pagination: 1. Create a Model for Pagination Define a model to hold pagination-related information. public class PaginatedList { public List Items { get; private set; } public int PageIndex { get; private set; } public int TotalPages { get; private set; } public PaginatedList(List items, int count, int pageIndex, int pageSize) { PageIndex = pageIndex; TotalPages = (int)Math.Ceiling(count / (double)pageSize); Items = items; } public bool HasPreviousPage => PageIndex > 1; public bool HasNextPage => PageIndex > CreateAsync(IQueryable source, int pageIndex, int pageSize) { var count = await source.CountAsync(); var items = await source.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToListAsync(); return new PaginatedList (items, count, pageIndex, pageSize); } } 2. Modify Your Controller Fetch data and implement pagination in the controller. using Microsoft.EntityFrameworkCore; public class ProductsController : Controller { private readonly ApplicationDbContext _context; public ProductsController(ApplicationDbContext context) { _context = context; } public async Task Index(int pageIndex = 1, int pageSize = 10) { var products = _context.Products.AsQueryable(); // Assuming Products is your DbSet var paginatedList = await PaginatedList .CreateAsync(products, pageIndex, pageSize); return View(paginatedList); } } 3. Update Your View Display pagination controls and the data. @model PaginatedList Name Price @foreach (var item in Model.Items) { @item.Name @item.Price } @if (Model.HasPreviousPage) { Previous } @if (Model.HasNextPage) { Next } 4. Add Styling (Optional) Use CSS or a framework like Bootstrap to enhance the pagination controls. @if (Model.HasPreviousPage) { Previous } @for (int i = 1; i @i } @if (Model.HasNextPage) { Next } 5. Run and Test Start your application and navigate to the relevant page. Verify that the pagination controls work correctly and fetch the corresponding data. Let me know if you need further clarification or assistance!

how to create pagination in mvc core project

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)