asp.net mvc convert \n new line to html breaks

Question

I have a textarea in mvc. When data is entered into that and I'm displaying it back to the user, how do I show the line breaks?

I display like this:

<%= Model.Description%>

Actually, the accepted answer here provides a much better implementation: stackoverflow.com/questions/4220381/… — Nullius
– Nullius, Commented Jul 12, 2013 at 7:06
Does this answer your question? Replace line break characters with <br /> in ASP.NET MVC Razor view — avs099
– avs099, Commented Sep 28, 2020 at 15:53

Codo · Accepted Answer · 2014-07-24 14:18:24Z

52

The following class implements a HtmlHelper that properly encodes the text:

public static class HtmlExtensions
{
    public static MvcHtmlString Nl2Br(this HtmlHelper htmlHelper, string text)
    {
        if (string.IsNullOrEmpty(text))
            return MvcHtmlString.Create(text);
        else
        {
            StringBuilder builder = new StringBuilder();
            string[] lines = text.Split('\n');
            for (int i = 0; i < lines.Length; i++)
            {
                if (i > 0)
                    builder.Append("<br/>\n");
                builder.Append(HttpUtility.HtmlEncode(lines[i]));
            }
            return MvcHtmlString.Create(builder.ToString());
        }
    }
}

It's easy to use in your views:

<%= Html.Nl2Br(Model.MultilineText) %>

Or with Razor:

@Html.Nl2Br(Model.MultilineText)

edited Jul 24, 2014 at 14:18

answered Feb 17, 2011 at 18:28

Codo

79.7k18 gold badges176 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Christopher Over a year ago

This HtmlExensions business is exactly what I was looking for. But, why not replace the whole body with return MvcHtmlString.Create(HttpUtility.HtmlEncode(text).Replace("\n", "<br />"));?

horgh Over a year ago

I'll let myself edit your answer to add text null reference check

Michiel Cornille Over a year ago

why replace \n with br if you can keep the \n and just add the br it will be a lot easier to read in view:source , so basically going for \n br or br \n over just br in the end result

Guido Zanon Over a year ago

This is the right way: stackoverflow.com/questions/4220381/…

rollsch Over a year ago

Please show all imports/includes as MvcHtmlString does not exist by default.

|

Community · Accepted Answer · 2017-05-23 12:00:21Z

30

For a slightly different (and, IMHO, better and safer) way of solving the problem, see this answer to a similar question.

Basically, instead of going through the trouble of converting all new line characters to <br> elements, it is as simple as applying the following CSS to the element where you are showing the inputted text:

white-space: pre-line

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Dec 4, 2013 at 14:08

mkataja

9902 gold badges10 silver badges29 bronze badges

2 Comments

Hugh Seagraves Over a year ago

I may be the only idiot who had this problem but to save the next person some time: if you do this, make sure you remove all extraneous line breaks inside your div.

Flappy Over a year ago

This won't work in all mail clients. Use solution of @Codo

David Glenn · Accepted Answer · 2011-02-17 18:10:16Z

11

You should always encode user entered text when displaying it back in the view to ensure that it is safe.

You could do as Cybernate suggested or could add it to a HtmlHelper extension method

public static string EncodedMultiLineText(this HtmlHelper helper, string text) {
  if (String.IsNullOrEmpty(text)) {
    return String.Empty;
  }
  return Regex.Replace(helper.Encode(text), Environment.NewLine, "<br/>")
}

So that it can be easily reused in you view

<%= Html.EncodedMultiLineText(Model.Description) %>

answered Feb 17, 2011 at 18:10

David Glenn

24.6k19 gold badges76 silver badges96 bronze badges

1 Comment

David Glenn Over a year ago

Apologies for encouraging encoding in my comment and then missing it out in my own code. Fail.

İbrahim Özbölük · Accepted Answer · 2013-04-12 08:11:55Z

7

For Asp.net mvc razor,i used Html.Encode for blocking xss attacks

@Html.Raw(Html.Encode(Model.Description).Replace(Environment.NewLine, "<br />"))

answered Apr 12, 2013 at 8:11

İbrahim Özbölük

3,22225 silver badges20 bronze badges

Comments

Chandu · Accepted Answer · 2011-02-17 17:15:49Z

6

Try something like this:

