MVC3 Webgrid Html Helper (paging) ~ BroersA Blog

When we add some records to our Person Model paging will jump in automatically.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication4.Models
{
  public class Person
  {
    public int id { get; set; }
    public string name { get; set; }
    public int age { get; set; }

    public List<Person> GetPersons()
    {
      return new List<Person>()
      {
         new Person() { id=1, name="Andre", age=10}
        ,new Person() { id=2, name="Bennie", age=20}
        ,new Person() { id=3, name="Roel", age=30}
        ,new Person() { id=4, name="Jeroen", age=40}
        ,new Person() { id=5, name="Arjan", age=50}
        ,new Person() { id=6, name="PietJan", age=60}
        ,new Person() { id=7, name="Alex", age=70}
        ,new Person() { id=8, name="Wim", age=80}
        ,new Person() { id=9, name="Jan", age=90}
        ,new Person() { id=10, name="Coby", age=100}
        ,new Person() { id=11, name="Marjan", age=110}
      };
    }
  }
}

See the result:

Now let’s disable paging by setting the canPage property to false in the grid initialization:

@model IEnumerable<MvcApplicationDemo.Models.Person>
@{
    ViewBag.Title = "Index";
    var grid = new WebGrid(source: Model, canSort: true, canPage: false);
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
@grid.GetHtml(columns: grid.Columns(
  grid.Column(header: "", style: "text-align-center", format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.id }).ToString() + " | " + Html.ActionLink("Details", "Details", new { id = item.id }).ToString() + " | " + Html.ActionLink("Delete", "Delete", new { id = item.id }).ToString())),
  grid.Column("name"),
  grid.Column("age")
))

@{
    if (!string.IsNullOrWhiteSpace(grid.SortColumn))
    {
       <script type="text/javascript">
        $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent().append('@(grid.SortDirection == SortDirection.Ascending ? "^" : "v")');
       </script>
    }
}

And paging is gone:

Now we set the canPage property back to true and set the property pagesize to 3:

var grid = new WebGrid(source: Model, canSort: true, canPage: true, rowsPerPage: 3);

Try sorting the grid and see the paging and sorting work well together.

We have some other properties that can become handy: TotalRowCount and PageCount.

Add the following to your index.cshtml:

PageCount:@Html.Encode(grid.PageCount)
<br />
TotalRowCount:@Html.Encode(grid.TotalRowCount)

Monday, March 14, 2011

MVC3 Webgrid Html Helper (paging)