MvcContrib Grid Part 5 - The Action Syntax

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:

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