WebGrid WebHelper in ASP.NET MVC 3 RC

3. Click Close to return to the project

Check the references and you'll see that the library has been added to the project.



Now it's time to start coding! To start using the WebGrid web helper, start off by creating an object reference to the WebGrid class:

The WebGrid constructor takes a number of parameters. Only one is mandatory. Here’s an explanation of all of them:

System.Collections.Generic.IEnumerable<dynamic> source
The collection of objects

System.Collections.Generic.IEnumerable<string> columnNames = null
The names of the columns appearing in the grid

string defaultSort = null
The name of the column to sort the grid by default

int rowsPerPage = 10
The number of rows to display per page is paging is enabled

bool canPage = true
Determines if the WebGrid can be paged

bool canSort = true
Determines if the WebGrid can be sorted

string ajaxUpdateContainerId = null
The id of the containing element for Ajax paging and sorting support

string ajaxUpdateCallback = null
The callback function for Ajax paging and sorting support

string fieldNamePrefix = null
The value which prefixes the default querystring fields

string pageFieldName = null
A value that replaces the default querystring page field

string selectionFieldName = null
A value that replaces the default querystring row field

string sortFieldName = null
A value that replaces the default querystring sort field

string sortDirectionFieldName = null
A value that replaces the default querystring sortdir field

The GetHtml method renders the grid. To render a simple grid with no formatting, use the following code. I’m using the model that’s being passed in to the view for these examples.

Styling the ASP.NET MVC 3 WebGrid

To make the grid more visually appealing, you can customise each column. One of the optional arguments GetHtml accepts is columns, which is a collection of WebGridColumn objects.

Taking this one step further, you can attach css class attributes to the WebGrid. This abstracts the styling from the generated HTML. GetHtml allows you to specify a table, header and alternating row style. See below.

Paging the ASP.NET MVC 3 WebGrid

To make the UI experience even better, the WebGrid also has built-in paging. To enable paging, you can customise the Pager object that’s associated to the grid.


One caveat before using the paging is that all the data is fetched upon each page request. This is fine if you’re working with a small set of data, but if you have thousands of records, performance would degrade dramatically. I’ll show you in my next article on how to deal with this.

Update: You can now read Part-II of this article Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3 RC