Click here to Skip to main content
14,976,594 members
Articles / MVC
Technical Blog
Posted 24 Sep 2012

Tagged as

Stats

102.5K views
13 bookmarked

MVC WebGrid Helper

Rate me:
Please Sign up or sign in to vote.
4.76/5 (14 votes)
24 Sep 2012CPOL3 min read
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.

C#
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:

C#
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:

C#
WebGrid grid = new WebGrid(items);

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

C#
@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:

C#
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.

C#
@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:

CSS
.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:

CSS
@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:

C#
<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:

C#
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

ozkary
Architect OG-BITechnologies
United States United States
Software engineer, author & speaker who enjoys mentoring, learning, speaking and sharing with others about software development technologies. Microsoft MVP.

My Blog

Comments and Discussions

 
QuestionReference error and its solution. Pin
NMathur18-Nov-13 18:59
professionalNMathur18-Nov-13 18:59 
Questionhow can we create webgrid controls our own. Pin
rajacsharp58-Oct-13 5:12
Memberrajacsharp58-Oct-13 5:12 
QuestionVery Nice Pin
Birdie in Boulder26-Jul-13 7:19
MemberBirdie in Boulder26-Jul-13 7:19 
GeneralMy vote of 5 Pin
gopal venkat20-Jul-13 16:24
Membergopal venkat20-Jul-13 16:24 
GeneralMy vote of 5 Pin
DK0911-Feb-13 6:47
MemberDK0911-Feb-13 6:47 
QuestionPostback issue in WebGrid Pin
pdsweetpd22810-Dec-12 20:13
Memberpdsweetpd22810-Dec-12 20:13 
SuggestionRe: Postback issue in WebGrid Pin
ozkary12-Dec-12 3:37
Memberozkary12-Dec-12 3:37 
GeneralMessage Closed Pin
4-Dec-12 7:16
Membervinay.Singh4-Dec-12 7:16 
GeneralRe: NICE STYLE . I USED IN MY ARTICLE Pin
ozkary7-Dec-12 3:57
Memberozkary7-Dec-12 3:57 
QuestionSort and Paging do not work for me Pin
Scott VanDalen11-Oct-12 8:34
MemberScott VanDalen11-Oct-12 8:34 
AnswerRe: Sort and Paging do not work for me Pin
ozkary11-Oct-12 13:14
Memberozkary11-Oct-12 13:14 
GeneralRe: Sort and Paging do not work for me Pin
Calvin B6-Feb-13 6:04
MemberCalvin B6-Feb-13 6:04 
GeneralRe: Sort and Paging do not work for me Pin
ozkary6-Feb-13 7:04
Memberozkary6-Feb-13 7:04 
You can look at two things. Open the developers tools and make sure the actual Jquery scripts are downloaded (http 200) on the page.
Make sure there are no javascript errors in your functions. Any missing bracket can cause all the javascript to break. Use the debug console
GeneralRe: Sort and Paging do not work for me Pin
Calvin B6-Feb-13 7:31
MemberCalvin B6-Feb-13 7:31 
SuggestionFormatting... Pin
Sandeep Mewara23-Sep-12 20:09
mvaSandeep Mewara23-Sep-12 20:09 

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

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