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 http://www.CodePlex.com/MvcContrib.

The following are the steps to get Grid to work:

Step1

Add a reference to the MvcContrib assembly (download available from http://www.CodePlex.com/MvcContrib )

Step 2

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

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.

 View

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

div>
       
<%
           
Html.Grid<Category>(
               
"categories",
               
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>
                     
</td>
                 
<%}); }
          );
      
%>    </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  http://www.CodePlex.com/MvcContrib

 

Published Wednesday, July 23, 2008 4:30 AM by shiju
Filed under: ,

Comments

# re: ASP.NET MVC Grid View using MVCContrib

Thursday, October 16, 2008 12:05 PM by koistya

Good example. Thanks.

# re: ASP.NET MVC Grid View using MVCContrib

Monday, December 29, 2008 2:26 AM by jaydeep_vishwakarma

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

# re: ASP.NET MVC Grid View using MVCContrib

Monday, December 29, 2008 9:03 AM by shiju

@jaydeep_vishwakarma

I would like to recommend to use jQuery.  Have a look into the colorcharge.com/.../jquery-alternate-table-rows

# re: ASP.NET MVC Grid View using MVCContrib

Wednesday, February 18, 2009 8:41 AM by jusufjk

Shiju...

Thx for the step

--------------------

"Do or Do Not, There is No Try"

# re: ASP.NET MVC Grid View using MVCContrib

Thursday, April 30, 2009 1:58 AM by srorigin

Hi,

Shiju

first of all thanks for this post secondly i want to know how can i use hierarchical grid with this ?

any idea ?

# re: ASP.NET MVC Grid View using MVCContrib

Friday, July 10, 2009 3:11 AM by sunilsingh

Hi I am New to ASP.net 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:  </connectionStrings>

Line 35:  

Line 36:     <pages>

Line 37:       <namespaces>

Line 38:         <add namespace="MvcContrib.UI"/>

Can anyone please help me out

# re: ASP.NET MVC Grid View using MVCContrib

Friday, July 10, 2009 7:19 AM by shiju

@sunilsingh,

Check the latest version of MVCContrib grid. The details available from mvccontrib.codeplex.com/.../View.aspx

# re: ASP.NET MVC Grid View using MVCContrib

Tuesday, August 4, 2009 5:18 PM by Jon

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?

# re: ASP.NET MVC Grid View using MVCContrib

Tuesday, September 22, 2009 2:27 AM by Suresh

In aspx page mentioned  Html.Grid<Category>. What is this <Category> Please tell me.

# re: ASP.NET MVC Grid View using MVCContrib

Friday, October 2, 2009 10:01 AM by kmullings

Thanks Shiju!  This is a BIG time saver.

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

# re: ASP.NET MVC Grid View using MVCContrib

Thursday, November 26, 2009 2:26 AM by zorro2006

@Suresh:

Html.Grid<Category>

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

# re: ASP.NET MVC Grid View using MVCContrib

Tuesday, May 18, 2010 5:28 AM by tassadaque

I think <add namespace="MvcContrib.UI.Html.Grid"/> should be cnageed to    <add namespace="MvcContrib.UI.Grid"/>

# re: ASP.NET MVC Grid View using MVCContrib

Wednesday, July 21, 2010 3:09 PM by Pablo Santa Cruz

A little change:

<add namespace="MvcContrib.UI.Html.Grid"/>

Should be changed to:

<add namespace="MvcContrib.UI.Grid"/>

# re: ASP.NET MVC Grid View using MVCContrib

Thursday, October 7, 2010 7:20 AM by ljniox

@Suresh :

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

# re: ASP.NET MVC Grid View using MVCContrib

Tuesday, February 8, 2011 11:37 PM by alant

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?

Thanks

# re: ASP.NET MVC Grid View using MVCContrib

Monday, April 11, 2011 8:49 AM by siva

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

# re: ASP.NET MVC Grid View using MVCContrib

Thursday, July 7, 2011 7:13 AM by virazv

ikick.in/ASPNET-MVC-Grid-View-using-MVCContrib-Shiju-Vargheses-Blog

Leave a Comment

(required) 
(required) 
(optional)
(required)