This is part 5 of a series about the new MvcContrib grid.

The rewritten MvcContrib grid now has an alternative syntax thanks to the work of Will Shaver. This syntax is called the ‘Action’ syntax as it makes heavy use of the System.Action delegate.

Enabling the ActionSyntax

By default, the methods associated with the Action Syntax will not show up as they are extension methods that live in a different namespace to the rest of the grid. Out of the box only the default syntax will work. To enable the Action Syntax you’ll need to either import the MvcContrib.UI.Grid.ActionSyntax namespace either in your .aspx view… 

<%@ Import Namespace="MvcContrib.UI.Grid.ActionSyntax" %>

…or in your web.config’s namespace import section:

<system.web>
  <pages>
    <namespaces>
        <add namespace="MvcContrib.UI.Grid.ActionSyntax" />
    </namespaces>
  </pages>
</system.web>

Comparing the two syntaxes

There are several differences between the two syntaxes. Here is a grid definition using the default syntax: 

<%= Html.Grid(Model)
	.Columns(column => {
  		column.For(x => x.Id).Named("Person ID");
     		column.For(x => x.Name);
     		column.For(x => x.Gender);    
     		column.For(x => x.DateOfBirth).Format("{0:d}");
		column.For("View Person").Named("").Partial("ViewPersonPartial"); //Example of using a Partial view for complex cells
     	}).RowStart(row => string.Format("<tr{0}>", row.IsAlternate ? "style=\"background-color:#CCDDCC\"" : "")) 
  %>

Here we’re specifying that the View Person column is a custom column that should be rendered using a Partial View, and the start of every alternate row has a background colour**.

Here is the same grid defined using the ActionSyntax: 

<% Html.Grid(Model).Columns(column => {
     		column.For(x => x.Id).Named("Person ID");
     		column.For(x => x.Name);
     		column.For(x => x.Gender);
     		column.For(x => x.DateOfBirth);
                column.For("View Person").Named("").Action(p =>	{ %>
                     <td style="font-weight:bold">
	                <%= Html.ActionLink("View Person", "Show", new { id = p.Id })%>
	             </td>
                <% });
     	}).RowStart((p,row)  => {     
             if (row.IsAlternate) { %>
                   <tr style="background-color:#CCDDCC">
             <%  }  else  { %>
                 <tr>
             <% }
    }).Render(); %>

Note the following differences:

  • The ActionSyntax requires the use of <% %> tags rather than <%= %> tags.
  • The ActionSyntax requires that you end your grid definition with a call to the Render method or the grid will not show up if you do not call Render.
  • You must terminate the call to Render with a semicolon
  • You can directly embed HTML in the grid definition rather than using strings or partial views

Both syntaxes have their advantages and disadvantages but the end result is the same. You’re free to use whichever one you prefer.

**Both the partial view/actionsyntax approach are designed only for complex column definitions. This example was quite contrived and you could achieve the same result with a far simpler approach: 

<style type="text/css">
.gridrow_alternate { background-color:#CCDDCC; }
</style>
<%= Html.Grid(Model)
	.Columns(column => {
  		column.For(x => x.Id).Named("Person ID");
     		column.For(x => x.Name);
     		column.For(x => x.Gender);    
     		column.For(x => x.DateOfBirth).Format("{0:d}");
		column.For(x => Html.ActionLink("View Person", "Show", new { id = p.Id }))
                           .Attributes(x => new Hash(style => "font-weight:bold"));
     	}) %>