d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Implement Pagination in .NET Core MVC Application

In this article, let us try to build custom HTML helpers to provide pagination in the .NET Core MVC application.

This article expects the user to have basic knowledge of HTML helpers.

For those who do not have an idea of HTML helpers, here is a brief explanation.

  • HTML helpers make it easy and fast for developers to create HTML pages.
  • In most cases, an HTML helper is just a method that returns a string.
  • MVC comes with built-in HTML helpers like @Html.TextBox(), @Html.CheckBox(), @Html.Label, etc.
  • HTML helpers render html controls in razor view. For example, @Html.TextBox() renders <input type=”textbox”> control, @Html.CheckBox() renders <input type=”checkbox”> control, etc.

Please go through the Microsoft documentation on HTML helpers for more information. 

Need

In a web application, if a large number of records are to be displayed, it is required to provide pagination. In this article, we achieve pagination in a .NET Core MVC application by simply creating a custom HTMLHelper. To keep it simple, we just use numbers to represent data.

Say we need to display 55 records in multiple pages with 10 items on each page. With 10 items per page, we can display all the items in 6 pages as shown above. In real-time, the data could be a number of records that are fetched from a database, file, etc.

Let’s see how it can be done.

Steps

Open Visual Studio 2019 > Create .NET Core MVC Application as shown below.

Create a new project

Name your project as HTMLHelpersApp.

Configure your new project

Select .NET Framework Version.

Additional Information

Create the required models and helper files.

  1. Create a new model “Number’.”
  2. Right-click on the Model folder and add the “Number” class.

Model folder: add number class

Add new item

 

Add code in Number.cs. This model captures the user input. It has only one property: “InputNumber.”

using System;
using System.ComponentModel.DataAnnotations;

namespace HTMLHelpersApp.Models
{
    public class Number
    {
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^d+$", ErrorMessage = "Only numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber = 1;
    }
}

Now let us add a common class PageInfo.cs. Create new folder Common and add PageInfo.cs class.

  1. Right-click on the project folder and add a new folder.

Add a new folder

Add code in PageInfo.cs:

  1. Page Start indicates the first item on the current page.
  2. Page End indicates the last item on the current page.
  3. Items per page indicated the number of items to be displayed on a page.
  4. Last Page indicates the number of pages/last page number.
  5. Total Items indicate the total number of items.

Based on total items and items per page, the total number of pages, the first item, and the last items on a page are calculated.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace HTMLHelpersApp.Common
{
    public class PageInfo
    {
        public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; }
        public int CurrentPage { get; set; }

        public PageInfo()
        {
            CurrentPage = 1;
        }
        //starting item number in the page
        public int PageStart
        {
            get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
        }
        //last item number in the page
        public int PageEnd
        {
            get
            {
                int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
                return (currentTotal < TotalItems ? currentTotal : TotalItems);
            }
        }
        public int LastPage
        {
            get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
        }
        
    }
}

 Now we come to the most important part: creating the custom HTML helpers.

  1. Create custom HTML helper PageLinks which renders the page numbers, previous and next links.
  2. Add a new class “PagingHtmlHelpers.cs” in “Common” folder.
  3. Add code in “PagingHtmlHelpers.cs.”
  4. Extend HtmlHelper class and add new functionality to add Page links.
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)

5.  Takes 2 parameters

  1. pageInfo: to add the page numbers
  2. delegate to a function: takes an integer and string as parameters to add the parameters required in controller action method

Use tag builders to create anchor tags.

TagBuilder tag = new TagBuilder("a");
Add attributes
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");

Styles also can be applied as attributes.

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;

namespace HTMLHelpersApp.Common
{
    public static class PagingHtmlHelpers
    {
        public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
        {
            StringBuilder pagingTags = new StringBuilder();
            //Prev Page
            if (pageInfo.CurrentPage > 1)
            {
                pagingTags.Append(GetTagString("Prev", PageUrl(pageInfo.CurrentPage - 1)));

            }
            //Page Numbers
            for (int i = 1; i <= pageInfo.LastPage; i++)
            {
                pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
            }
            //Next Page
            if (pageInfo.CurrentPage < pageInfo.LastPage)
            {
                pagingTags.Append(GetTagString("Next", PageUrl(pageInfo.CurrentPage + 1)));
            }
            //paging tags
            return new HtmlString(pagingTags.ToString());
        }

