Strongly Typed <label> elements in ASP.NET MVC 2

19 January 2010 - 11:23 PM / by Dominic Pettifer. 2 Comments for Strongly Typed <label> elements in ASP.NET MVC 2.

Cool C# Snippets - Generate strongly typed <label> elements in a way that is (IMHO) better than the default method built into ASP.NET MVC 2.

Strongly Typed Html Helpers

In ASP.NET MVC version 2.0 they introduced support for strongly typed <input /> controls. Whereas before you'd have to type something along the lines of:

<%= Html.TextBox("EmailAddress", Model.EmailAddress) %>

The problem being that you could mistype "EmailAddress" and the error wouldn't get picked up until runtime, or you might rename the property "EmailAddress" on your ViewModel, and refactoring tools built into Visual Studio wouldn't pick up the "EmailAddress" string used in the TextBox() method. Now in ASP.NET MVC 2 there is support for strongly typed HTML Helper methods, where any errors can be picked up at compile time:

<%= Html.TextBoxFor(m => m.EmailAddress) %>

Html.LabelFor()

In MVC 2 they also added support for strongly typed <label> elements as well (sort of):

<%= Html.LabelFor(m => m.EmailAddress) %>

...which outputs the following...

<label for="EmailAddress">EmailAddress</label>

The benefits of this method being that it will reliably generate the 'for' attribute that points to the <input /> element's ID its paired with, eg.

<label for=”EmailAddress”>EmailAddress</label>
<input type=”text” id=”EmailAddress” name=”EmailAddress” />

However, Html.LabelFor has no overload that allows you to specify the actual <label> element text, it defaults to the property name (EmailAddress) which looks ugly. You can set the label text via DataAnnotations on the ViewModel class itself eg.

public class AccountView
{
    //-- snip (other properties) --//
    
    [Required]
    [DisplayName(“Your e-mail address:”)]
    public string EmailAddress { get; set; }
}

...and you'll get:

<label for="EmailAddress">Your e-mail address:</label>

Not In My ViewModel Please!

The problem is some people, like me, would consider the <label> text to be a View/Presentation concern specified in the .aspx views, and that it shouldn’t go inside your Model classes. You could just type <label for="EmailAddress"> directly, but then you lose the benefit of strong typing the Input's ID. So I wrote an Html Extension method that generates the control Ids based on the ViewModel Property:

using System;
using System.Linq.Expressions;
using System.Web.Mvc;

namespace MvcLibrary.Extensions
{
    public static class HtmlExtensions
    {
        public static MvcHtmlString FieldIdFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
        {
            string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
            string inputFieldId = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName);
            return MvcHtmlString.Create(inputFieldId);
        }
    }
}

Which you can use in your Views like this:

<label for="<%= Html.FieldIdFor(m => m.EmailAddress) %>">Your e-mail address:</label>
<%= Html.TextBoxFor(m => m.EmailAddress) %>

I suppose one could just write an overload for the LabelFor() method that takes a string parameter for the label text. However, just generating the input ID has other benefits. For one you’re more in control of the markup if you want to add attributes (class, id etc.) to the <label> element. Secondly the Html.FieldIdFor() method can be used elsewhere you need the dynamically generated control ID, such as in calling JavaScript functions that make the ID of input controls.

<script> $.CoolJQueryFunction('<%= Html.FieldIdFor(m => m.EmailAddress) %>'); </script>

Strongly Typed <label> elements in ASP.NET MVC 2

Strongly Typed Html Helpers

Html.LabelFor()

Not In My ViewModel Please!

2 Comments on "<label> Elements in ASP.NET MVC"

RE: <label> Elements in ASP.NET MVC

RE: RE: <label> Elements in ASP.NET MVC

Good writing

RE: RE: <label> Elements in ASP.NET MVC

RE: RE: RE: <label> Elements in ASP.NET MVC

SEO Company India

Abercrombie Nederland

t shirt printing essex

love sms

canada goose jackets

RE: <label> Elements in ASP.NET MVC

christian louboutin replica

Leave a Comment

Random Image

Quick Poll

Latest Tweets