Set Paging Size In ASP.NET MVC

This article is an answer to the following searches.

• Set Paging Size in ASP.NET MVC 
• Pagination in ASP.NET MVC
• ASP.NET MVC Paged list Page Size Dropdown List
• How to set Page Size inASP.NET MVC?
• How to assign page size dynamically by ASP.NET MVC?

In this article, you will come to know how to set the paging size in ASP.NET MVC.

Many times, our INDEX page has several records, say, greater than 50 records. If you do not do paging, all 50 records will come at one time. For a user to view all the 50 records, they will have to go through scrolling down and down. With the help of paging, you can set the limit to display the total number of records at a time.

Example

ScenarioSr. No.	Total Records	Paging Size(To display nos. of records in one page)	Total Pages
1	50 records	5	10 Page Nos.(1,2,3,4,5,6,7,8,9,10)
2	50 records	10	5 Page Nos. (1,2,3,4,5)
3	50 records	15	4 Page Nos.(1,2,3,4) (4 pages because within 3 pages it will cover 45 records rest 5 records goes to page no. 4)

In the third scenario, you see that 50 records take four paging, which means

1^st page          = 01 - 15 records

2^nd page         = 16 - 30 records

3^rd page         = 31 - 45 records

4^th page          = 46 - 50 records

You will come to know about more in step by step implementation section.

Benefits of Pagination in Web Application

1. Reduce pressure on the server - Server easily processes the small chunks of records and back to the user.
2. Fast page processing - Page load will be faster.

What is PagedList.MVC?

An HtmlHelper method generates the paging control with the use of PagedList Library. With the help of IEnumerable(T), you can create pagination but you have to define the page size.

For more detail related to PagedList.MVC, plesae visit following link.

• https://www.nuget.org/packages/PagedList.Mvc/4.5.0#
• https://www.nuget.org/packages/PagedList/

Step by step implementation

In this section, you will see step by step implementation. I will suggest you follow the same steps at your end to learn perfectly.

STEP 1 - Table Sturcture and Creation

Before you start working on Visual Studio, first, create a table and fill it with some records (around 20 or more).

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tblInvoices](
    [InvoiceID] [int] IDENTITY(1,1) NOT NULL,
    [InvoiceDate] [datetime] NULL,
    [ClientName] [nvarchar](50) NULL,
    [ClientZone] [nvarchar](50) NULL,
    [InvoiceAmount] [int] NULL,
 CONSTRAINT [PK_tblInvoices] PRIMARY KEY CLUSTERED
(
    [InvoiceID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

STEP 2

Create a new project called “SetPagingSite”.

After pressing OK button, select the blue color bordered options. Select MVC option and click on "Change Authentication" button. Then, change to No authentication.

STEP 3

Select Solution Explorer and right-click on the project name, select Add --> New Item.

Or

Simply press CTRL + SHIFT + A  to insert a new item called ADO.NET Entity Data Model.

Select ADO.NET Entity Data Model item and name it as “InvoiceModel”.

Select "Code First from database".

After your database is connected, select "tblInvoices".

After inserting ADO.NET Entity Data Model called “InvoiceModel”, you can see the followig changes into your project.

Two files are added -

1. cs - Model File.
2. cs - DbContext Class

Web.Config file and Reference are updated with Entity Framework and Connection Strings.

After the above activities get completed, now we go for inserting PagedList.MVC into project through NuGet.

STEP  4

Select Solution Explorer, right-click on the project name, and select "Manage NuGet Packages".

Select PagedList.MVC as shown in the image. You can see a short description of PagedList.MVC which bordered in blue.

Click on "Install" button to install PagedList.MVC NuGet package. As we click on "Install", the following dialog box will appear. Select OK to install.

In output window, you can see the following messages.

STEP  5

Now, let us work on Controller. By default, we got Home Controller which is in the Controllers folder.

Double click on Home Controller.

Now, insert a new method called InvoiceList.

public ActionResult InvoiceList()
       {
           return View();
       }

Right-click on InvoiceList method and select Add View… option.

Please build the solution here before going to create Add View…

As you click on Add View… option, select the following value as per Add View dialog box.

STEP  6

Now, change the default action method to execute. Switch to Solution Explorer, click on “App_Start” folder, and double click on file named ”RouteConfig.cs” to change the default method to execute. By default, Home controller’s Index Action Method is executing. Now, let us change the Action Method to “InvoiceList”. That's all.

After changing RouteConfig.cs, our file looks like this.

Code in RouteConfig.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace SetPagingSize
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "InvoiceList", id = UrlParameter.Optional }
            );
        }
    }
}

