Strongly Typed Helpers in ASP.NET MVC 2

Posted by: Malcolm Sheridan , on 6/16/2010, in Category ASP.NET MVC
Views: 28283
Abstract: The following article demonstrates how to use the new strongly typed helpers in ASP.NET MVC 2.
ASP.NET MVC 2 has made some big leaps and bounds since it burst onto the scene recently. A nice addition to the framework is strongly typed helpers. These provide two keys features:
- Allow for intellisense support in the view
- Allow you to use lambda expressions
 
Being able to use a lambda expression against the model being passed into the view is incredibly compelling. Out of the box there are a number of strongly typed helpers such as:
 

 

These helper methods allow you to pass in a lambda expression, so if you have a property called GivenName, you could do this:
 
<%:Html.TextBoxFor(model =""> model.GivenName) %>
 
In ASP.NET MVC 1, you had to do this:
 
<%= Html.TextBox("GivenName")%>
 
By passing in a string representation, you're opening yourself up to a potential problem. By using a string, you can misspell the property. You will still be able to compile your code, but you'll get a runtime error whilst debugging. By using strongly typed helpers, the problem vanishes.
 
To see this in action, I'm going to create a small ASP.NET MVC 2 website. If you haven't got Microsoft Visual Studio 2010, you can download the Express edition here. I've created a Person class to hold some data. This way you'll see the strongly typed helpers in action when you render an Edit view. Here's the Person class:
 
C#
 
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public DateTime DOB { get; set; }
    public bool Married { get; set; }
}
 
 
Next I've created an action in my controller that creates a new Person object and passes that to the view. To see the new strongly typed helpers, you need to render an Edit view. Here's the action code:
 
C#
 
public ActionResult Index()
{
      var person = new Person
         {
             Name = "Malcolm",
             Age = 30,
             DOB = new DateTime(2000, 1, 17),
             Married = true
         };
       return View(person);
}
 
VB.NET
 
Public Function Index() As ActionResult
      Dim person = New Person With {.Name = "Malcolm", .Age = 30, .DOB = New DateTime(2000, 1, 17), .Married = True}
         Return View(person)
End Function
 
The next step is to create the View. You'll need to create an Edit View, and have it pass in the Person object. This way your view will be strongly typed and you can use lambda expressions in your view:
 
AddView
 
And here's the code for your view:
<% using(Html.BeginForm()){%>
<%:Html.ValidationSummary(true)%>
 
 <fieldset>
    <legend>Fields</legend>
 
    <div class="editor-label">
      <%:Html.LabelFor(model =""> model.Name) %>
    </div>
    <div class="editor-field">
      <%:Html.TextBoxFor(model =""> model.Name) %>
      <%= Html.TextBox("Name")%>
      <%:Html.ValidationMessageFor(model =""> model.Name) %>
    </div>
 
    <div class="editor-label">
      <%:Html.LabelFor(model =""> model.Age) %>
    </div>
    <div class="editor-field">
      <%:Html.TextBoxFor(model =""> model.Age) %>
      <%:Html.ValidationMessageFor(model =""> model.Age) %>
    </div>
 
    <div class="editor-label">
      <%:Html.LabelFor(model =""> model.DOB) %>
    </div>
    <div class="editor-field">
      <%:Html.TextBoxFor(model =""> model.DOB, String.Format("{0:g}", Model.DOB)) %>
      <%:Html.ValidationMessageFor(model =""> model.DOB) %>
    </div>
 
    <div class="editor-label">
      <%:Html.LabelFor(model =""> model.Married) %>
    </div>
    <div class="editor-field">
      <%:Html.CheckBoxFor(model =""> model.Married) %>
      <%:Html.ValidationMessageFor(model =""> model.Married) %>
    </div>
 
    <p>
      <input type="submit" value="Save" />
    </p>
 </fieldset>
 
 <%}%>
 
You'll notice in the code above the use of the strongly typed helpers. All of them use lambda expressions, so there are no more syntax errors now. Just having the ability to use a lambda expression this way is incredibly useful. The Married property is a boolean type, and that was rendered as a check box, meaning the property type has been correctly matched to its HTML element:
 
<%:Html.CheckBoxFor(model =""> model.Married) %>
 
This is one new feature of ASP.NET MVC 2 that I really like. I'll be addressing new features in the framework in upcoming posts.
 
The entire source code of this article can be downloaded over here
Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel