DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Build a Simple Chat Server With gRPC in .Net Core
  • Ultimate Guide to FaceIO
  • Amazon Lightsail: Virtual Cloud Server
  • XSS Prevention Cheatsheet

Trending

  • Doris: Unifying SQL Dialects for a Seamless Data Query Ecosystem
  • Stateless vs Stateful Stream Processing With Kafka Streams and Apache Flink
  • Issue and Present Verifiable Credentials With Spring Boot and Android
  • *You* Can Shape Trend Reports: Join DZone's Software Supply Chain Security Research
  1. DZone
  2. Coding
  3. Languages
  4. Implement Pagination in .NET Core MVC Application With Custom HTML Helpers

Implement Pagination in .NET Core MVC Application With Custom HTML Helpers

In this tutorial, follow the steps to achieve pagination in a .NET Core MVC application by simply creating a custom HTML helper.

By 
Murali K user avatar
Murali K
·
Feb. 13, 22 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
3.1K Views

Join the DZone community and get the full member experience.

Join For Free

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.
HTML Helpers App Pagination

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."

C#
 
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.

C#
 
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.
C#
 
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
C#
 
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."

C#
 
@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."
C#
 
@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common

<link rel="stylesheet" href ="~/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

HTML application .NET

Opinions expressed by DZone contributors are their own.

Related

  • Build a Simple Chat Server With gRPC in .Net Core
  • Ultimate Guide to FaceIO
  • Amazon Lightsail: Virtual Cloud Server
  • XSS Prevention Cheatsheet

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!