ASP.NET MVC Grid View using MVCContrib

In this post, I demonstrate how you can use the  Grid UI helper of the MVCContrib project in your ASP.NET MVC  application. MVCContrib is a community project that adds the functionalities to Microsoft’s ASP.NET MVC Framework and makes the framework easier to use. MVCContrib provides several UI helpers and Grid UI helper is one of them. The Grid helper provides the functionalities of GridView control of ASP.NET GridView. The Grid component generates HTML tables for displaying data from a collection of Model objects and it support paging. The MVCContrib project can download from

The following are the steps to get Grid to work:


Add a reference to the MvcContrib assembly (download available from )

Step 2

Add a namespace import for MvcContrib.UI.Html to your web.config file:
        <add namespace="MvcContrib.UI"/>
        <add namespace="MvcContrib.UI.Html"/>
        <add namespace="MvcContrib.UI.Html.Grid"/>
       <add namespace="MvcContrib"/>

Using the Grid

 The Grid supports pagination through the AsPagination extension method. For this, you should import the MvcContrib.Pagination namespace in your controller.

Imports the following namespace to your controller class for pagination support

using MvcContrib.Pagination;

 Controller Class

public ActionResult List(int? page) {
using (DBDataContext db = new DBDataContext()) {
ViewData["categories"] = db.Categories.ToList().AsPagination(page ?? 1,10);
return View("Categories");

The above action method of the Controller class used the AsPagination extension method. If you don't want pagination, you can  avoid  AsPagination method from Action method. The AsPagination extension method will work on any IEnumerable<T> or IQueryable<T>. This extension method has two arguments and the first one is the page number and the second optional parameter is the size of each page. The default value of the second parameter is 20. The pagination HTML will automatically generated by the Grid.


In your View you can then make a call to Html.Grid.

column => {
column.For(c => c.CategoryID, "ID");
column.For(c => c.CategoryName);
column.For(c => c.Description);
column.For("Edit").Do(c => { %>
<td><a href="/Category/Edit/<%= c.CategoryID %>">Edit</a>
<%}); }
%>    </div>

The first parameter is the ViewData key that contains the Model data and the second parameter is used to construct the column model for the grid. The column.For will generates the columns for the Grid.The lambda expression c => c.CategoryID will generates the value of the property CategoryID and the value of the second parameter "ID" is the custom heading of the column. If custom heading is not specified, the name of the property will also use for heading. You can add custom columns by calling column.For("column name") and then specifying a lambda for generating the HTML. The last column.For method of the above view code will add a custom column name "Edit".

For more details visit



  • Good example. Thanks.

  • I am able to use it , But i want place place there alternate rows CSS . Please tell me what i need to do?

  • @jaydeep_vishwakarma

    I would like to recommend to use jQuery. Have a look into the

  • Shiju...
    Thx for the step

    "Do or Do Not, There is No Try"

  • Hi,
    first of all thanks for this post secondly i want to know how can i use hierarchical grid with this ?
    any idea ?

  • Hi I am New to MVC and i tried to implement the code but i am getting an error in config file

    Configuration Error
    Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

    Parser Error Message: Unrecognized configuration section pages.

    Source Error:

    Line 34:
    Line 35:
    Line 36:
    Line 37:
    Line 38:

    Can anyone please help me out

  • @sunilsingh,

    Check the latest version of MVCContrib grid. The details available from

  • The question I have is, is it possible to create an editable DataGrid in ASP.NET MVC like you can with web forms? Or, is the above mostly for view only?

  • In aspx page mentioned Html.Grid. What is this Please tell me.

  • Thanks Shiju! This is a BIG time saver.

    How can I use this for an inline "Add" function?

  • @Suresh:

    Category is the entity named Category. That means your Grid will show objects have "Category" type.

  • I think should be cnageed to

  • A little change:

    Should be changed to:

  • @Suresh :

    after adding the contrib reference you need to build your project so as to get the intellisence

  • Hi,

    I am using MVC 2, VWD 2010 Express, also a bit of newbie to MVC.

    Still in the dark. For the action "List":
    using (DBDataContext db = new DBDataContext()) {
    ViewData["categories"] = db.Categories.ToList().AsPagination(page ?? 1,10);
    return View("Categories");

    I have added the References and modified Web.config.
    My VWD looks does not recognise DBDataContext.
    And also I don't know how to substitude my model into the "Categories".

    Is that any more sample code of the "Categories" for me to get started please?


  • I want grid data from view to controller how is it possible?


Comments have been disabled for this content.