WebGrid WebHelper in ASP.NET MVC 3 RC
Posted by: Malcolm Sheridan
in Category ASP.NET MVC
Abstract: The following article demonstrates how to use the WebGrid web helper in ASP.NET MVC 3 RC
ASP.NET MVC 3 RC contains a full suite of web helpers that Microsoft have made available through the Microsoft Web Helpers library. This can be downloaded through NuGet (formerly NuPack). NuGet is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. One web helper that could reduce the amount of code you need to write is the WebGrid web helper. As the name suggests, this web helper takes a collection of data and renders a HTML table. This article will show you how to download the library and start using this web helper. This code also works in WebMatrix if you're using it.
Update: You can also read Part-II of this article Efficient Paging with WebGrid Web Helper - ASP.NET MVC 3 RC
Before moving on, you need to download ASP.NET MVC 3 RC. Click here to download and install them using the Microsoft Web Platform Installer.
The Microsoft Web Helpers are added as a reference by default now in ASP.NET MVC 3 RC. I’ve left the instructions on how to add them in this article in case you need to do this as a separate exercise.
Open visual studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 dialog can be seen below:
Choose Razor as the view engine and click OK.
The next step is to download the Microsoft Web Helpers library through NuGet. Follow these steps to do this:
Step 1: Right click the website and choose Add Package Reference.
2. The Add Package Reference dialog will open. Search for Microsoft in the search box in the top right corner. Upon completion you'll see microsoft-web-helpers option. Select that option and click Install.
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:
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
The entire source code of this article can be downloaded over here