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
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.
<%
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>
<%}); }
);
%>
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