Using the WebGrid Helper

The WebGrid helper generates HTML to display data items in a grid format, using the HTML table
element. This helper is a wrapper around a ASP.NET Web Pages control. It is a nice bonus to be able to
use it with the MVC Framework but, as you will see, it is a little awkward.

To start with, you need a source of items to display. We have created an
action method that returns a collection of Product objects.

public ActionResult Grid() {
IEnumerable<Product> productList = new List<Product> {
new Product {Name = “Kayak”, Category = “Watersports”, Price = 275m},
new Product {Name = “Lifejacket”, Category = “Watersports”, Price = 48.95m},
new Product {Name = “Soccer ball”, Category = “Football”, Price = 19.50m},
new Product {Name = “Corner flags”, Category = “Football”, Price = 34.95m},
new Product {Name = “Stadium”, Category = “Football”, Price = 79500m},
new Product {Name = “Thinking cap”, Category = “Chess”, Price = 16m}
return View(productList);

The action method passes an IEnumerable<Product> as the view model object. Now we will shows
how we can display this data using the WebGrid helper.

@model IEnumerable<DynamicData.Models.Product>
var grid = new WebGrid(
source: Model,
rowsPerPage: 4);
tableStyle: “grid”,
headerStyle: “header”,
rowStyle: “row”,
footerStyle: “footer”,
alternatingRowStyle: “altRow”,
columns: grid.Columns (
grid.Column(“Name”, “Item”, style:”textCol”),
grid.Column(“Price”, style: “numberCol”,
format: @<text>$@string.Format(“{0:F2}”, item.Price) </text>)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s