Strongly Typed ASP.Net MVC Helpers

I've put together a short tutorial on creating ASP.Net MVC Helper Controls that use lambda expressions to strongly type the model, property and value parameters.

Although the ASP.Net MVC helpers are really useful, the one major drawback for me is having to use magic strings to set property values, especially when the properties might be deeply nested lists, or even deeply nests lists and properties within deeply nested lists.

To fix this situation I have wrapped the ASP.Net MVC helpers in order to set properties and values using lambda expressions.

Example calls:

  1. <% using (this.Html.BeginForm("Update", "Home"))
  2.    { %>     
  3.      <%= this.Html.RenderTextBoxFor(this.Model, c => c.FirstName)%>
  4.      <%= this.Html.RenderValidationMessageFor(this.Model, c=>c.FirstName ) %>
  6.      <%= this.Html.RenderTextBoxFor(this.Model, c => c.LastName)%>
  7.      <%= this.Html.RenderValidationMessageFor(this.Model, c=>c.LastName ) %>
  9. <%if (this.Model != null)
  10.   { %>
  12.      <% for (int i = 0; i < this.Model.Addresses.Count; i++)
  13.         { %>
  14.             House number <%= this.Html.RenderTextBoxFor(this.Model, c => c.Addresses[i].HouseNumber)%>    
  15.             <%= this.Html.RenderValidationMessageFor(this.Model, c => c.Addresses[i].HouseNumber)%>  
  16.                   
  17.             Postcode <%= this.Html.RenderTextBoxFor(this.Model, c => c.Addresses[i].Postcode)%>  
  18.             <%= this.Html.RenderValidationMessageFor(this.Model, c => c.Addresses[i].Postcode)%>                   
  19.    <%}%>   
  20.    <%} %>
  21.    <input type="submit" value="Submit" />
  22. <%} %>

As you can see, the above example is a basic user model with a first name, last name and a list of addresses, each textbox also has a corresponding validation message for displaying any model state errors (mainly just to show that as the controls are wrapping the ASP.Net MVC Helpers, you can still utilise model state as normal).

The rendered html source has the correct names required for use with model binding.

For example:

  1. <form action="/Home/Update" method="post">
  2.     <input id="FirstName" name="FirstName" type="text" value="Sean" />
  3.     <input id="LastName" name="LastName" type="text" value="McAlinden" />
  4.     
  5.             House number <input id="Addresses[0]_HouseNumber" name="Addresses[0].HouseNumber" type="text" value="12" />
  6.             Postcode <input id="Addresses[0]_Postcode" name="Addresses[0].Postcode" type="text" value="AB11 1CD" />  
  7.             
  8.             House number <input id="Addresses[1]_HouseNumber" name="Addresses[1].HouseNumber" type="text" value="34" />
  9.             Postcode <input id="Addresses[1]_Postcode" name="Addresses[1].Postcode" type="text" value="EF22 2GH" />
  10.    
  11.    <input type="submit" value="Submit" />
  12. </form>

