It is possible to create a reusable pagination. What we need is:
- partial view to store number of pages and links to them
- reusable methods which contains pagination logic for
IQueryable
The complete example with source code can be seen here.
So our code would like this:
The person table. I've used SQL Server:
IF NOT EXISTS
(
SELECT 1
FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_NAME = 'Person'
AND TABLE_SCHEMA = 'dbo'
)
BEGIN
CREATE TABLE dbo.Person
(
ID INT IDENTITY(1, 1) NOT NULL PRIMARY KEY
, CreateDate DATETIME NOT NULL DEFAULT GETDATE()
, Creator VARCHAR(100) NOT NULL
, ModifyDate DATETIME NULL
, Modifier VARCHAR(20) NULL
, FirstName VARCHAR(150) NOT NULL
, LastName VARCHAR(1000) NOT NULL
)
ON [PRIMARY]
END
GO
I've used DatabaseFirst approach. This is a generated class by Entity Framework.
public partial class Person
{
public int ID { get; set; }
public System.DateTime CreateDate { get; set; }
public string Creator { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public Nullable<System.DateTime> ModifyDate { get; set; }
public string Modifier { get; set; }
}
This is a class which contains data and pagination information:
public class DataResultViewModel<T>
{
/// <summary>
/// Data items
/// </summary>
public IEnumerable<T> Items { get; set; }
/// <summary>
/// Pagination
/// </summary>
public Pagination Pagination { get; set; }
}
This is class which contains information about persons.
public class PersonViewModel
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
/// <summary>
/// What route should be requested while paging
/// </summary>
public class RouteInfo
{
/// <summary>
/// Name of controller
/// </summary>
public string ControllerName { get; set; }
/// <summary>
/// Name of action
/// </summary>
public string ActionName { get; set; }
}
and Pagination class:
public class Pagination
{
/// <summary>
/// Total count of items
/// </summary>
public int TotalItems { get; set; }
/// <summary>
/// Count of items at the page
/// </summary>
public int PageSize { get; set; } = 5;
/// <summary>
/// Current page
/// </summary>
public int Page { get; set; }
/// <summary>
/// Sorted by field name
/// </summary>
public string SortBy { get; set; }
/// <summary>
/// Is this an ascending sort?
/// </summary>
public bool IsSortAscending { get; set; }
/// <summary>
/// Information about what page should be requested
/// </summary>
public RouteInfo RouteInfo { get; set; }
}
And the class which makes pagination. Basically, Skip() and Take() are methods which do a pagination, so we need to use these methods for all IQueryable. And C# has a very neat feature called extension methods. Extension methods allow to reuse code:
public static class IQueryableExtension
{
public static IQueryable<T> UseOrdering<T, TResultSelector>(this IQueryable<T> query,
Pagination pagination,
Expression<Func<T, TResultSelector>> field)
{
if (string.IsNullOrWhiteSpace(pagination.SortBy)
|| string.IsNullOrEmpty(pagination.SortBy))
return query;
return pagination.IsSortAscending ?
query.OrderBy(field) :
query.OrderByDescending(field);
}
public static IQueryable<T> UsePagination<T>(this IQueryable<T> query,
Pagination pagination)
{
if (pagination.Page <= 0)
pagination.Page = 1;
if (pagination.PageSize <= 0)
pagination.PageSize = 10;
return query.Skip((pagination.Page - 1) * pagination.PageSize)
.Take(pagination.PageSize);
}
}
This is a class of service layer:
public class PersonService
{
public DataResultViewModel<PersonViewModel> GetWithPagination(Pagination pagination,
Expression<Func<Person, DateTime>> fieldName)
{
var result = new DataResultViewModel<PersonViewModel>();
using (var db = new MiscellaneousEntities())
{
var persons = db.Person.AsQueryable();
result.Pagination = pagination;
result.Pagination.TotalItems = persons.Count();
result.Pagination.RouteInfo = new RouteInfo()
{
ActionName = "Index",
ControllerName = "Person"
};
if (pagination.SortBy == null)
pagination.SortBy = "CreateDate";
persons = persons.UseOrdering(pagination, fieldName);
persons = persons.UsePagination(pagination);
result.Items = persons
.Select(s => new PersonViewModel()
{
ID = s.ID,
FirstName = s.FirstName,
LastName = s.LastName
})
.ToList();
return result;
}
}
}
And controller of person:
public class PersonController : Controller
{
PersonService _personService;
public PersonController()
{
_personService = new PersonService();
}
// GET: Person
public ActionResult Index(int? page, int? pageSize, string sortBy,
bool? isSortAscending)
{
return View
(_personService.GetWithPagination(new Pagination()
{
Page = page ?? 1,
PageSize = pageSize ?? 3,
SortBy = sortBy,
IsSortAscending = isSortAscending ?? false
},
v => v.CreateDate
)
);
}
}
Then we should create views.
This is a person view that should be paginated:
@model OnlyPagination.ViewModel.DataResultViewModel<OnlyPagination.ViewModel.PersonViewModel>
<div class="d-flex justify-content-center">
<div>
@foreach (var item in Model.Items)
{
<div>
<p>Id is @item.ID</p>
<p>FirstName is @item.FirstName</p>
<p>LastName is @item.LastName</p>
</div>
<hr />
}
</div>
</div>
<div class="d-flex justify-content-center">
@{
@Html.Partial("Pagination", Model.Pagination)
}
</div>
And it is a reusable pagination partial view:
@model OnlyPagination.Extensions.Query.Model.Pagination
@{
var pagesCount = Math.Ceiling((decimal)Model.TotalItems / (decimal)Model.PageSize);
var pages = new List<int>();
for (var i = 1; i <= pagesCount; i++)
{
pages.Add(i);
}
}
<div>
<p class="d-flex justify-content-center">Page @Model.Page of @pagesCount</p>
<ul class="pagination">
<li class="page-item @( Model.Page == 1 ? "disabled" : "" )">
<a aria-label="Previous" class="page-link"
href="@Url.Action
(Model.RouteInfo.ActionName, Model.RouteInfo.ControllerName,
new { page = Model.Page - 1, pageSize = Model.PageSize })">
<span aria-hidden="true">«</span>
</a>
</li>
@for (int pageNumber = 1; pageNumber <= pages.Count; pageNumber++)
{
<li class="page-item @( Model.Page == pageNumber ? "active" : "" )">
<a class="page-link"
href="@Url.Action(Model.RouteInfo.ActionName,
Model.RouteInfo.ControllerName,
new { page = pageNumber, pageSize = Model.PageSize })">
@pageNumber </a>
</li>
}
<li class="page-item @(Model.Page == pages.Count ? "disabled" : "")">
<a aria-label="Next" class="page-link"
href="@Url.Action
(Model.RouteInfo.ActionName, Model.RouteInfo.ControllerName,
new { page = Model.Page + 1, pageSize = Model.PageSize })">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
That's all!
