Insert line breaks in DisplayName attributes

Question

My ViewModel has a property that requires a label with two lines, but when I put <br /> in the DisplayName attribute, the HTML is printed on the page instead of being interpreted as a line break. Is there a way to get DisplayName to have a line break in it?

View:

  <tr> <td> @Html.LabelFor(m => m.GrossGallons) </td> <td> </td> </tr> 

ViewModel:

  [DisplayName("Gross Gallons <br /> (Max: 6,000)")] public decimal GrossGallons { get; set; } 

The result is trying to get:

 Gross Gallons (Max: 6,000) 

Answer 1

There is an easy way to do this: use \n instead of <br /> and use CSS to make it work.

Model:

 [DisplayName("Gross Gallons\n(Max: 6,000)")] public decimal GrossGallons { get; set; } 

CSS

 label { white-space: pre-wrap; } 

I would recommend making the CSS selector as specific as possible so as not to catch other labels (in case you use labels manually in another place where your source code may contain spaces). For example, in bootstrap, I would apply this to label.control-label .

You can also attach only a more specific style to this label and create only this class.

 @Html.LabelFor(m => m.GrossGallons, new { @class = "multiline-label" }) 

Answer 2

I can come up with several options.

1) You can use @ Html.Raw (). You can replace the line I entered with a link to the line.

 @Html.Raw("Gross Gallons <br /> (Max: 6,000)"); 

1a) If you need to set it in the DisplayName attribute, you can try using Html.Raw (), but access the value through reflection. (Note: I have not tried this, so I don’t know if this is possible)

2) You can use the css style to make the string wrap around where you want.

3) You can create your own extension method or custom attribute to do this for you.

Answer 3

you can use @ Html.Raw (), I think this is the easiest way.

Answer 4

This is not very good, but you can use EditorTemplates and create _layout.cshtml that uses all your templates. Then use this to output / display the DisplayName :

 <div class="form-group"> <label for="@ViewData.ModelMetadata.PropertyName"> @Html.Raw(ViewData.ModelMetadata.GetDisplayName()) </label> @RenderBody() @Html.ValidationMessageFor(x => x) </div> 

A major drawback of this is the creation of EditorTemplates for each of your types, such as the string.cshtml template:

 @model string @{ Layout = "_Layout.cshtml"; } @Html.TextBoxFor(x => x, new { @class="form-control" }) 

A little off topic, but this route allows me to encapsulate the wrapping of HTML around the elements of my form, so my forms in the views look very simple:

 <fieldset> @Html.EditorFor(x => x.Email) @Html.EditorFor(x => x.Address1) @Html.EditorFor(x => x.Address2) @Html.EditorFor(x => x.City) </fieldset> 

Answer 5

If you use LabelFor() , another “possible” solution is to implement your own, using the original source as a guide.

Replace

 tag.SetInnerText(resolvedLabelText); 

from

 tag.InnerHtml = resolvedLabelText;