During this session, we are going to talk about Paging in ASP.NET Core MVC and implement pagination on the list. If we have a list of records that exceed a limited number of records, we are facing some difficulties when we try to display the list. In this situation, loading time is increased, and browsing the page needs long scrolling depending on the number of the records. Moreover, the user does not have any estimation regarding the number of records. To solve the mentioned issues, we can implement paging on the available lists.
What are the benefits of pagination?
- Increase page loading time
- Facilitate page browsing
- Improve the appearance of the page
- Less data transfer
- Less scrolling
- Provide records number estimation
Implement Paging in ASP.ENT Core MVC
There are several ways that we can implement pagination in .NET Core MVC Application. But, in this tutorial we use X.PagedList.Mvc.Core NuGet package. Hence, first, we need to install the mentioned package via NuGet Package Manager Console.
Then, we can use the package’s method and Html Helper to implement pagination. Therefore, we use ToPagedList() method to send the paged list from the Controller to the View. Through this method, we can set the current page and the number of records per page.
Now, we modify CostController and Index action method for this purpose.
|
1 2 3 4 5 6 7 8 9 10 11 |
[HttpGet] public IActionResult Index(string searchby, string searchfor, int? page) { //var costs = costRepository.GetAllCost(); var costs = costRepository.GetCostList(searchby, searchfor).ToPagedList(page ?? 1, 5); return View(costs); } |
As you can see, we receive the page number through the input parameter and Query String which is not a mandatory option. Then, if the page variable return null, we set 1 as a default page. Also, the number of records per page is 5.
Next, we need to modify the respective View to implement pagination. As we use X.PagedList.Mvc.Core NuGet package, we need to import the required namespace to the view. Then, we can use PagedListPager Html Helper which is related to the mentioned package. This Html Helper needs the list of the records and a function that created the required page number and their link. Moreover, this Html Helper has an Option method which is PagedListRenderOptions. Thus, we can use it for pagination modification.
We try to implement it on Cost/Index View. You can see below the changes that we should apply to the view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@model IEnumerable<CostList> @using X.PagedList; @using X.PagedList.Mvc.Core; . . . @Html.PagedListPager((IPagedList) Model, page => Url.Action("Index", new {page = page, searchfor = @Context.Request.Query["searchfor"], searchby = @Context.Request.Query["searchby"]}), new X.PagedList.Web.Common.PagedListRenderOptions { LiElementClasses = new string[] {"page-item"}, PageClasses = new string[] { "page-link" } }) |
Also, the full page code is available below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@model IEnumerable<CostList> @using X.PagedList; @using X.PagedList.Mvc.Core; @{ ViewBag.Title = "Cost List"; } <div class="row"> <div class=col-3> <a asp-controller="cost" asp-action="create" class="btn btn-primary mx-2 my-2">Create New Cost</a> </div> <div class="col-6 offset-3"> <form asp-controller="Cost" asp-action="Index" method="get" class="my-2 mx-2"> <div class="input-group"> <select class="form-select" id="inputSearch" name="searchby"> <option selected value="">Search by...</option> <option value="comment">Comment</option> <option value="category">Category</option> </select> <input name="searchfor" class="form-control" id="inputSearch" aria-describedby="inputSearchComment" aria-label="Search"> <button class="btn btn-outline-secondary" type="submit" id="inputSearch">Search</button> <a class="btn btn-outline-primary" type="button" asp-controller="cost" asp-action="index">Clear Search</a> </div> </form> </div> </div> <table class="table table-dark"> <thead> <tr> <th>ID</th> <th>Amount</th> <th>Category</th> <th>Comment</th> <th>Payment Method</th> <th colspan="3" class="text-center">Actions</th> </tr> </thead> <tbody> @foreach (var cost in Model) { <tr> <td>@cost.ID</td> <td>@cost.Amount</td> <td>@cost.CategoryName</td> <td>@cost.Comment</td> <td>@cost.PaymentMethod</td> <form asp-controller="cost" asp-action="delete" asp-route-id="@cost.ID" method="post"> <td><a class="btn btn-primary d-block" asp-controller="cost" asp-action="detail" asp-route-id="@cost.ID">View</a></td> <td><a class="btn btn-info btn-block d-block" asp-controller="cost" asp-action="update" asp-route-id="@cost.ID">Edit</a></td> <td><button class="btn btn-danger btn-block d-block" type="submit">Delete</button></td> </form> </tr> } </tbody> </table> @Html.PagedListPager((IPagedList) Model, page => Url.Action("Index", new {page = page, searchfor = @Context.Request.Query["searchfor"], searchby = @Context.Request.Query["searchby"]}), new X.PagedList.Web.Common.PagedListRenderOptions { LiElementClasses = new string[] {"page-item"}, PageClasses = new string[] { "page-link" } }) |
Search in the Property with Null Value in EF Core
If we search in a property that has one or more records with the null value, the .NET Core throws an exception that is related to the null value. Hence, to control this expectation we should check the value of each record and if it is not null then check for the requested condition.
We have a search option for the Comment property of the Cost entity, which is nullable property. Thus we can change the previous session code same as the below code to resolve the mentioned issue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
public List<CostList> GetCostList(string searchby, string searchfor) { var CL = context.Costs.Join(context.Categories, costen => costen.CategoryID, caten => caten.ID, (costen, caten) => new { costen, caten }). Select(sel => new { sel.costen.ID, sel.costen.Amount, sel.costen.Comment, sel.costen.PaymentMethod, sel.caten.CategoryName }).ToList(); if(searchby == "comment" && searchfor != null) { CL = CL.Where(ser => ser.Comment!=null ? ser.Comment.ToLower().Contains(searchfor.ToLower()) : ser.Comment != null).ToList(); } if (searchby == "category" && searchfor != null) { CL = CL.Where(ser => ser.CategoryName.ToLower() == searchfor.ToLower()).ToList(); } List<CostList> costList = new(); foreach (var cost in CL) { costList.Add(new CostList { ID = cost.ID, Amount = cost.Amount, Comment = cost.Comment, PaymentMethod = cost.PaymentMethod, CategoryName = cost.CategoryName }); } return costList; } |