Using the WebGrid Helper in ASP.NET MVC 3 Beta

ASP.NET MVC 3 Beta is now supports to using ASP.NET Web Pages helpers in the Razor views. In this post, let us discuss on how to use WebGrid helper in our Razor view page of an ASP.NET MVC 3 application.

Let us create a view page using Razor syntax

  1. @model List<Employee>
  2. @{
  3.     View.Title = "Employee List";
  4. }
  5. @{        
  7.    var grid = new WebGrid(source: Model,
  8.                 defaultSort: "FirstName",
  9.                 rowsPerPage: 3);
  10. }
  11. <p>
  12. <h2>Employee List</h2>
  13. <div id="grid">
  14.     @grid.GetHtml(
  15.         tableStyle: "grid",
  16.         headerStyle: "head",
  17.         alternatingRowStyle: "alt",
  18.         columns: grid.Columns(
  19.             grid.Column("FirstName"),
  20.             grid.Column("LastName"),
  21.             grid.Column("Salary",format:@<text>$@item.Salary</text>)
  22.         )
  23.     )
  24. </div>
  25. </p>


In the above code, we create an instance of WebGrid with data source as our Model object and we specified that default sort is FirstName for the sorting purpose and rowsPerPage specified for the paging functionality. The GetHtml method of the WebGrid object will renders an HTML table for the grid helper. Using the the grid.Columns, we can specify which columns to display and we can also apply formatting for the columns.

  1. grid.Column("Salary",format:@<text>$@item.Salary</text>)


The above code is applying a sign ($) before the column value Salary.


The below code block is showing our Model class and the Action method

Employee Class

  1. public class Employee
  2.     {
  3.         public string FirstName { get; set; }
  4.         public string LastName { get; set; }
  5.         public double Salary { get; set; }      
  6.         public static List<Employee> GetList()
  7.         {
  8.           List<Employee> employees = new List<Employee>{
  9.           new Employee   { FirstName="Rahul", LastName="Kumar", Salary=45000},
  10.           new Employee   { FirstName="Jose", LastName="Mathews", Salary=25000},
  11.           new Employee   { FirstName="Ajith", LastName="Kumar", Salary=25000},
  12.           new Employee   { FirstName="Scott", LastName="Allen", Salary=35000},
  13.             new Employee   { FirstName="Abhishek", LastName="Nair", Salary=125000}
  14.             };
  15.             return employees;
  16.         }
  17.     }


Action Method

  1. public ActionResult Index()
  2.         {
  3.             var empoyees = Employee.GetList();
  4.             return View(empoyees);
  5.         }


The screen shot of the view page is shown in the below. The data is displayed with paging and sorting functionality.


  • Hello shiju,
    Looks good. Where are the spots that allow me to add my own css? Also, my current grid (home built, using Stephen Walther's book) allows me to integrate a search bar. How would I do that?

  • Tried webGrid bound to an EF entity and through Sql Server Profiler observed an "select.. from.." for entire table, for each page item (10)! Any way to control paging from server?

  • Hello Shiju,
    First I wanna thank you for the helpful article, it`s helping me a lot.

    I`m using this WebGrid in ASP.NET, without Razor sintax.
    It worked fine, but now I wish to know how to use the "format:" expression in ASP.NET.

    I saw many samples of how to format a column, but all using Razor engine.

    Do you have any idea of how to do it using ASP.NET sintax?

    Thanks and regards,

  • I'd like to see the grid integrated with data annotations. This would make it consistent with other helpers (e.g. TextBoxFor) For example:

    grid.ColumnFor(m => m.FirstName)

    For that matter, how about a GridFor helper that would use all the data annotations for the given class?

  • If you have the time can you write about how paging works.

    How can i get the requested page in my controller? I can not find any examples.

  • It's possible to search in results, I mean when grid.GetHtml render results maybe you have thousands of data and you want all the people who LastName is "Smith". I've try to do it but I can't resolve it.

  • How I can write this code in VB.NET

    I am getting syntax error when i write as

    grid.Column("Edit", format:=@@Html.ActionLink("Modify", "ModifyArea", New With {.id = Model.ID}))

  • I was wondering if you could point out how webgrid paging and sorting is clientside. When I look at the the Http request it only sending back the required data. I am bit confused ?

  • Hi, i'm a newbee in MVC 3. I have bot been able to find a proper link to enable inline editing in web grid. Could you please help me with the same. I have been able to get a text box in there. But then Validation and async save get me worried.

  • In my case webhelper does not help.

  • I would really appreciate, if you can post the full code to show – from how to define grid and then how to update the values of selected item from Grid. Thanks in Advance..

  • Thanks lot for your article. Its realy Great!. let me know how we can insert dropdown in Grid.Please ..!

  • Hi am I reading this blog wrong? As I'm seeing a load of questions but no answers. I am specifically looking for how to add a dropdownlist, which I have seen a few examples on but how do you get the selected value in a controller post? Your help would be really appreciated, thanks

Comments have been disabled for this content.