ASP.NET MVC LabelFor Helper With HtmlAttributes
Introduction:
In ASP.NET MVC you have low-level control over your HTML. This simply means that you can write any html elements in your view as you wish. However for getting the advantage of Model Binding and Visual Studio Intellisense, ASP.NET MVC provides a shorter and tidier way to write html elements with the help of html helpers method. LabelFor helper is one of the html helper method used to render html label element. ASP.NET MVC 2 ships with just a single overload for LabelFor helper method. There is no such overload of LabelFor helper which accepts htmlAttributes parameter like other html helpers accept. This parameter is very important when you need to style html label with CSS class or when you need to add a tooltip message. Therefore in this article I will show you how easily you can creates your own LabelFor helper extension method which also accept htmlAttributes parameter.
Description:
Before I started to write some simple helper extension methods for LabelFor, it is worth to see the current helper method's signature for LabelFor helper method. Here it is,
LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
It only accept a single parameter expression. Here is the two new extension methods which accept another additional parameter htmlAttributes,
public static class NewLabelExtensions
{
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
return LabelFor(html, expression, new RouteValueDictionary(htmlAttributes));
}
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, IDictionary<string, object> htmlAttributes)
{
ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
string labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last();
if (String.IsNullOrEmpty(labelText))
{
return MvcHtmlString.Empty;
}
TagBuilder tag = new TagBuilder("label");
tag.MergeAttributes(htmlAttributes);
tag.Attributes.Add("for", html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName));
tag.SetInnerText(labelText);
return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
}
}
Note that there is nothing magic happening here. All the above code is same code used for LabelFor helper method with one parameter, except method signature and the code, tag.MergeAttributes(htmlAttributes). This code is necessary to embed html attributes in label element.
Now just add this new LabelFor helper method in your view with htmlAttributes parameter,
<%=Html.LabelFor(a => a.Name, new { @class="A",title="Enter Name"})%>You will find the following rendered html,
<label class="A" for="Name" title="Enter Name">Name</label>
Summary:
Html helpers method provides an easy and tidier way to write html elements, but some times you may need to create your own helper method to meet your requirement. So in this article I shows you how to create two simple html helper extension methods for LabelFor helper which also render html attributes in html label element. Hopefully you enjoy it much.