How To Use Paging And Sorting In ASP.NET MVC 4

In this blog, I will explain the process of paging and sorting in ASP.NET MVC 4 step by step. The database is uploaded in this article.

Open a new project

Click OK button.

Select empty template and for paging, install PagedList.mvc in your project but in my project, it is already installed.

If PagedList.mvc is not installed in your project, install it, as it is needed to see previous articles.

Hence, there is no need to install it again.

Its reference is added in controller.

Add student class(student.cs).

Add a controller StudentInfo code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvcpaging.Models;
using System.Data;
using PagedList;
namespace mvcpaging.Controllers
{
public class StudentInfoController : Controller
{
[HttpGet]
public ActionResult Index(string sortOrder, string CurrentSort, int? page)
{
int pageSize = 5;
int pageIndex = 1;
pageIndex = page.HasValue ? Convert.ToInt32(page) : 1;
ViewBag.CurrentSort = sortOrder;
sortOrder = String.IsNullOrEmpty(sortOrder) ? "Id" : sortOrder;
IPagedList<student> stu = null;
BL buisnessLogic = new BL();
DataTable dt = new DataTable();
student objStudent = new student();
List<student> objStudentList = new List<student>();
objStudentList = buisnessLogic.studentListBind();
objStudent.std = objStudentList;
switch (sortOrder)
{
case "Id":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Id).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Id).ToPagedList(pageIndex, pageSize);
break;
case "Name":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Name).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Name).ToPagedList(pageIndex, pageSize);
break;
case "Mother Name":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Mothername).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Mothername).ToPagedList(pageIndex, pageSize);
break;
case "Father Name":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Fathername).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Fathername).ToPagedList(pageIndex, pageSize);
break;
case "Age":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Age).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Age).ToPagedList(pageIndex, pageSize);
break;
case "Country":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Country).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Country).ToPagedList(pageIndex, pageSize);
break;
case "State":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.State).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.State).ToPagedList(pageIndex, pageSize);
break;
case "Nationality":
if (sortOrder.Equals(CurrentSort))
stu = objStudentList.OrderByDescending
(m => m.Nationality).ToPagedList(pageIndex, pageSize);
else
stu = objStudentList.OrderBy
(m => m.Nationality).ToPagedList(pageIndex, pageSize);
break;
}
return View(stu);
}
}
}

Business logic class(BL.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
namespace mvcpaging.Models
{
public class BL
{
SqlHelper sql1 = new SqlHelper();
public List<student> studentListBind() {
DataTable dt = new DataTable();
SqlParameter[] GetBalance_Parm = new SqlParameter[]
{
};
DataSet _DS = SqlHelper.GetDataSet(SqlHelper.mainConnectionString, CommandType.StoredProcedure, "[GetStdInfo]", GetBalance_Parm);
List<student> lst = new List<student>();
if (_DS.Tables[0].Rows.Count > 0)
{
foreach (DataRow item in _DS.Tables[0].Rows)
{
lst.Add(new student
{
Id=Convert.ToInt32(item["id"]),
Name =Convert.ToString(item["name"]),
Fathername = Convert.ToString(item["fathername"]),
Mothername = Convert.ToString(item["mothername"]),
Age = Convert.ToInt32(item["age"]),
Country = Convert.ToString(item["country"]),
State = Convert.ToString(item["state"]),
Nationality = Convert.ToString(item["nationality"])
});
}
}
return lst;
}
}
}

CSS for paging

<style>
.ul.pagination
{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{
display: inline;
}
ul.pagination li a
{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
ul.pagination li a.active
{
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active)
{
background-color: #ddd;
}
</style>

View

@using PagedList.Mvc
@model PagedList.IPagedList<mvcpaging.Models.student>
@{
ViewBag.Title = "Student Details";
}
<style>
.ul.pagination
{
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{
display: inline;
}
ul.pagination li a
{
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
ul.pagination li a.active
{
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active)
{
background-color: #ddd;
}
</style>
@using (Html.BeginForm())
{
<center>
<h2>Student Details</h2>
<div style="border:1px solid red; margin-left:25%; margin-right:20%">
<table style="width:100%" border="1">
<tr>
<th style="/*/*/*width:15%; text-align:left*/*/*/"> @Html.ActionLink("Student ID", "Index",
new { sortOrder = "Id", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:10%; text-align:left">@Html.ActionLink("Name", "Index",
new { sortOrder = "Name", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:15%; text-align:left">@Html.ActionLink("Father Name", "Index",
new { sortOrder = "Father Name", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:15%; text-align:left">@Html.ActionLink("Mother Name", "Index",
new { sortOrder = "Mother Name", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:5%; text-align:left">@Html.ActionLink("Age", "Index",
new { sortOrder = "Age", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:15%; text-align:left">@Html.ActionLink("Country", "Index",
new { sortOrder = "Country", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:15%; text-align:left">@Html.ActionLink("State", "Index",
new { sortOrder = "State", CurrentSort = ViewBag.CurrentSort })</th>
<th style="width:15%; text-align:left">@Html.ActionLink("Nationality", "Index",
new { sortOrder = "Nationality", CurrentSort = ViewBag.CurrentSort })</th>
</tr>
@for (int i = 0; i < Model.Count; i++)
{
<tr style="border:1px solid red">
<td>@Model[i].Id</td>
<td>@Model[i].Name</td>
<td>@Model[i].Fathername</td>
<td>@Model[i].Mothername</td>
<td>@Model[i].Age</td>
<td>@Model[i].Country</td>
<td>@Model[i].State</td>
<td>@Model[i].Nationality</td>
</tr>
}
</table>
</div>
</center>
<div id="container" style="margin-left: 20px">
<p></p>
<p></p>
<div class="pagination" style="margin-left: 400px">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
of @Model.PageCount @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>
</div>
}

After executing it, first we are talking about paging, followed by sorting. The default first page opens, which is given below and can be viewed via Student Id.

Now, after clicking on the second page, its data is showing here.

Now, click on 4th page and it's data is shown here.

Now, you have seen that paging is working fine.

Now, we will see sorting here. When the project is executed, then you can see student ID

After clicking on Student ID header, it is sorted in descending order, which you can see.

For Name sorting, you can see the name.

After clicking on Name header, it's sorted, which you can see.

Here, sorting for Age is given below.

After clicking on Age header, it's sorted, which you can see below.

Here, as you can see, every thing is working fine. In this blog, we have learned how to use paging and sorting in ASP.NET MVC 4.

2 Comments

Join the conversation! Your thoughts help the community grow.

Amit Kumar9y ago
Yes, you are correct ,it is possible easily you can check the condition and return list according to your requirement.
Shams Rehman9y ago
Thanks for useful article but the problem is you add sorting and paging in razor view i need in empty view in which we have own custom table and patch data through j query. So i need pagination in custom table.Thanks once again for this useful article.