Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

MVC WebGrid Helper

, 24 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
If you are using Razor views and need to build a grid to show data, you can leverage the WebGrid  HTML helper.

If you are using Razor views and need to build a grid to show data, you can leverage the WebGrid HTML helper. This helper can let us build a grid with several features like custom styles, sorting, paging and AJAX reload.

This helper is found in the System.Web.Helpers.dll which should be configured automatically when using WebMatrix. If you are using Visual Studio 2010 MVC 3 projects with Razor views, you may need to install a NuGet package by entering this command in the Package Manager Console (Tools->Library Package Manager) Install-Package RazorGenerator.Templating

That command should add the reference automatically.

The Model

For the purpose of this article, we will be using a simple model with a few properties.

public class Item
{      
    public int Id{get;set;}
    public string Name{get;set;}
    public string Description{get;set;}
}

We will create a list of items that we can show on the grid:

List<Models.Item> items = new List<Models.Item>();
items.Add(new Models.Item{Id=1,Name="Prod1",Description="one"});
items.Add(new Models.Item{Id=2,Name="Prod2",Description="two"});
items.Add(new Models.Item{Id=3,Name="Prod3",Description="three"});
items.Add(new Models.Item{Id=4,Name="Prod4",Description="four"});

Now that we have the model ready with a few records, we can work on showing the data on the grid.

Basic Grid

To build a basic grid, we just need to instantiate the grid and pass the model in the constructor:

WebGrid grid = new WebGrid(items);

On the view, we just need to add this mark-up:

@grid.GetHtml()

We can now run the application and load the view. The grid on its simplest form looks like this:

This is just a basic HTML table with not much style, but the WebGrid helper provides several other features that can allow us to customize the way it renders. For example, if you need to control the number of pages, you can change the instantiation to look like this:

WebGrid grid = new WebGrid(items, rowsPerPage:2);

The view now renders a paging control on the footer of the grid, and it shows two records per page.

We should now control the way the columns are displayed. This can be done by adding columns to the grid to specify the columns order, the field to bind and the header label.

@grid.GetHtml(
    columns:grid.Columns(
	    grid.Column("Id", "Item Id"),
		grid.Column("Name", "Name"),
		grid.Column("Description", "Description") 
     )
	)

After making this change, we can now refresh the page, and the grid should now look this way:

Grid and Styles

We should now try to improve the design with some CSS changes. The WebGrid helper allows us to add a class names to style the table, header, footer, row and alternating row elements. We first add this CSS styles:

.gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;border-collapse: collapse;min-width: 550px; background-color: #fff;color: #fff;}
.gridHead th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow{background-color: #efeeef;}
.gridTable tr:hover{background-color: #f6f70a;}
.gridAltRow td{padding: 10px;margin: 5px; color: #333;}
.gridRow td{padding: 10px;color: #333;}
.gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
.gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}

We can now apply the styles to the grid by associating the grid elements to our CSS class names as listed below:

@grid.GetHtml(
    tableStyle: "gridTable",
    headerStyle: "gridHead", 
    footerStyle:"gridFooter",
	rowStyle:"gridRow", 
    alternatingRowStyle: "gridAltRow",
    columns:grid.Columns(
        grid.Column("Id", "Item Id"),
        grid.Column("Name", "Name"),
        grid.Column("Description", "Description") 
       )
      )

We refresh the page, and our grid now looks like this:

That is much better. You can also notice that the paging control has been improved with better fonts and button style. We added a hover style to the rows as well. This allows us to highlight the rows as the cursor moves over them.

The grid by default provides sorting capability. If we click on the headers, we can see how the data is sorted. We added a style to the header labels to underline the selected header when the cursor hovers over the label.

AJAX Reload

One more thing to notice is that when we sort or click to another page, the whole page refreshes. We can prevent a page reload by using AJAX. To achieve this, we first need to wrap the grid markup with a DIV element as follows:

<div id="gridContent">

    @grid.GetHtml(
				       tableStyle: "gridTable",
				       headerStyle: "gridHead", 
				
				       footerStyle:"gridFooter",
				       rowStyle:"gridRow", 
				
				       alternatingRowStyle: "gridAltRow",
				       columns:grid.Columns(
				             grid.Column("Id", "Item Id"),
				             grid.Column("Name", "Name"),
				             grid.Column("Description", "Description") 
				
				       )
				      )

When we instantiate the grid, we need to set the AJAX parameter ajaxUpdateContainerId with the id of our div:

WebGrid grid = new WebGrid(items, rowsPerPage:2, ajaxUpdateContainerId: "gridContent");

Reload the page, we can now try to sort or click another page, and we can notice that there is no page post back as only the grid reloads. There are additional features that we did not cover on this post, but I hope I was able to provide a bit more insight on how to use the WebGrid helper.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ozkar garcia
Software Developer (Senior) OG-BITechnologies
United States United States
My Blog
Follow on   Twitter

Comments and Discussions

 
Generalnice article.... PinmemberBinu19854-Nov-14 0:02 
QuestionReference error and its solution. PinmemberNMathur18-Nov-13 19:59 
Questionhow can we create webgrid controls our own. Pinmemberrajacsharp58-Oct-13 6:12 
QuestionVery Nice PinmemberMember 1011688426-Jul-13 8:19 
GeneralMy vote of 5 Pinmembergopal venkat20-Jul-13 17:24 
GeneralMy vote of 5 Pinmemberthiago0911-Feb-13 7:47 
QuestionPostback issue in WebGrid Pinmemberpdsweetpd22810-Dec-12 21:13 
SuggestionRe: Postback issue in WebGrid Pinmemberozkar garcia12-Dec-12 4:37 
GeneralMessage Removed PinmemberMember 38231014-Dec-12 8:16 
GeneralRe: NICE STYLE . I USED IN MY ARTICLE Pinmemberozkar garcia7-Dec-12 4:57 
QuestionSort and Paging do not work for me PinmemberScott VanDalen11-Oct-12 9:34 
AnswerRe: Sort and Paging do not work for me Pinmemberozkar garcia11-Oct-12 14:14 
GeneralRe: Sort and Paging do not work for me PinmemberCalvin Bowens6-Feb-13 7:04 
GeneralRe: Sort and Paging do not work for me Pinmemberozkar garcia6-Feb-13 8:04 
GeneralRe: Sort and Paging do not work for me PinmemberCalvin Bowens6-Feb-13 8:31 
SuggestionFormatting... PinmvpSandeep Mewara23-Sep-12 21:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 24 Sep 2012
Article Copyright 2012 by ozkar garcia
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid