Click here to Skip to main content
12,071,437 members (35,072 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

73K views
13 bookmarked
Posted

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
Architect OG-BITechnologies
United States United States

You may also be interested in...

Comments and Discussions

 
QuestionReference error and its solution. Pin
NMathur18-Nov-13 19:59
memberNMathur18-Nov-13 19:59 
Questionhow can we create webgrid controls our own. Pin
rajacsharp58-Oct-13 6:12
memberrajacsharp58-Oct-13 6:12 
QuestionVery Nice Pin
Member 1011688426-Jul-13 8:19
memberMember 1011688426-Jul-13 8:19 
GeneralMy vote of 5 Pin
gopal venkat20-Jul-13 17:24
membergopal venkat20-Jul-13 17:24 
GeneralMy vote of 5 Pin
thiago0911-Feb-13 7:47
memberthiago0911-Feb-13 7:47 
QuestionPostback issue in WebGrid Pin
pdsweetpd22810-Dec-12 21:13
memberpdsweetpd22810-Dec-12 21:13 
SuggestionRe: Postback issue in WebGrid Pin
ozkar garcia12-Dec-12 4:37
memberozkar garcia12-Dec-12 4:37 
GeneralMessage Removed Pin
Member 38231014-Dec-12 8:16
memberMember 38231014-Dec-12 8:16 
GeneralRe: NICE STYLE . I USED IN MY ARTICLE Pin
ozkar garcia7-Dec-12 4:57
memberozkar garcia7-Dec-12 4:57 
QuestionSort and Paging do not work for me Pin
Scott VanDalen11-Oct-12 9:34
memberScott VanDalen11-Oct-12 9:34 
AnswerRe: Sort and Paging do not work for me Pin
ozkar garcia11-Oct-12 14:14
memberozkar garcia11-Oct-12 14:14 
GeneralRe: Sort and Paging do not work for me Pin
Calvin Bowens6-Feb-13 7:04
memberCalvin Bowens6-Feb-13 7:04 
GeneralRe: Sort and Paging do not work for me Pin
ozkar garcia6-Feb-13 8:04
memberozkar garcia6-Feb-13 8:04 
GeneralRe: Sort and Paging do not work for me Pin
Calvin Bowens6-Feb-13 8:31
memberCalvin Bowens6-Feb-13 8:31 
SuggestionFormatting... Pin
Sandeep Mewara23-Sep-12 21:09
mvpSandeep Mewara23-Sep-12 21: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.

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