In order to utilise this technique you need to create wrappers for each control you wish to use, below are examples of the two controls used above.

  1. using System;
  2. using System.Linq.Expressions;
  3. using System.Web.Mvc;
  4. using System.Web.Mvc.Html;
  5. namespace Demo.Helpers
  6. {
  7.     /// <summary>
  8.     /// Class with strong type wrappers for the mvc helper controls.
  9.     /// </summary>
  10.     public static class StronglyTypeControls
  11.     {
  12.         /// <summary>
  13.         /// Renders an mvc textbox control.
  14.         /// </summary>
  15.         /// <typeparam name="TModel">Accepts the type of model.</typeparam>
  16.         /// <typeparam name="TProperty">Accepts the type of property.</typeparam>
  17.         /// <param name="html">Extends the html object.</param>
  18.         /// <param name="model">Accepts the model.</param>
  19.         /// <param name="property">Accepts a lambda expression representing the property.</param>
  20.         /// <returns>Returns a string text box control.</returns>
  21.         public static string RenderTextBoxFor<TModel, TProperty>
  22.             (
  23.                 this HtmlHelper html,
  24.                 TModel model,
  25.                 Expression<Func<TModel, TProperty>> property
  26.             ) where TModel : class
  27.         {
  28.             return RenderTextBoxFor(html, model, property, null);
  29.         }
  31.         /// <summary>
  32.         /// Renders an mvc textbox control.
  33.         /// </summary>
  34.         /// <typeparam name="TModel">Accepts the type of model.</typeparam>
  35.         /// <typeparam name="TProperty">Accepts the type of property.</typeparam>
  36.         /// <param name="html">Extends the html object.</param>
  37.         /// <param name="model">Accepts the model.</param>
  38.         /// <param name="property">Accepts a lambda expression representing the property.</param>
  39.         /// <param name="htmlAttributes">Accepts an object containing html attributes.</param>
  40.         /// <returns>Returns a string text box control.</returns>
  41.         public static string RenderTextBoxFor<TModel, TProperty>
  42.             (
  43.                 this HtmlHelper html,
  44.                 TModel model,
  45.                 Expression<Func<TModel, TProperty>> property,
  46.                 object htmlAttributes
  47.             ) where TModel : class
  48.         {  
  49.             var propertyName = property.GetPropertyPath(model);
  50.             var propertyValue = property.GetValue(model);
  51.             var inputString = InputExtensions.TextBox(html, propertyName, propertyValue, htmlAttributes);
  52.             return inputString;
  53.         }
  55.         /// <summary>
  56.         /// Renders an mvc textbox control.
  57.         /// </summary>
  58.         /// <typeparam name="TModel">Accepts the type of model.</typeparam>
  59.         /// <typeparam name="TProperty">Accepts the type of property.</typeparam>
  60.         /// <param name="html">Extends the html object.</param>
  61.         /// <param name="model">Accepts the model.</param>
  62.         /// <param name="property">Accepts a lambda expression representing the property.</param>
  63.         /// <returns>Retuns a rendered validation control.</returns>
  64.         public static string RenderValidationMessageFor<TModel, TProperty>
  65.             (
  66.                 this HtmlHelper html,
  67.                 TModel model,
  68.                 Expression<Func<TModel, TProperty>> property
  69.             ) where TModel : class
  70.         {
  71.             var propertyName = property.GetPropertyPath(model);
  72.             var validationString = ValidationExtensions.ValidationMessage(html, propertyName);
  73.             return validationString;
  74.         }
  75.     }
  76. }

