Programming Tutorials

Pagination in ASP.net core application

By: Linda Ng in Asp.net Tutorials on 2023-06-01  

To display a read-only grid of records with pagination in an ASP.NET Core view, you can follow these steps:

1. Create a model class to represent your records. For example, let's assume you have a Record class with properties like Id, Name, Description, and Date.

2. In your controller, retrieve the records from your data source and pass them to the view using a view model. The view model should include the records and pagination information. For example:

   public ActionResult Index(int page = 1, int pageSize = 10)
   {
       // Retrieve the records from your data source
       var records = GetRecordsFromDataSource();
   
       // Apply pagination
       var paginatedRecords = records.Skip((page - 1) * pageSize).Take(pageSize).ToList();
   
       // Calculate total pages
       var totalPages = (int)Math.Ceiling((double)records.Count / pageSize);
   
       // Create the view model
       var viewModel = new RecordViewModel
       {
           Records = paginatedRecords,
           PageNumber = page,
           PageSize = pageSize,
           TotalPages = totalPages
       };
   
       return View(viewModel);
   }
   

3. Create a view model class to represent the data passed to the view. For example:

   public class RecordViewModel
   {
       public List<Record> Records { get; set; }
       public int PageNumber { get; set; }
       public int PageSize { get; set; }
       public int TotalPages { get; set; }
   }

4. In your view (e.g., Index.cshtml), iterate over the records and display them in a grid format. You can use a table or any other HTML markup that suits your needs. Additionally, you can add navigation links for pagination. Here's an example:

   @model RecordViewModel
   
   <table>
   <thead>
   <tr>
   <th>Id</th>
   <th>Name</th>
   <th>Description</th>
   <th>Date</th>
   </tr>
   </thead>
   <tbody>
   @foreach (var record in Model.Records)
   {
   <tr>
   <td>@record.Id</td>
   <td>@record.Name</td>
   <td>@record.Description</td>
   <td>@record.Date</td>
   </tr>
   }
   </tbody>
   </table>
   
   <div>
   @if (Model.TotalPages > 1)
   {
   for (int i = 1; i <= Model.TotalPages; i++)
   {
   <a href="@Url.Action("Index", new { page = i, pageSize = Model.PageSize })">@i</a>
   }
   }
   </div>

This example demonstrates a basic implementation of a read-only grid with pagination. You may need to customize it based on your specific requirements and styling preferences.