In this article we will cover how to Implement Custom Pagination from the Asp.Net MVC application Live Example
Prerequisites:
Understanding of Asp.Net MVC
Let's Start:
The first step Let's create a fresh Asp.Net MVC project.
Model
Create Model named "Country_Model.cs" and add below mentioned Classes.
using System;
using System.Collections.Generic;
namespace HpBlogs.Models
{
public class Country_Model
{
public IEnumerable<Country> List_objCountry { get; set; }
public Pagination pagination = new Pagination();
}
public class Country
{
public int Country_Id { get; set; }
public string Country_Title { get; set; }
public string Country_Code { get; set; }
public bool Country_Active { get; set; }
}
public class Pagination
{
public int CurrentPage { get; set; } = 1;
public int Count { get; set; }
public int PageSize { get; set; } = 10;
public int TotalPages => (int)Math.Ceiling(decimal.Divide(Count, PageSize));
public bool EnablePrevious => CurrentPage > 1;
public bool EnableNext => CurrentPage < TotalPages;
}
}
Controller
Create Controller named "CountryController" and add below mentioned code.
Download Countries.json file from here Countries.json
using HpBlogs.Models;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web.Mvc;
namespace HpBlogs.Controllers
{
public class CountryController : Controller
{
public ActionResult Index(int currentPage = 0)
{
Country_Model model = new Country_Model();
model.pagination.CurrentPage = currentPage == 0 ? 1 : currentPage;
model.pagination.PageSize = 10;
// Taken List of data from json file which we want displayed on a page with pagination.
using (StreamReader sr = new StreamReader(Server.MapPath("~/countries.json")))
{
List<Country> countries = JsonConvert.DeserializeObject<List<Country>>(sr.ReadToEnd());
var result = countries.Skip((model.pagination.CurrentPage - 1) * model.pagination.PageSize).Take(model.pagination.PageSize);
model.List_objCountry = result;
model.pagination.Count = countries.Count();
if (model.pagination.CurrentPage > model.pagination.TotalPages)
model.pagination.CurrentPage = model.pagination.TotalPages;
}
return View(model);
}
}
}
Partial View
Create Partial View named "_Pagination.cshtml" inside "Shared" Folder and add below mentioned code.
@model HpBlogs.Models.Pagination
@{
var showFrom = ((Model.CurrentPage - 1) * Model.PageSize) + 1;
var showTo = (showFrom + Model.PageSize);
var showToDisp = ((showTo - 1) > Model.Count ? Model.Count : (showTo - 1));
var msg = "Showing " + showFrom + " to " + showToDisp + " of " + Model.Count + " results";
}
@if (Model.TotalPages > 1)
{
<center>
<div class="col-lg-12">
<table class="table" style="width:auto">
<caption>@msg</caption>
<tr>
<td class=" @(Model.EnableNext ? " " : " unselectable" )">
@if (Model.EnableNext)
{
<a href="?currentpage=@(Model.CurrentPage + 1)" class="" aria-label="Previous">
Next
</a>
}
else
{
<span>Next</span>
}
</td>
@for (var i = 1; i <= Model.TotalPages; i++)
{
if (Model.TotalPages <= 2)
{
<td class="@(i == Model.CurrentPage ? " active" : "" )">
<a href="?currentpage=@i" class="" aria-label="Previous">
@i
</a>
</td>
}
else
{
if (Model.CurrentPage <= 5)
{
if ((i <= 8) || (i == Model.TotalPages))
{
<td class="@(i == Model.CurrentPage ? " active" : "" )">
<a href="?currentpage=@i" class="" aria-label="Previous">
@i
</a>
</td>
}
else if (i == Model.TotalPages - 1)
{
<td>
<a href="#" class="">..</a>
</td>
}
}
else if ((Model.CurrentPage > 5) && (Model.TotalPages - Model.CurrentPage >= 5))
{
if ((i == 1) || (i == Model.TotalPages) || ((Model.CurrentPage - i >= -3) && (Model.CurrentPage - i <= 3)))
{
<td class="@(i == Model.CurrentPage ? " active" : "" )">
<a href="?currentpage=@i" class="" aria-label="Previous">
@i
</a>
</td>
}
else if ((i == Model.CurrentPage - 4) || (i == Model.CurrentPage + 4))
{
<td>
<a href="#" class="">..</a>
</td>
}
}
else if (Model.TotalPages - Model.CurrentPage < 5)
{
if ((i == 1) || (Model.TotalPages - i <= 7))
{
<td class="@(i == Model.CurrentPage ? " active" : "" )">
<a href="?currentpage=@i" class="" aria-label="Previous">
@i
</a>
</td>
}
else if (Model.TotalPages - i == 8)
{
<td>
<a href="#" class="">..</a>
</td>
}
}
}
}
<td class=" @(Model.EnablePrevious ? " " : " unselectable" )">
@if (Model.EnablePrevious)
{
<a href="?currentpage=@(Model.CurrentPage - 1)" class="" aria-label="Previous">
Previous
</a>
}
else
{
<span>Previous</span>
}
</td>
</tr>
</table>
</div>
</center>
}
View
Create View named "Index.cshtml" inside "Country" Folder in Views and add below mentioned code.
@model HpBlogs.Models.Country_Model
<div class="container">
@Html.Partial("_Pagination", Model.pagination)
<div class="row">
<div class="col-lg-12">
<div>
<table class="table">
<thead>
<tr>
<th>Country ID</th>
<th>Title</th>
<th>Code</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.List_objCountry)
{
<tr>
<td>@item.Country_Id</td>
<td>@item.Country_Title</td>
<td>@item.Country_Code</td>
@if (item.Country_Active)
{
<td>Active</td>
}
else
{
<td>Inactive</td>
}
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<style>
.unselectable {
background-color: #ddd;
cursor: not-allowed;
}
td.active a{
color:green;
}
</style>
Run the project. Output page would look like: Live Example
Post Comments(0)