Introduction to WebGrid in MVC 3 Razor (with code samples)

Webgrid is used to display data on a web page using an HTML table element. It has built-in support for paging and sorting. You can style webgrid easily using the alternatingRowStyle,headerStyle or tableStyle attributes.

Here is a link to msdn for the WebGrid Class.

The GetHtml() method renders the grid. Now lets render a simple grid with no formatting using the following code.

1. Basic

Razor Code

@{  
var grid = new WebGrid(source: Model.Products);  
@grid.GetHtml()  
} 

Output

2. Formatting :

Now to make the grid more visually appealing, you can customize each column of the webgrid. This can be done using the optional argument called ‘Columns‘. In the code below for the last column I have used the optional ‘format‘ attribute to place a ‘$’ character after the price value.

Razor Code

@{  
var grid = new WebGrid(source: Model.Products);  
@grid.GetHtml(columns:grid.Columns(  
grid.Column(columnName:"ProductName", header:"Name of the Product"),  
grid.Column(columnName:"ProductCode", header:"Code"),  
grid.Column(columnName:"ProductPrice", header:"Price in $", format:@<text>@item.Price $</text>)))  
}  

Output

3. Sorting and Paging :

For sorting and paging, we can use the ‘rowsPerPage‘ attribute which specifies the maximum number of rows to be displayed per page, we can disable sorting on a specific columns using the ‘canPage‘ attribute on that column. (see Code column)

Razor Code

@{  
var grid = new WebGrid(source: Model.Products, rowsPerPage:4, canPage:true, canSort:true);  
@grid.GetHtml(columns:grid.Columns(  
grid.Column(columnName:"ProductName", header:"Name of the Product"),  
grid.Column(columnName:"ProductCode", header:"Code", canSort:false),  
grid.Column(columnName:"ProductPrice", header:"Price in $", format:@<text>@item.Price $</text>)))  
}  

Output

4. Styling

You can style your webgrid using the alternatingRowStyle,headerStyle or tableStyle attributes, see the code below…

Razor Code

@{  
var grid = new WebGrid(source: Model.Products, rowsPerPage:4, canPage:true, canSort:true);  
@grid.GetHtml(  
headerStyle: "headerStyle",  
tableStyle: "tableStyle",  
alternatingRowStyle: "alternateStyle",  
columns:grid.Columns(  
grid.Column(columnName:"ProductName", header:"Name of the Product"),  
grid.Column(columnName:"ProductCode", header:"Code", canSort:false),  
grid.Column(columnName:"ProductPrice", header:"Price in $", format:@<text>@item.Price $</text>)))  
}  

CSS Code

.headerStyle  
{  
background: #FFFFCC;  
}

.tableStyle  
{  
background: #CFFFCC;  
}

.alternateStyle  
{  
background: #FBFFCC;  
}  

Output

5. Custom Paging

http://yassershaikh.com/webgrid-paging-with-pager-method-in-razor-mvc/

5. How to include an action link in a webgrid

We can include ActionLinks in a webgrid column using the following code. We can also pass values from an ActionLink to a Action as seen in the code below.

grid.Column(format: (item) => Html.ActionLink("Edit", "ActionName", new { param1 = "hello", param2 = "bye" }))  

or

grid.Column(format:@<text>@Html.ActionLink("Edit", "ActionName", new { param1 = "hello", param2 = "bye" })</text>)  

In the code above I am passing two values to my action viz. param1, param2

Action in the Controller

public ActionResult ActionName(string param1, string param2)  
{}  

6. Displaying multiple ActionLink in a single column of a webgrid

grid.Column(header: "Actions", format: (item) =>  
new HtmlString(  
Html.ActionLink("Edit", "Edit", new { id = item.id } ).ToString() +  
Html.ActionLink("Delete", "Delete", new { id = item.id } ) .ToString()  
) 

About Yasser Shaikh

Hello, I am a Web Dev, employed with Media.Net where I primarily work on ASP.NET MVC and Angular JS based developement.

Questions? Enquiries? Comments? Or even just want to say “Hi” to me, you are welcome to all of that. Just drop me a message at “mail@yassershaikh.com” and I’ll get back to you as soon as possible.

Cheers !

13 comments

  1. Suppose, I have given a “forward” ActionLink on every row. So when user forwards the selected row to some where its status will be changed from “pending” to “sent” so after that i want to disable the “forward” actionlink for that particular row only. How can I achieve that?

  2. Hi Yasser, excellent article. I’m trying to give some css style to rows considering specific logic, by example, different background colors depending on ItemPrice, how can I achieve this? Sorry for my bad english and thanks in advance.

  3. Hello,

    I would like to reload webgrid again afater edit click and update in database.
    How i can do that please give me idea

    Thanks

  4. HI can you please post an article regarding a dropdownlist in webgrid, saving and selecting the selected value in the dropdown.

    1. sorry for the late reply, but i had stopped working on webgrids… still if some day i get time i will definitely try and write a post on it.

  5. Hi
    if i am using webgrid in partial view and after any updation through ajax .its default paging not working because its url change in numbering .
    any idea how to solve it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>