To finish this off, a helper class is required to generate the right property paths and values.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Globalization;
  4. using System.Linq.Expressions;
  5. using System.Reflection;
  6. using System.Text;
  8. namespace Demo.Helpers
  9. {
  10.     /// <summary>
  11.     /// Helper class to get property paths and values from a model.
  12.     /// </summary>
  13.     public static class StronglyTypedControlHelpers
  14.     {
  15.         /// <summary>
  16.         /// Gets the value of a model property.
  17.         /// </summary>
  18.         /// <typeparam name="TModel">Accepts the type of model.</typeparam>
  19.         /// <typeparam name="TProperty">Accepts the type of property.</typeparam>
  20.         /// <param name="propertyExpression">Accepts a lambda expression representing the property to get the value on.</param>
  21.         /// <param name="model">Accepts the model.</param>
  22.         /// <returns>A string property value.</returns>
  23.         public static string GetValue<TModel, TProperty>
  24.             (
  25.                 this Expression<Func<TModel, TProperty>> propertyExpression,
  26.                 TModel model
  27.             ) where TModel : class
  28.         {
  29.             if (model != default(TModel))
  30.             {
  31.                 return propertyExpression.Compile().Invoke(model).ToString();
  32.             }
  33.             return string.Empty;
  34.         }
  36.         /// <summary>
  37.         /// Gets the path of a property path including indexes on lists.
  38.         /// </summary>
  39.         /// <typeparam name="TModel">Accepts the type of model.</typeparam>
  40.         /// <typeparam name="TProperty">Accepts the type of property.</typeparam>
  41.         /// <param name="propertyExpression">Accepts a lambda expression representing the property to get the property path on.</param>
  42.         /// <param name="model">Accepts the model.</param>
  43.         /// <returns>A string property path.</returns>
  44.         public static string GetPropertyPath<TModel, TProperty>
  45.             (
  46.                 this Expression<Func<TModel, TProperty>> propertyExpression,
  47.                 TModel model
  48.             ) where TModel : class
  49.         {
  50.             List<string> pathItems = new List<string>();
  51.             BuildGraph(propertyExpression.Body, pathItems);
  52.             return BuildProperty(pathItems);
  53.         }
  55.         private static string BuildProperty(List<string> pathItems)
  56.         {
  57.             StringBuilder sb = new StringBuilder();
  58.             pathItems.Reverse();
  60.             foreach (var item in pathItems)
  61.             {
  62.                 if (sb.Length > 0)
  63.                 {
  64.                     sb.Append(".");
  65.                 }
  66.                 sb.Append(item);
  67.             }
  68.             return sb.ToString();
  69.         }
  71.         private static void BuildGraph(Expression expression, IList<string> pathItems)
  72.         {
  73.             if (expression is MemberExpression)
  74.             {
  75.                 BuildMemberExpressionProperty(expression, pathItems);
  76.             }
  78.             if (expression is MethodCallExpression)
  79.             {
  80.                 BuildMethodCallExpressionProperty(expression, pathItems);
  81.             }
  82.         }
  84.         private static void BuildMethodCallExpressionProperty(Expression expression, IList<string> pathItems)
  85.         {
  86.             AddMethodCallExpressionPropertyName(expression, pathItems);
  88.             if (MethodCallExpressionParent(expression) as ParameterExpression == null)
  89.             {
  90.                 BuildGraph(MethodCallExpressionParent(expression), pathItems);
  91.             }
  92.         }
  94.         private static Expression MethodCallExpressionParent(Expression expression)
  95.         {
  96.             return ((MemberExpression)(MemberExpression)((MethodCallExpression)expression).Object).Expression;
  97.         }
  99.         private static void BuildMemberExpressionProperty(Expression expression, IList<string> pathItems)
  100.         {
  101.             AddMemberExpressionPropertyName(expression, pathItems);
  103.             if (MemberExpressionParent(expression) as ParameterExpression == null)
  104.             {
  105.                 BuildGraph(MemberExpressionParent(expression), pathItems);
  106.             }
  107.         }
  109.         private static Expression MemberExpressionParent(Expression expression)
  110.         {
  111.             return ((MemberExpression)expression).Expression;
  112.         }
  114.         private static void AddMethodCallExpressionPropertyName(Expression expression, IList<string> pathItems)
  115.         {
  116.             pathItems.Add(MethodCallExpressionPropertyWithIndex(expression));
  117.         }
  119.         private static string MethodCallExpressionPropertyWithIndex(Expression expression)
  120.         {
  121.             return MethodCallExpressionProperty(expression) + GetIndex((MethodCallExpression)expression);
  122.         }
  124.         private static string MethodCallExpressionProperty(Expression expression)
  125.         {
  126.             return ((MemberExpression)((MethodCallExpression)expression).Object).Member.Name;
  127.         }
  129.         private static void AddMemberExpressionPropertyName(Expression expression, IList<string> pathItems)
  130.         {
  131.             pathItems.Add(((MemberExpression)expression).Member.Name);
  132.         }
  134.         private static string GetIndex(MethodCallExpression method)
  135.         {
  136.             MemberExpression args = (MemberExpression)method.Arguments[0];
  137.             object argValue = ((ConstantExpression)args.Expression).Value;
  138.             FieldInfo field = args.Member.DeclaringType.GetField(args.Member.Name);
  139.             int value = (int)field.GetValue(argValue);
  140.             return string.Format(CultureInfo.CurrentCulture, "[{0}]", value);
  141.         }
  142.     }
  143. }

The last point to add is this solution doesn't add the parameter prefix to the html so in your ActionResult methods you will need to set the prefix to an empty string for example:

public ActionResult Update([Bind(Prefix="")]Customer customer)

{

// Update Code

return View();

}

At this point you should have the two strongly typed helpers working nicely, even with complex domain graphs.

To finish them off, it would be worth having some Design By Contract checks on the methods to ensure valid parameters are passed in.

Although this is only a basic introduction to wrapping the controls, it is an especially useful technique when using the ASP.Net MVC controls on more complex models.

I hope this post is useful.

Kind Regards,

Sean McAlinden.

www.asp-net-mvc.com

2 Comments

  • Isn't this already implemented in ASP.NET MVC 2 Preview 2?

  • Hiya, I'm sure something similar is - for most places using mvc 1.0 at enterprise level, it's likely to be a while before they can upgrade.

    If anything, I just wanted to show a neat way of using expression trees to navigate the model as this technique can be used when creating custom helpers that won't form part of the mvc helper extensions.

Comments have been disabled for this content.