        private static string GetTagString(string innerHtml, string hrefValue)
        {
            TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
            tag.MergeAttribute("class","anchorstyle");
            tag.MergeAttribute("href", hrefValue);
            tag.InnerHtml.Append(" "+ innerHtml + "  ");
            using (var sw = new System.IO.StringWriter())
            {
                tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
                return sw.ToString();            
            }
        }
    }
}

Search Solution Explorer

Add a new class “ShowPaging.cs” in “Models” folder.

  • DisplayResult will display the list of numbers on each page.
  • PageInfo will capture all the page details like the number of pages, total items, start item and last item on each page, etc.
using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace HTMLHelpersApp.Models
{
    public class ShowPaging
    {
        
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
        [RegularExpression(@"^d+$", ErrorMessage = "Only positive numbers are allowed. Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber { get; set; }

        public List<string> DisplayResult { get; set; }

        public PageInfo PageInfo;
    }
}

Now that we have the required models and helpers, let us create controllers and views.

Add a New Controller

Add a new controller: “HTMLHelperController”

Right-click on the controller folder and select controller in the context menu.

Select Controller

 

Select “MVCController-Empty.”

MVC Controller - Empty

 

Add Code in “HTMLHelperController.”

  • Number action is called for the user to enter the input number.
  • ShowPaging action is called to display the data on multiple pages.
    1. Called when page links are clicked
using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace HTMLHelpersApp.Controllers
{
    public class HTMLHelperController : Controller
    {
        private const int PAGE_SIZE = 10;
        public IActionResult Number()
        {
            return View();
        }

        public IActionResult ShowPaging(ShowPaging model, int page = 1, int inputNumber = 1)
        {
            if (ModelState.IsValid)
            {
                var displayResult = new List<string>();
                string message;

                //set model.pageinfo
                model.PageInfo = new PageInfo();
                model.PageInfo.CurrentPage = page;
                model.PageInfo.ItemsPerPage = PAGE_SIZE;
                model.PageInfo.TotalItems = inputNumber;

                //Set model.displayresult - numbers list
                for (int count = model.PageInfo.PageStart; count <= model.PageInfo.PageEnd; count++)
                {
                    message = count.ToString();
                    displayResult.Add(message.Trim());
                }
                model.DisplayResult = displayResult;
            }
            //return view model
            return View(model);
        }
    }
}

  • Create a new folder “HTMLHelper” in the Views folder.
    • Follow the same steps mentioned above to add a new folder. 
  •  Create a new view “Number.cshtml.”
    • Right-click on Views > HTMLHelper folder and add a new view.

Add a new view

Add Code in “Number.cshtml.”

@model HTMLHelpersApp.Models.Number

<h4>Number</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="ShowPaging" method="get">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="InputNumber" class="form-control"/>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Similarly, create a new view “ShowPaging.cshtml.”

  • Follow the same steps as mentioned above.
  • Add code in “ShowPaging.cshtml.”
@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common

<link rel="stylesheet" href ="https://dzone.com/articles/~/css/anchorstyles.css"/>
<form>
    <h4>Show Paging</h4>
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <dl class="row">
        <dt class="col-sm-2">
            <b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
        </dt>
        <dd>
            <a asp-action="Number">Change Number</a>
        </dd>
    </dl>

    <div>
        @if (Model != null && Model.DisplayResult != null)
        {
            <ul>
                @foreach (var item in Model.DisplayResult)
                {
                    <li>@Html.Raw(item)</li>
                }
            </ul>
            <div>
                @Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
                    new { page = x.ToString(), inputNumber = @Model.InputNumber }))
            </div>
        }
    </div>        
 </form>

Solution Explorer will be as follows:

Solution Explorer

 

We added all the required files. Before we run, let us configure the default controller and action in “startup.cs.”

Configure the default controller and action in "startup.cs"

Compile and run the application. Enter the input number as 35.

Enter input number

Click on Submit.

Submit

You see the paging at the bottom. 10 numbers are displayed on each page, so there will be 4 pages to display 35 numbers. As this is the first page, the “Prev” link is not displayed. Click on the page 2 link to see the “Prev” link.

Show paging

You can apply stylings to the page links as required.

Apply stylings to the page links

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this