STEP 7 

Write the Controller Action Method and update the generated View. Use Namespace in HomeController.cs using PagedList;

Now, let us write the code for our Home Controller’s InvoiceList method.

InvoiceList Action Method

//To return all Invoice List as per Page number and Page Size
     public ActionResult InvoiceList(int? page, int? pageSize)
     {

         int pageIndex = 1;
         pageIndex = page.HasValue ? Convert.ToInt32(page) : 1;


         //Ddefault size is 5 otherwise take pageSize value
         int defaSize = (pageSize ?? 5);

         ViewBag.psize = defaSize;

         //Dropdownlist code for PageSize selection
         //In View Attach this
         ViewBag.PageSize = new List<SelectListItem>()
         {
             new SelectListItem() { Value="5", Text= "5" },
             new SelectListItem() { Value="10", Text= "10" },
             new SelectListItem() { Value="15", Text= "15" },
             new SelectListItem() { Value="25", Text= "25" },
             new SelectListItem() { Value="50", Text= "50" },
         };

         //Create a instance of our DataContext
         InvoiceModel _dbContext = new InvoiceModel();


         IPagedList<tblInvoice> involst = null;

         //Alloting nos. of records as per pagesize and page index.
         involst = _dbContext.tblInvoices.OrderBy(x => x.InvoiceID).ToPagedList(pageIndex, defaSize);

         return View(involst);
     }

Now, click on the View folder and select InvoiceList.cshtml file which we had created in STEP 5.

Now, let us modify InvoiceList.cshtml as per our requirement. Please understand the changed code which is marked in bold letters and font size is slightly bigger.

CODE in InvoiceList.html  (with comments)

@model PagedList.IPagedList <SetPagingSize.tblInvoice>
@using PagedList.Mvc;
@{
    ViewBag.Title = "InvoiceList";
}

<h2>InvoiceList</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
@*Html.BeginForm run the HOME controller InvoiceList Action's GET method when form get submitted.*@
@using (Html.BeginForm("InvoiceList", "Home", FormMethod.Get, new { id = "form1" }))

{
<div id='Paging' style="text-align: center">
 @*Dorpdownlist generation code*@
    Page Size: @Html.DropDownList("pageSize")

<br />(Nos. of Records To Display)
    <br />
    <br />
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
    of @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("InvoiceList", new { page, pageSize = ViewBag.psize }))
</div>
}
<table class="table">
    <tr>
        <th>
            Invoice No.
        </th>
        <th>
            Invoice Date
        </th>
        <th>
            Client Name
        </th>
        <th>
            Client Zone
        </th>
        <th>
            Invoice Amount
        </th>
        <th></th>
    </tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ClientName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ClientZone)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceAmount)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.InvoiceID }) |
            @Html.ActionLink("Details", "Details", new { id = item.InvoiceID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.InvoiceID })
        </td>
    </tr>
}

</table>
<script type="text/javascript">
    $(function () {
        $("#pageSize").change(function () {
            alert("abc");
            $("#form1").submit();
        });
    });
</script>

Now, update the _Layout.cshtml with 1 change. The following text located at bottom of the file is moved into head section.

@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Changed code is marked in bold letters and font size is slightly bigger.

CODE in _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

</body>
</html>

Press F5 to view the Invoice List output.

Output

On the next screen, I have changed the page size 5 to 15 rows.

Happy Coding..