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