Introduction
In this article, we are going to implement Pagination in ASP.NET MVC Application with the help of Visual Studio. Before proceeding further, I would recommend that you install PagedList MVC using the NuGet package manager then let’s a go-to visual studio and click on tools Library Package Manager.
Then manage the needed packages for the solution and click on the online tab and then search for PagedList and install this page list in the MVC application.
Then selects the project to which you want to add these packages to in our MVC demo application add both the packages toward the solution.
The second step is to modify the index action method within the home controller to support paging and there are two changes that we need to do the first change is to introduce the page parameter. The parameter is going to contain the number of the page that the end-user wants to view.
Let’s notice that we are using two page to list function, then let’s go ahead and make these changes to the controller action method now this page.
Then import those namespaces within our HomeController. we have the index action method within the HomeController the first change is to introduce that page parameter and this is going to be of type nullable integer and the second change is to return a page list.
using PagedList;
using pagedlist.Mvc;
namespace MVCDemo.Controllers
{
public class HomeController : Controller
{
private SampleDBContext db = SampleDBContext();
public ActionResult Index(string searchBy,string search)
{
if(searchBy == "Gender")
{
return view(db.Employee.Where(x => x.Gender == seach || null).ToList());
}
else
{
return view(db.Employee.Where(x => x.Name.StartsWith(search) || seach == null).ToList());
}
}
}
}Let’s go ahead and convert this list to a page list and notice that the function is going to expect two parameters the first parameter is going to be page number and the next parameter is the page size.
Let’s hard-code the page size to be 3 then there will be three rows there every page that is displayed.
using PagedList;
using pagedlist.Mvc;
namespace MVCDemo.Controllers
{
public class HomeController : Controller
{
private SampleDBContext db = SampleDBContext();
public ActionResult Index(string searchBy, string search, int? page)
{
if(searchBy == "Gender")
{
return view(db.Employee.Where(x => x.Gender == seach || null)
.ToList().ToList().ToPagedList(page ?? 1,3));
}
else
{
return view(db.Employee.Where(x => x.Name.StartsWith(search) || seach == null).ToList());
}
}
}
}And let’s go ahead and do the same modification in the else part as well, here we have the list. Let’s go ahead convert that to a page the list.
the controller action method add the razor view page index.cshtml
@model IEnumerable<MVCDemo.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h1>PagedList Tutorial</h1>
<p>
@Html.ActionLink("Create New","Create")
</p>
<p>
@using(Html.BeginForm("Index","Home",FormMethod.Get))
{
<b>Search By:</b> @Html.RadioButton("searchBy","Name",true)<text>Name</text>
@Html.RadioButton("searchBy","Gender") <text>Gender</text>
@Html.TextBox("search") <input type="submit" value="seach" />
}
</p>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>Action</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="4">No rows match found </td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayNameFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Gender)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit","Edit",new { id = item.ID})|
@Html.ActionLink("Details","Details",new { id = item.ID})|
@Html.ActionLink("Delete","Delete",new { id = item.ID})|
</td>
}
}
</table>
</div>Using the page list and the model for the view is IEnumerable of the employee but if you see the index action method within the HomeController returning to the view a page list.
@model IEnumerable<MVCDemo.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h1>PagedList Tutorial</h1>
<p>
@Html.ActionLink("Create New","Create")
</p>
<p>
@using(Html.BeginForm("Index","Home",FormMethod.Get))
{
<b>Search By:</b> @Html.RadioButton("searchBy","Name",true)<text>Name</text>
@Html.RadioButton("searchBy","Gender") <text>Gender</text>
@Html.TextBox("search") <input type="submit" value="seach" />
}
</p>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>Action</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="4">No rows match found </td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayNameFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Gender)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit","Edit",new { id = item.ID})|
@Html.ActionLink("Details","Details",new { id = item.ID})|
@Html.ActionLink("Delete","Delete",new { id = item.ID})|
</td>
}
}
</table>
</div>The section which displays these headings name, gender, and email etc. let’s actually build the solution and look at the view.
Let’s display the page of control at the bottom of the view and to do that we are going to make use of this HTML helper @Html.PageListPager and then we specify the function which is going to you know display that page links.
we are using that URL action hyperlink and we want to navigate to the index action and then we are passing the anonymous type to the page as a parameter.
Let’s actually look at this in action
@model IEnumerable<MVCDemo.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h1>PagedList Tutorial</h1>
<p>
@Html.ActionLink("Create New","Create")
</p>
<p>
@using(Html.BeginForm("Index","Home",FormMethod.Get))
{
<b>Search By:</b> @Html.RadioButton("searchBy","Name",true)<text>Name</text>
@Html.RadioButton("searchBy","Gender") <text>Gender</text>
@Html.TextBox("search") <input type="submit" value="seach" />
}
</p>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>Action</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="4">No rows match found </td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayNameFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Gender)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit","Edit",new { id = item.ID})|
@Html.ActionLink("Details","Details",new { id = item.ID})|
@Html.ActionLink("Delete","Delete",new { id = item.ID})|
</td>
}
}
</table>
</div>At the bottom of the view just after the table, we want to display pager control. the first parameter page list is going to be the model. we want to navigate the index action and then we can specify the route values using the Anonymous type.
@model IEnumerable<MVCDemo.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h1>PagedList Tutorial</h1>
<p>
@Html.ActionLink("Create New","Create")
</p>
<p>
@using(Html.BeginForm("Index","Home",FormMethod.Get))
{
<b>Search By:</b> @Html.RadioButton("searchBy","Name",true)<text>Name</text>
@Html.RadioButton("searchBy","Gender") <text>Gender</text>
@Html.TextBox("search") <input type="submit" value="seach" />
}
</p>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>Action</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="4">No rows match found </td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayNameFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Gender)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit","Edit",new { id = item.ID})|
@Html.ActionLink("Details","Details",new { id = item.ID})|
@Html.ActionLink("Delete","Delete",new { id = item.ID})|
</td>
}
}
</table>
@Html.PagedListPager(Model, page = Url.Action("Index", new {page}))
</div>Let’s navigate to this field and see if we get page numbers as expected and look at the three-page numbers.
Now, let’s go to the second page and see the second index set of employees records.
we have implemented search functionality to search all male employees then click the search button.
Look at the two pages they’re actually for male employees, if you look at this we have four more male employees and the first three display.
Let me select gender and then type male and click on search then it has given us the results correctly there are four male employees and on the first page it’s displaying three male employees and on the second page navigate to the second page.
We search for male employees that’s the gender select that within the URL have query strings search by gender and search string is male.
Then click on this page number two pager link going to the URL and it is going to display all the employees from the database.
Basically, it’s displaying the second set of three employees here and we have the search string that we had in the URL and the way to do that is basically using this anonymous type.
we navigate to the index view and then we search for male employees look at that in the URL.
We are going to have these two parameters, so query string search by and search query string then we need to retrieve them from the URL and pass it to this action helper method.
The parameter going to search by and where is the value going to come from the URL. so how to get the value of the query string from the URL you can use the Request object, so Request.QueryString and then you can specify the name of the query string.
@model IEnumerable<MVCDemo.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h1>PagedList Tutorial</h1>
<p>
@Html.ActionLink("Create New","Create")
</p>
<p>
@using(Html.BeginForm("Index","Home",FormMethod.Get))
{
<b>Search By:</b> @Html.RadioButton("searchBy","Name",true)<text>Name</text>
@Html.RadioButton("searchBy","Gender") <text>Gender</text>
@Html.TextBox("search") <input type="submit" value="seach" />
}
</p>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th>Action</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="4">No rows match found </td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayNameFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Gender)
</td>
<td>
@Html.DisplayNameFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit","Edit",new { id = item.ID})|
@Html.ActionLink("Details","Details",new { id = item.ID})|
@Html.ActionLink("Delete","Delete",new { id = item.ID})|
</td>
}
}
</table>
@Html.PageListPager(Model, page => Url.Action("Index",new {page,
searchBy = Request.QueryString["searchBy"]}))
</div>We need to get the search query string value so again we are going to use that here search and then the same idea expressed QueryString and then it’s going to search.
Let’s actually navigate the search for whose name starts with S and when we click the search button then look at the output we have only one employee whose name starts with s. but then we don’t need this pager control here because there’s only one page so there’s no point in displaying a page of control.
