A first look at the ASP .NET MVC 3 WebGrid

I just installed ASP .NET MVC 3 Beta. This post provides a brief introduction to the new WebGrid.
Note:

  • At the time of writing the ASP .NET MVC 3 was in Beta
  • I am not yet using Razor for my view markup
  • Sorry about the formatting in the syntax highlighting on this one
  1. How to add an ActionLink Edit column to the ASP .NET MVC 3 WebGrid.
    • To start lets look at a cut down version of the original ASP .NET MVC 2 View generated (except the delete action) using the built in scaffolding:
    • <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
      <table>
      <tr>
      <th></th>
      <th>
         Title
      </th>
      <th></th>
      </tr>
      <% foreach (var item in Model) { %>
         <tr>
         <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %>
         </td>
         <td>
            <%: item.Title %>
         </td>
         <td>
            <a onclick="deleteRecord('Cart', '<%= item.Id %>')" href="JavaScript:void(0)">Delete</a>
         </td>
         </tr>
         <% } %>
      <p>
      <%: Html.ActionLink("Create New", "Create") %>
      </p>
    • Replacing this with the ASP .NET MVC 3 Beta WebGrid can be performed as follows:
    • <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
      <%
      var grid = new System.Web.Helpers.WebGrid(Model, new List<string>(){"Title"});
      %>
      <%= grid.GetHtml(columns: grid.Columns(
            grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
            grid.Column("Title"),
            grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord('Cart', '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
      )
      ) %>
      <p>
      <%: Html.ActionLink("Create New", "Create") %>
      </p>

      The important point to note here is that to get your Edit ActionLink you need to provide a Column definition with the format parameter specified such that it returns your ActionLink i.e

      grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }))
  2. How to enable/disable the pager and change the page size.
  3. Straight out of the box the WebGrid supports paging which by default is enabled with a page size of 10 but can be configured using the rowsPerPage and canPage attributes as follows:

    <%
    var grid = new System.Web.Helpers.WebGrid(Model,
                 columnNames: new List<string>(){"Title"},
                 rowsPerPage:5,
                 canPage:true);
    %>
  4. How to emit CSS class attributes to your table
  5. The last thing worth mentioning in this introductory post is that the css class can also be specified for the table using the following parameters tableStyle, headerStyle, footerStyle, rowStyle and alternateRowStyle style as follows:

    <%= grid.GetHtml(
       tableStyle: "table",
       headerStyle: "header",
       footerStyle: "footer",
       rowStyle: "row",
       alternatingRowStyle: "alt",
       columns: grid.Columns(
          grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
          grid.Column("Title"),
          grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord(Cart, '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
    )
    ) %>

Happy Coding,
Nick