Paging, sorting and filtering in ASP.NET MVC C#

tIn this article, we are going to implement paging, sorting, and searching of data in C# MVC application.In previous two articles, i have explained basics of MVC C# , then wrote another article on inserting and fetching data in MVC using entity framework, if you haven't read both these articles and you don't have much knowledge in MVC(or you are a beginner) please go through these articles first, it won't take much of your time.

From this point, I assume, you have knowledge of fetching list data from database using MVC C#.So let's fetch all the data from database using Entity Framework (Ado.NET), code below

We have added a searchString parameter to the Index method. The search string value is received from a text box that you'll add to the Index view. You've also added to the LINQ statement a where clause that selects only students whose first name or last name contains the search string. The statement that adds the where clause is executed only if there's a value to search forIn view, we must have text-box to place search query so let's add this code before customer table

Rebuild solution, Run the page, enter a search string, and click Search to verify that filtering is working, and output will be

Paging

Last part of this tutorial is paging, now let's add paging in the table using PagedList.Mvc. So to add paging in the view we need to install it using Nuget.PagedList.Mvc is one of many good paging and sorting packages for ASP.NET MVC, and its use here is intended only as an example, not as a recommendation for it over other options.

From the Tools menu, select Library Package Manager and then Package Manager Console.

In the Package Manager Console window, make sure ghe Package source is nuget.org and the Default project is ContosoUniversity, and then enter the following command:

Install-Package PagedList.Mvc

Now build the project and do the following changes in Controller and View, for controller part code will be

//This code adds a page parameter, a current sort order parameter, and a current filter parameter to the method signature
public ViewResult Index(string sortOrder, string currentFilter, string searchString, int? page)
{
//A ViewBag property provides the view with the current sort order, because this must be included in
// the paging links in order to keep the sort order the same while paging
ViewBag.CurrentSort = sortOrder;
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
var ModelList = new List<Customer>();
//ViewBag.CurrentFilter, provides the view with the current filter string.
//he search string is changed when a value is entered in the text box and the submit button is pressed. In that case, the searchString parameter is not null.
if (searchString != null)
{
page = 1;
}
else
{
searchString = currentFilter;
}
ViewBag.CurrentFilter = searchString;
using (var context = new NorthWindEntities())
{
var model = from s in context.Customers
select s;
//Search and match data, if search string is not null or empty
if (!String.IsNullOrEmpty(searchString))
{
model = model.Where(s => s.Customername.Contains(searchString)
|| s.City.Contains(searchString)
|| s.WorkArea.Contains(searchString));
}
switch (sortOrder)
{
case "name_desc":
ModelList = model.OrderByDescending(s => s.Customername).ToList();
break;
default:
ModelList = model.OrderBy(s => s.Customername).ToList();
break;
}
}
//indicates the size of list
int pageSize = 3;
//set page to one is there is no value, ?? is called the null-coalescing operator.
int pageNumber = (page ?? 1);
//return the Model data with paged
return View(ModelList.ToPagedList(pageNumber, pageSize));
}

I have explained code by commenting in C#, now let's do some changes in View

If you will check the view code, you will notice at top we are using PagedList model as paging data will be returned from controller now, also have added the new paging code, at the bottom which will show current page and number of pages.

Note:I have not includede CSS of pagedlist as MVC project is referencing Bootstrap by default, if you not referring bootstrap please include css file

Final output will be

That's it, we are done, please share your reviews on this or any other article after logging in or using Facebook comment's tabs.