In this post i am going to show you how to create nice numeric paging(Pager) using asp.net MVC and IQueryable there is some bit of logic to define the page range and show the given number of records.both parameter pass through query string to controller action and pass it to custom pagination list that calculate the page records to show.
i am not going to use database or repository but create one user class with some of fields for creating records.
Step:1 Create static class Person
Public Class Person
Public Property FirstName As String
Public Property LastName As String
Public Property Address As String
End Class
Step:1 Create PaginationList(of T) so it work for any type
Public Class PaginationList(Of T)
Inherits List(Of T)
Public Property PageIndex As Integer
Public Property PageSize As Integer
Public Property TotalCount As Integer
Public Property TotalPages As Integer
Public Property NumericPageCount As Integer = 10
Sub New(ByVal source As IQueryable(Of T), ByVal _pageIndex As Integer, ByVal _pageSize As Integer)
If _pageSize <= 0 Then _pageSize = 10
If _pageIndex <= 0 Then _pageIndex = 1
PageIndex = _pageIndex
PageSize = _pageSize
TotalCount = source.Count
TotalPages = CInt(Math.Ceiling(TotalCount / PageSize))
Me.AddRange(source.Skip((PageIndex - 1) * PageSize).Take(PageSize))
End Sub
Public ReadOnly Property StartPageIndex
Get
Return Math.Max(1, PageIndex - (NumericPageCount / 2))
End Get
End Property
Public ReadOnly Property EndPageIndex
Get
Return Math.Min(TotalPages, PageIndex + (NumericPageCount / 2))
End Get
End Property
Public ReadOnly Property HasPrevious As Boolean
Get
Return (PageIndex > 1)
End Get
End Property
Public ReadOnly Property HasNext As Boolean
Get
Return (PageIndex < TotalPages)
End Get
End Property
End Class
In PaginationList we define some property described below.
- PageIndex: for store the page no that is going to view.
- PageSize: for limit the records that is going to show.
- TotalCount: count of total records in the source.
- TotalPages: total pages is needed for show the all records.
- NumericPageCount: define the pager range.
- StartPageIndex: for sliding of the pager navigation.
- EndPageIndex: for sliding of pager navigation.
- HasNext: for show Next Link in pager
- HasPrevious: for show Previous Link in pager.
Public Class PersonController
Inherits System.Web.Mvc.Controller
'
' GET: /Person
Function GetPersons(ByVal page As Nullable(Of Integer), ByVal pagesize As Nullable(Of Integer)) As ViewResult
Dim persons As New List(Of Person)
persons.Add(New Person With {.FirstName = "pravin", .LastName = "bhudiya", .Address = "bhuj-kutch"})
persons.Add(New Person With {.FirstName = "john", .LastName = "smith", .Address = "US"})
persons.Add(New Person With {.FirstName = "karan", .LastName = "joher", .Address = "india"})
persons.Add(New Person With {.FirstName = "andrew", .LastName = "siemer", .Address = "US"})
persons.Add(New Person With {.FirstName = "Scott", .LastName = "hanselman", .Address = "US"})
persons.Add(New Person With {.FirstName = "Scott", .LastName = "william", .Address = "UK"})
persons.Add(New Person With {.FirstName = "chris", .LastName = "eargle", .Address = "US"})
persons.Add(New Person With {.FirstName = "douglas", .LastName = "crockford", .Address = "US"})
'.Take ,.Skip want ordered data
persons.OrderBy(Function(p) p.FirstName)
Dim paginationList = New PaginationList(Of Person)(persons.AsQueryable, page.GetValueOrDefault, pagesize.GetValueOrDefault)
Return View(paginationList)
End Function
End Class
here we create action named GetPersons with two parameter Page and PageSize (of type Nullable so it can handle null values),for retrive the page to view and pagesize from query string parameter. and inside that action we create list of persons object,and pass that list as IQueryable to PaginationList with page and pagesize.
Step:4 Create two strongly type partial views(GetPerson(View type List), Pager(View type Empty)) of type PaginationList(of Person)we put Pager view in shared folder so it can work for any view.and GetPersons View for Controller Action. pager view is going to render inside GetPersons View at Bottom.both view look like below.
GetPersons.vbhtml
@ModelType MvcApplication1.PaginationList(Of MvcApplication1.Person)
@Html.ActionLink("Create New", "Create")
<table>
<tr>
<th></th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
@For Each item In Model
@<tr>
<td>
</td>
<td>
@item.FirstName
</td>
<td>
@item.LastName
</td>
<td>
@item.Address
</td>
</tr>
Next
<tr><td>
@code
'pass paginationList to strongly type Pager Partialview
Html.RenderPartial("Pager",Model)
End code
</td></tr>
</table>
Pager.vbhtml
@ModelType MvcApplication1.PaginationList(Of MvcApplication1.Person)
@If Model.HasPrevious Then
@Html.RouteLink("Prev", New With {.page = (Model.PageIndex -1),.pagesize=Model.PageSize})
End If
@code
For i = Model.StartPageIndex To Model.EndPageIndex
@* for create the numeric navigation*@
@Html.RouteLink(i, New With {.page = i,.pagesize=Model.PageSize })
@:
Next
End code
@If Model.HasNext Then
@Html.RouteLink("Next", New With {.page = Model.PageIndex + 1,.pagesize=Model.PageSize})
End If
@* for define page size *@
@Html.RouteLink("5", New With {.page = Model.PageIndex, .pagesize = 5})
@Html.RouteLink("10", New With {.page = Model.PageIndex, .pagesize = 10})
@Html.RouteLink("20", New With {.page = Model.PageIndex, .pagesize = 20})
now , try to run this application in webBrowser and put this url in AddressBar http://localhost:1089/person/getpersons?page=2&pagesize=5