<%=
Regex.Replace(
              Html.Encode(Model.Description), 
              Environment.NewLine, 
              "<br/>", 
              RegexOptions.IgnoreCase||RegexOptions.Multiline
             )
%>

answered Feb 17, 2011 at 17:15

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

3 Comments

Shawn Mclean Over a year ago

why did this one get the most votes? Is it the most efficient or most secure?

patridge Over a year ago

It may have had some advantage being the oldest.

SLaks Over a year ago

You should not use Regex.Replace here.

Roland Schaer · Accepted Answer · 2011-05-10 20:08:24Z

5

The answer above that provides a static HTML helper extension provides an obsolete constructor:

return new MvcHtmlString(builder.ToString());

This line can be replaced by the following line of code:

return MvcHtmlString.Create((builder.ToString()));

answered May 10, 2011 at 20:08

Roland Schaer

1,6781 gold badge23 silver badges30 bronze badges

3 Comments

Roland Schaer Over a year ago

Found another issue with the example. It break on a null input. Can be fixed by inserting the following code on the first line of the method: if(text == null) return MvcHtmlString.Create(text);

Shawn Mclean Over a year ago

Thanks alot for this. I never knew it would break.

Roland Schaer Over a year ago

Thanks for up vote. I can now add comments instead having to post these silly fragments as answers.

Community · Accepted Answer · 2017-05-23 11:46:30Z

4

I think this answer solves the problems in a nice way, just using css: style="white-space: pre-line" check also: CSS white space property.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Nov 6, 2014 at 15:05

Raúl Otaño

4,7803 gold badges38 silver badges66 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:30Z

1

Maybe it's the answer: How do you handle line breaks in HTML Encoded MVC view?

or

you can try:

Model.Description.Replace(Environment.NewLine, "<br/>");

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 17, 2011 at 17:11

alexl

6,8083 gold badges26 silver badges29 bronze badges

1 Comment

David Glenn Over a year ago

It's very dangerous to output user entered text that hasn't been encoded. Encoding should be encouraged even though it wasn't used in the original question.

Alvis · Accepted Answer · 2012-02-13 17:25:38Z

1

I like using HtmlExtensions, Environment.NewLine and Regex, which were in different answers, so I kinda put the above answers into a single method.

public static MvcHtmlString MultiLineText(this HtmlHelper htmlHelper, string text) {
 if (string.IsNullOrEmpty(text)) {
     return MvcHtmlString.Create(string.Empty);
 }
 return MvcHtmlString.Create(Regex.Replace(HttpUtility.HtmlEncode(text), Environment.NewLine, "<br/>"));
}

Use

<%= Html.MultiLineText(Model.MultilineText) %>

Or

@Html.MultiLineText(Model.MultilineText)

edited Feb 13, 2012 at 17:25

answered Feb 13, 2012 at 17:20

Alvis

3,8335 gold badges40 silver badges42 bronze badges

Comments

Hemant Tank · Accepted Answer · 2011-10-10 12:50:08Z

0

This works for me -

<%= HttpUtility.HtmlDecode(Html.ActionLink("AOT <br/> Claim #", "actionName" ))%>

answered Oct 10, 2011 at 12:50

Hemant Tank

1,7444 gold badges29 silver badges58 bronze badges

Comments

Nick Spiers · Accepted Answer · 2011-02-17 17:13:46Z

-1

It doesn't look like you're trying to HTML Encode so a regular replace should work fine.

<%= Model.Description.Replace(Environment.NewLine, "<br />")%>

answered Feb 17, 2011 at 17:13

Nick Spiers

2,3542 gold badges19 silver badges31 bronze badges

2 Comments

David Glenn Over a year ago

It's very dangerous to output user entered text that hasn't been encoded. Encoding should be encouraged even though it wasn't used in the original question.

Nick Spiers Over a year ago

You're right for the most part. I was under the assumption this wasn't an issue as OP wasn't encoding to begin with. OP never specified if it was an admin panel or if it was anonymous user input. If it's some sort of CMS system with only administrator access (probably a minority case), you wouldn't want to encode it.

Collectives™ on Stack Overflow

asp.net mvc convert \n new line to html breaks

11 Answers 11

6 Comments

2 Comments

1 Comment

Comments

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

6 Comments

2 Comments

1 Comment

Comments

3 Comments

3 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related