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