Html inside label using Html helper - asp.net-mvc-3

Question

How can I add inline html elements inside a label with Html.Label?

Answer 1

Looks like a good scenario for a custom helper:
public static class LabelExtensions
{
public static MvcHtmlString LabelFor<TModel, TProperty>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TProperty>> ex,
Func<object, HelperResult> template
)
{
var htmlFieldName = ExpressionHelper.GetExpressionText(ex);
var for = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(htmlFieldName);
var label = new TagBuilder("label");
label.Attributes["for"] = TagBuilder.CreateSanitizedId(for);
label.InnerHtml = template(null).ToHtmlString();
return MvcHtmlString.Create(label.ToString());
}
}
and then:
#Html.LabelFor(
x => x.Name,
#<span>Hello World</span>
)
UPDATE:
To achieve what you asked in the comments section you may try the following:
public static class HtmlHelperExtensions
{
public static MvcHtmlString LabelFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex, Func<object, HelperResult> template)
{
var htmlFieldName = ExpressionHelper.GetExpressionText(ex);
var propertyName = htmlFieldName.Split('.').Last();
var label = new TagBuilder("label");
label.Attributes["for"] = TagBuilder.CreateSanitizedId(htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(htmlFieldName));
label.InnerHtml = string.Format(
"{0} {1}",
propertyName,
template(null).ToHtmlString()
);
return MvcHtmlString.Create(label.ToString());
}
}
and then:
#Html.LabelFor(
x => x.Name,
#<em>mandatory</em>
)

Answer 2

Rather then writing an extension method you could use the following razor code:
#{ MvcHtmlString label = Html.LabelFor(m => m.ModelProperty, "<span class='cssClass'>Label HTML</span>", new { #class = "clabel"}); }
#Html.Raw(HttpUtility.HtmlDecode(label.ToString()))
It's not as clean but if you need something quick it works.

Answer 3

I borrowed upon Darin's answer, and added to it. I added in capability for Html before the label text and html after the label text. I also added a bunch of overload methods and comments.
I also got some information from this post: How can I override the #Html.LabelFor template?
Hope if helps folks.
namespace System.Web.Mvc.Html
{
public static class LabelExtensions
{
/// <summary>Creates a Label with custom Html before the label text. Only starting Html is provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Func<object, HelperResult> startHtml)
{
return LabelFor(html, expression, startHtml, null, new RouteValueDictionary("new {}"));
}
/// <summary>Creates a Label with custom Html before the label text. Starting Html and a single Html attribute is provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <param name="htmlAttributes">A single Html attribute to include.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Func<object, HelperResult> startHtml, object htmlAttributes)
{
return LabelFor(html, expression, startHtml, null, new RouteValueDictionary(htmlAttributes));
}
/// <summary>Creates a Label with custom Html before the label text. Starting Html and a collection of Html attributes are provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <param name="htmlAttributes">A collection of Html attributes to include.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, Func<object, HelperResult> startHtml, IDictionary<string, object> htmlAttributes)
{
return LabelFor(html, expression, startHtml, null, htmlAttributes);
}
/// <summary>Creates a Label with custom Html before and after the label text. Starting Html and ending Html are provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <param name="endHtml">Html to follow the label text.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Func<object, HelperResult> startHtml, Func<object, HelperResult> endHtml)
{
return LabelFor(html, expression, startHtml, endHtml, new RouteValueDictionary("new {}"));
}
/// <summary>Creates a Label with custom Html before and after the label text. Starting Html, ending Html, and a single Html attribute are provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <param name="endHtml">Html to follow the label text.</param>
/// <param name="htmlAttributes">A single Html attribute to include.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Func<object, HelperResult> startHtml, Func<object, HelperResult> endHtml, object htmlAttributes)
{
return LabelFor(html, expression, startHtml, endHtml, new RouteValueDictionary(htmlAttributes));
}
/// <summary>Creates a Label with custom Html before and after the label text. Starting Html, ending Html, and a collection of Html attributes are provided.</summary>
/// <param name="startHtml">Html to preempt the label text.</param>
/// <param name="endHtml">Html to follow the label text.</param>
/// <param name="htmlAttributes">A collection of Html attributes to include.</param>
/// <returns>MVC Html for the Label</returns>
public static MvcHtmlString LabelFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression, Func<object, HelperResult> startHtml, Func<object, HelperResult> endHtml, IDictionary<string, object> htmlAttributes)
{
ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
//Use the DisplayName or PropertyName for the metadata if available. Otherwise default to the htmlFieldName provided by the user.
string labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last();
if (String.IsNullOrEmpty(labelText))
{
return MvcHtmlString.Empty;
}
//Create the new label.
TagBuilder tag = new TagBuilder("label");
//Add the specified Html attributes
tag.MergeAttributes(htmlAttributes);
//Specify what property the label is tied to.
tag.Attributes.Add("for", html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName));
//Run through the various iterations of null starting or ending Html text.
if (startHtml == null && endHtml == null) tag.InnerHtml = labelText;
else if (startHtml != null && endHtml == null) tag.InnerHtml = string.Format("{0}{1}", startHtml(null).ToHtmlString(), labelText);
else if (startHtml == null && endHtml != null) tag.InnerHtml = string.Format("{0}{1}", labelText, endHtml(null).ToHtmlString());
else tag.InnerHtml = string.Format("{0}{1}{2}", startHtml(null).ToHtmlString(), labelText, endHtml(null).ToHtmlString());
return MvcHtmlString.Create(tag.ToString());
}
}
}

Answer 4

You will have to write your own helper. The built-in Html.Label helper automatically HTML-encodes the labelText parameter.

Answer 5

In order to meet the SOC and Solid principles, the code can be enhanced to the following code:
public static MvcHtmlString LabelFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex,bool applyStylingHtml)
{
var metadata = ModelMetadata.FromLambdaExpression(ex, htmlHelper.ViewData);
string displayName = metadata.DisplayName;
string description= metadata.Description;
if (String.IsNullOrEmpty(displayName))
{
return MvcHtmlString.Empty;
}
var sb = new StringBuilder();
sb.Append(displayName);
var htmlFieldName = ExpressionHelper.GetExpressionText(ex);
var propertyName = htmlFieldName.Split('.').Last();
var tag = new TagBuilder("label");
tag.Attributes["for"] = TagBuilder.CreateSanitizedId(htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(htmlFieldName));
tag.SetInnerText(sb.ToString());
//Func<object, HelperResult> template='<em>';
HtmlString nestedHtml=new HtmlString("<em>"+description+"</em>");
tag.InnerHtml = string.Format(
"{0} {1}",
tag.InnerHtml,
nestedHtml
);
return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
}
Then use it in the Razor code:
#Html.LabelFor(m => m.Phone,true)
To make everything more dynamic, description attribute should be applied on the Model class then HtmlHelper will grab the Description as a text to be applied "em" Html tag:
[Display(Name ="Phone",Description = "should be included extention")]
public string Phone { get; set; }
Just a heads up that you need to import the your customized HtmlHelper namespace to the view by adding:
#using yourNamespace