How to make Html.DisplayFor display line breaks?

Question

Embarrassingly newbie question:

I have a string field in my model that contains line breaks.

@Html.DisplayFor(x => x.MultiLineText)

does not display the line breaks.

Obviously I could do some fiddling in the model and create another field that replaces \n with  , but that seems kludgy. What's the textbook way to make this work?

Does this answer your question? [Replace line break characters with
in ASP.NET MVC Razor view](https://stackoverflow.com/questions/4220381/replace-line-break-characters-with-br-in-asp-net-mvc-razor-view) — avs099, Sep 28 '20 at 15:54

score 78 · Accepted Answer · answered Apr 24 '12 at 01:40

78

A HtmlHelper extension method to display string values with line breaks:

public static MvcHtmlString DisplayWithBreaksFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
    var model = html.Encode(metadata.Model).Replace("\r\n", "<br />\r\n");

    if (String.IsNullOrEmpty(model))
        return MvcHtmlString.Empty;

    return MvcHtmlString.Create(model);
}

And then you can use the following syntax:

@Html.DisplayWithBreaksFor(m => m.MultiLineField)

answered Apr 24 '12 at 01:40

cwills

2,048
21
17

1

Where can I define it in MVC 4 ? – Ofiris Jun 04 '13 at 06:41
Good, but instead of returning `MvcHtmlString.Empty` when the value is null or empty I would invoke the standard `HtmlHelper.DisplayFor` method so that any NullDisplayText decoration can be used. – Christopher King Sep 25 '13 at 13:16
5

For other newbs who might not know, define cwills' DisplayWithBreaksFor() method inside "public static class HtmlExtensions { }" – Steve A Jun 03 '14 at 13:43
Using a `DisplayTemplate` instead of introducing a `HtmlHelper`-method has the advantage, that it trickles down to properties and views that are not explicitly defined (see [my answer](https://stackoverflow.com/a/59249806)). – Yahoo Serious Aug 19 '20 at 13:50

Chtioui Malek · Answer 2 · 2020-11-23T22:38:25.803

59

i recommend formatting the output with css instead of using cpu consuming server side strings manipulation like .replace,

just add this style property to render multiline texts :

.multiline
{
   white-space: pre-wrap;
}

then

<div class="multiline">
  my
  multiline
  text
</div>

newlines will render like br elements, test it here https://snippet.run/xaf4

edited Nov 23 '20 at 22:38

answered Jun 24 '13 at 10:34

Chtioui Malek

10,574
1
68
69

6

To improve on this so that `Html.DisplayFor` can still be used apply the `[System.ComponentModel.DataAnnotations.DataType(System.ComponentModel.DataAnnotations.DataType.MultilineText)]` attribute to the `MultiLineText` property on the model and create a DisplayTemplate with the contents `@model string @Model` – Mike Sep 26 '13 at 13:27
1

It probably doesn't matter any more, but this doesn't work on IE9 and below – John May 01 '15 at 19:08

score 46 · Answer 3 · answered Jan 27 '12 at 08:49

46

In your view, you can try something like

@Html.Raw(Html.Encode(Model.MultiLineText).Replace("\n", "<br />"))

answered Jan 27 '12 at 08:49

slapthelownote

4,209
1
22
27

4

should be at least `.Replace("\r\n", ...)`. Also, the [solution from cwills](http://stackoverflow.com/a/10290684/1343917) below is much better, in my opinion. – Dmitry Gonchar Dec 31 '13 at 14:37
1

No \n is really enough : remaining \r will not harm since they are juste whitespace for html. While matching on \r\n will miss unix style newline and will not handle them. – Frédéric Mar 18 '14 at 14:45
Not sure if it was because I'm using `ViewData` instead of a regular property, but in ASP.NET Core Razor, I had to use `@Html.Raw(((string)ViewData["MyText"]).Replace("\n", "
"))` – Neo Jan 24 '19 at 02:50
I used a slightly different approach, data stored in my case was SQL text: `@Html.Raw(field.Replace("\n", "
"))` – eoszak Sep 02 '21 at 22:12

score 4 · Answer 4 · answered Jan 27 '12 at 10:17

The display template is probably the best solution but there is another easy option of using an html helper if you know you're just displaying a string, e.g.:

namespace Shaul.Web.Helpers
{
    public static class HtmlHelpers
    {
        public static IHtmlString ReplaceBreaks(this HtmlHelper helper, string str)
        {
            return MvcHtmlString.Create(str.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.None).Aggregate((a, b) => a + "<br />" + b));
        }
    }
}

And then you'd use it like:

@using Shaul.Web.Helpers

@Html.ReplaceBreaks(Model.MultiLineText)

score 3 · Answer 5 · edited May 23 '17 at 12:34

3

You create a display template for your data. Here's a post detailing how to do it. How do I create a MVC Razor template for DisplayFor()

In that template you do the actual translating of newlines into
and whatever other work needs to be done for presentation.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 27 '12 at 08:46

linkerro

5,174
3
23
28

+1 for the template idea but answer credit goes to the actual implementation given by @slapthelownote – Shaul Behr Jan 27 '12 at 10:06

Yahoo Serious · Answer 6 · 2021-07-30T09:02:51.347

Inspired by DisplayTemplates for common DataTypes, I override (introduce?) a default DisplayTemplate for DataType.MultilineText, /Views/Shared/DisplayTemplates/MultilineText.cshtml containing just this line:

<span style="white-space: pre-wrap">@this.Model</span>

Of course you could also introduce a css-class, or replace newlines inside the view, if you prefer that.
(I guess this template is automatically resolved, because I had no need for UIHint or any other reference or registration.)

Using the DisplayTemplate instead of introducing a HtmlHelper-method has the advantage, that it trickles down to properties and views that are not explicitly defined (e.g. DisplayFor(MyClassWithMultilineProperties) will now also correctly display MyClassWithMultilineProperties.MultilineText, if only the property was annotated with [DataType(DataType.MultilineText)].

The file name must be `MultilineText.cshtml` – Magnetron Jul 27 '21 at 17:01 — Magnetron, Jul 27 '21 at 17:01

score 2 · Answer 7 · answered Jan 27 '12 at 08:45

2

Try using
@Html.Raw("" + Html.LabelFor(x => x.Name) + "")

answered Jan 27 '12 at 08:45

Michal B.

5,615
6
40
66

score 1 · Answer 8 · answered Sep 22 '15 at 15:22

Here's another extension method option.

    public static IHtmlString DisplayFormattedFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, string>> expression)
    {
        string value = Convert.ToString(ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).Model);

        if (string.IsNullOrWhiteSpace(value))
        {
            return MvcHtmlString.Empty;
        }

        value = string.Join("<br/>", value.Split(new[] { Environment.NewLine }, StringSplitOptions.None).Select(HttpUtility.HtmlEncode));

        return new HtmlString(value);
    }

Michael Dudgeon · Answer 9 · 2022-05-05T14:21:25.037

I had this problem with ASP.NET Core 6. The previous answers here did not work with a linq expression in Html.DisplayFor. Instead I was constantly getting the   tag escaped out in the output HTML. Trying HtmlString helper methods suggestions did not work.

The following solution was discovered through trial and error. The InfoString had CRLF replaced with the   tags as shown in the property code.

Works

@Html.Raw(@Convert.ToString(item.InfoString))

Did not work

@Html.DisplayFor(modelItem => item.InfoString)

FYI - my Info String property:

public string InfoString
{
   get { return MyInfo.Replace(Environment.NewLine,"<br />"); }
}

How to make Html.DisplayFor display line breaks?

9 Answers9

Linked