Monday, March 14, 2011

MVC3 Webgrid Html Helper (paging)

Monday, March 14, 2011 Posted by Andre Broers , , , , , 7 comments
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)

7 comments:

  1. I think you are stuck to the table layout. Within one table cell you
    can format the content as you want. But the webgrid will format the
    data in a table. ;-( You can also use jquery to get the data out of
    the table and format it in another way.

    ReplyDelete
  2. Hi your descriptions are very simple and clear for a beginner like me. In my case paging works as expected but not the sorting. I get the run time error "Specified method is not supported" . Cant figure out what to do now. With your blogs could you please include few very common errors and how to troubleshoot them.
    if your are thinking about the code i have used its just the same as yours. Except for the column names.

    Thanks,
    Hani

    ReplyDelete
  3. The calls to Html.Encode for TotalRowCount and PageCount at the end are unnecessary. Web Pages encodes all output by default.

    ReplyDelete
  4. This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
    obat aborsi
    cara menggugurkan kandungan

    ReplyDelete