Paging example in ASP.Net Core MVC

In this article we will discuss Paging example in ASP.Net Core MVC.

Here we will explain how to implement Paging (Pagination) in ASP.Net Core MVC. Paging (Pagination) will be implemented using Entity Framework in ASP.Net Core MVC.

Before start this article, please visit our previous article Display data in GridView (Grid) in ASP.Net Core

Database

Here we use the customer database with below attributes and fields.

Downloading Entity Framework Core

We need to install the Microsoft.EntityFrameworkCore.SqlServer package using the following command.

Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 2.1.1

Model

Once the package is successfully installed, create a Folder named Models in your project and then a new class by right clicking the Models folder and then click on Add and then New Item option of the Context Menu. 

Then create the following properties inside the Model class.

Database Context

Now you will need to add a new class of database context as like below. Inside the class, first inherit the EntityFrameworkCore namespace and then inherit the DatabaseContext class.

Then using Dependency Injection, a Constructor is created DbContextOptions are passed as parameter and also the Constructor of base class i.e. DbContext class is inherited.

Finally, a DbSet Collection property of Customer Model class is created, which will be later used for holding the Data fetched from SQL Server Database Table.

Adding the Connection String inside AppSettings.json

The following Connection String setting has been added in the AppSettings.json file.

Configuring Database Context in Startup class

Inside the Startup class, the IConfiguration is injected in the Startup class and assigned to the private property Configuration.

Then the Connection String is read from the AppSettings.json file and is used to add the DbContext service.

Controller

There are two Action methods with the name Index, one for handling the GET operation while other for handing the POST operation.

GetCustomers method

The GetCustomers method accepts currentPage parameter. It has a fixed variable named maxRows which determines the maximum records to be displayed per page.

First an object of the CustomerModel class is created and then the records are fetched from the Customers table using Entity Framework and are set to the Customers property of the CustomerModel object.

The PageCount value is calculated by dividing the count of the records by the maximum rows to be displayed.

The currentPage parameter value is assigned to the CurrentPageIndex property.

The Paging is performed on the records using the Skip and Take functions.

The Skip function accepts the Start Index from the set of records to fetched i.e. if Page Index is 1 then the Start Index will be ( 1 - 1) * 10 = 0.

The Take function will fetch the rows based on the value of the maxRows variable.

GET operation

Inside the GET Action method, the GetCustomers method is called with the currentPage parameter value passed as 1 as when the View is accessed for the first time the records of the first page will be displayed.

POST operation

Inside the post Action method, the value of the CurrentPageIndex is passed to the GetCustomers method.

View

Inside the View, in the very first line the CustomerModel is declared as Model for the View.

The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.

• asp-action – Name of the Action. In this case the name is Index.
• asp-controller – Name of the Controller. In this case the name is Home.
• method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

For displaying the records, an HTML Table is used. A loop will be executed over the Customers property of the CustomerModel class which will generate the HTML Table rows with the Customer records.

For building the Pager, a FOR loop is executed from value 1 to the value of the PageCount property for generating an HTML Table for Pager.

When a HTML Anchor inside the Pager is clicked a JavaScript function named PagerClick is executed which sets the Index of the clicked Pager button into a HiddenField and then submits the form.

Output

The output of paging like below,

</> Find the Source Code in Github

  Summary

In this tutorial we discussed about of Paging example in ASP.Net Core MVC. If have any question related to this topic then give your feedback.