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. @{        
  6.    
  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.

Published Friday, October 8, 2010 3:51 AM by shiju

Comments

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Friday, October 8, 2010 2:17 PM by Donald Shaw

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?

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, October 11, 2010 1:44 PM by villar

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?

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Wednesday, October 13, 2010 7:22 AM by Andre Baltieri

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,

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, October 25, 2010 11:19 AM by mikeyrad

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?

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, November 8, 2010 6:39 PM by Martin Nyborg

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.

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Wednesday, February 16, 2011 11:55 AM by Sebastian

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.

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, March 7, 2011 9:34 AM by Anand More

How I can write this code in VB.NET

I am getting syntax error when i write as

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

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Wednesday, July 6, 2011 10:16 AM by Munish

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 ?

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Sunday, July 10, 2011 8:02 PM by Seema

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.

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, August 15, 2011 4:23 AM by hani

In my case webhelper does not help.

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Thursday, September 8, 2011 9:08 PM by kapil

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..

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Saturday, December 3, 2011 1:55 AM by Justinonday

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

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Monday, December 12, 2011 12:27 AM by Mahesh Tryambake

gr8  article on paging tx

# re: Using the WebGrid Helper in ASP.NET MVC 3 Beta

Saturday, December 17, 2011 6:25 PM by richardc

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

Leave a Comment

(required) 
(required) 
(optional)
(required)