Question

I need to display short description like label and near it data associated with this description.
For editing data it looks like

<div class="field">
    @Html.LabelFor(m => m.CustomerTaxId)
    @Html.EditorFor(m => m.CustomerTaxId)
</div>

Now I want to do the same thing for readonly data. I’ve written next code

<div>
    @Html.LabelFor(m => m.TotalAmount)
    @Html.DisplayFor(m => m.TotalAmount)
</div>

It seems working but it breaks semantic meaning of label tag which must be used for input tags only.
Is there a way in MVC 3 to get something like

<div>
   <span class="label">Total amount</span>
   <span class="value">1500.00 $</span>
</div>

with minimal efforts (think it can be done with heavy template usage)

It seems like I can overwrite template for Html.DisplayFor how to deal with Html.LabelFor?

Answer 1

You can create custom html helper as below,

public static MvcHtmlString Span<TModel, TValue>(this HtmlHelper<TModel> html, 
         Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
  var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData, null);
  string spanInnerText = metadata.DisplayName ?? metadata.PropertyName;

  TagBuilder tag = new TagBuilder("span");
  tag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
  tag.SetInnerText(spanInnerText);

  return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
}

You could use in a view as,

@Html.Span(m => m.Name, new { @class = "label" })