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()  
) 

13 Comments

Krishna

in the list of 100 records
i change 10 rows per page
can i sort the 3rd page alone

Reply
Anand Vardhan

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?

Reply
Yasser

post your question in detail at stackoverflow.com, and come back here with the question link.

Reply
Jose

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.

Reply
ketan

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

Reply
Deepan

Hi Yasser,

am new to mvc.i want to do insert,edit,update,delete in same page using razor.pls help me for code.

Reply
cyberguy

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

Reply
yassershaikh

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.

Reply
Ankur Chhabra

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.

Reply
Yasser

Nice article. I had followed your blog and your book as a fresher. Your interview questions and answers are very very helpful.

Reply

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>