I needed to add a paging option to my webGrid control, after doing a lot of googling I still could’nt find a proper written article for this. So I decided to write an article on this myslef.

MVC Razor provides a pager method, details of which can be read at WebGrid.Pager Method

Below is the code I had used,


@{

var grid = new WebGrid(source: Model.GetMydata,
rowsPerPage: 10, canPage:true);

// The above line says that is shall get data from the GetMydata() method, the
// number of rows that will be displayed on one page shall be 10, and most
// important I have enabled the paging option by setting the canPage to true

@grid.GetHtml(

columns: grid.Columns(

grid.Column("Name", format: @<text>@item.Name</text>, header: "Name"),
grid.Column("Age", format: @<text>@item.Age</text>, header: "Age"),
grid.Column("Phone", format: @<text>@item.Phone</text>, header: "Phone")
))

// Below is the magical code

@grid.Pager(
mode: WebGridPagerModes.All,
numericLinksCount: 15,
firstText: "<<",
lastText: ">>;",
previousText: "<",
nextText: ">")

// Check the above given MSDN link to get a detailed explanation on each of the
// parameters used above.

}