Grid Paging,Sorting,Searching in ASP.NET MVC

You can easily implement Pagination, Sort and Search functionalities in ASP.NET MVC. In this article I have used PagedList.MVC, Asp.Net MVC HtmlHelper method for generating paging control for use with PagedList library. Along with the Pagination functionality I have also implemented Sort and Search functionalities as well.

Create a New MVC project by selecting the ASP.NET MVC 4 web template from Visual Studio.

Create a Sample Database and Table. If you want to use any other table please continue with that. Below is my sample table structure that I have used in this article.

1

Below are the Code for loading all the Students  from the database. I am using Entityframework for pulling data from the database.

using System.Collections.Generic;
using System.Linq;
using Paging.Mvc.Demo.DAL;
namespace Paging.Mvc.Demo.BL
{
public class StudentInformation
{
public IEnumerable<Student students> GetStudents()
{
var schoolEntities = new SchoolEntities();
return schoolEntities.Students.ToList();
}
}
}

For pagination install a Nuget Package. Go to VisualStudio>Tools>Nuget Package Manager>Package Manager Console and Type command Install-Package PagedList.MVC and press enter. It will add all the references and css for the pagination you need.
2
Create a new controller named StudentController by right clicking on the Controller folder and create a new Action Result named Index and Paste all the codes in the Index method
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using PagedList;
using Paging.Mvc.Demo.BL;
using Paging.Mvc.Demo.DAL;

namespace Paging.Mvc.Demo.Controllers
{
public class StudentController : Controller
{
private readonly StudentInformation _studentInformation;
public StudentController()
{
_studentInformation = new StudentInformation();
}
public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page)
{
ViewBag.CurrentSort = sortOrder;
//set sort param for sorting name
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

if (searchString != null)
{
page = 1;
}
else
{
searchString = currentFilter;
}
ViewBag.CurrentFilter = searchString;

IEnumerable<Student students> = _studentInformation.GetStudents().Select(s => s);
if (!String.IsNullOrEmpty(searchString))
{
students = students.Where(s => s.Name.ToUpper().Contains(searchString.ToUpper()));
}
switch (sortOrder)
{
case "name_desc":
students = students.OrderByDescending(s => s.Name);
break;

default:
students = students.OrderBy(s => s.Name);
break;
}
//you can set page index here
const int pageSize = 5;
int pageNumber = (page ?? 1);
return View(students.ToPagedList(pageNumber, pageSize));
}

}
}

Right click the index action and create a new index view. Please make sure that the model type you have returned in the view should be PagedList.IPagedList<Your Entity >

@model PagedList.IPagedList<Paging.Mvc.Demo.DAL.Student>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
ViewBag.Title = "Students";
}
@using (Html.BeginForm("Index", "Student", FormMethod.Get))
{
<p>
Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
<table>
<tr>

<th>
@Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter=ViewBag.CurrentFilter })
</th>

<th>
Place
</th>
<th>
Address
</th>
<th>
Age
</th>
<th>
Father Name
</th>
<th>
Mother Name
</th>
</tr>

@foreach (var item in Model) {
<tr>

<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Place)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.DisplayFor(modelItem => item.FatherName)
</td>
<td>
@Html.DisplayFor(modelItem => item.MotherName)
</td>

</tr>
}

</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager( Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter=ViewBag.CurrentFilter }) )

You can download full source code from here

Output
output
Enjoy Coding