ASP.NET MVC: How do I display multiline text?

Question

View Model:

public class Note
{
    [DataType(DataType.MultilineText)]
    public string Text { get; set; }
}

Default editor template renders a <textarea> element with the newlines preserved.

The default display template renders the text as a single string with the newlines removed.

I tried this, but it doesn't work:

~/Views/Shared/EditorTemplates/MultilineText.cshtml

@model string

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

I can do something silly like @Html.Raw(Model.Replace("e", "<br />")) and it will work but of course I only want to replace the newline characters the <br /> element! I also tried using @"\n" and that didn't work either.

Any ideas?

Thanks!

Of course @"\n" didn't work you need to use "\n" the @ forces the string to be parsed as a literal. — Daniel Little
– Daniel Little, Commented Sep 23, 2011 at 0:23

Dave Markle · Accepted Answer · 2014-02-24 20:49:40Z

28

The answer is that you'd do none of this. That's the job of your stylesheet. Basically, render the content any way you want, into a <p>, for example, and use CSS to control how white space is preserved. For example:

(in your style tag, or in your CSS)

p.poem {
   white-space:pre;
}

(in your HTML markup)

<p class="poem">
    There is a place where the sidewalk ends
    And before the street begins,
    And there the grass grows soft and white,
    And there the sun burns crimson bright,
    And there the moon-bird rests from his flight
    To cool in the peppermint wind.
</p>

edited Feb 24, 2014 at 20:49

answered Sep 23, 2011 at 0:37

Dave Markle

98.3k20 gold badges152 silver badges172 bronze badges

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

6 Comments

Jeff Camera Over a year ago

I didn't even mention the controller in my post. I'm not sure I understand what you're talking about. I use attributes in my view models to provide metadata about primitive type properties (multilinetext, currency, etc). The metadata is used, as show in my example, by custom razor templates.

Dave Markle Over a year ago

Edited accordingly. Instead of putting <pre> or actual style in your ViewModel, render out a class in your view describing what the object being rendered is, not how it is to be formatted.

Jeff Camera Over a year ago

Do you really think it's better to have a separate class for say, currency, rather than using decimal and using an attribute to specify that the decimal property is currency? In my example the attribute is specifying that the string is a note. The cshtml template describes how to format such a property. I'm not trying to argue but am actually curious. Thanks!

Dave Markle Over a year ago

Indeed -- where do you draw the line? I can see being tempted to try something with CSS and currency formatting, but currency is different because you're changing the textual content based on culture. In your case, I'd call the CSS class "note" and that would give you the flexibility to change the color or font of notes without changing the markup. You'd also be able to control notes' behaviors easily with jQuery should you want to. Also, white-space in CSS has a lot more options in it than just straight "pre". You might want to actually use "pre-wrap" or one of those options instead.

x-6-2-5 Over a year ago

I think this is better than using @Html.Row.

|

scartag · Accepted Answer · 2011-09-23 00:32:16Z

22

You could try this:

@Html.Raw("<pre>"+ Html.Encode(Model) + "</pre>");

This will preserve your content and show it as-is.

edited Sep 23, 2011 at 0:32

answered Sep 23, 2011 at 0:16

scartag

17.7k3 gold badges52 silver badges53 bronze badges

4 Comments

Daniel Little Over a year ago

Also Remember to html encode the model value with Html.Encode(string)

Philipp Munin Over a year ago

@stringValue - does HTML encoding already (Tested in ASP.NET MVC 4). What's the point to do it additionally?

scartag Over a year ago

@PhilippMunin Maybe if you checked the date of the answer it would have been obvious that asp.net mvc 4 wasn't available at the time :)

Bomberlt Over a year ago

Also if you want to preserve your spaces you can add .Replace(" ", " "). Like this @Html.Raw("<pre>"+ Html.Encode(Model).Replace(" ", " ") + "</pre>");

Chtioui Malek · Accepted Answer · 2013-06-24 10:28:03Z

11

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

just add this style property to render multiline texts :

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

then

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

newlines will render like br elements.

answered Jun 24, 2013 at 10:28

Chtioui Malek

11.5k1 gold badge76 silver badges70 bronze badges

Comments

Valamas · Accepted Answer · 2011-09-23 00:11:48Z

5

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

answered Sep 23, 2011 at 0:11

Valamas

24.8k25 gold badges111 silver badges181 bronze badges

Comments

Philipp Munin · Accepted Answer · 2013-12-03 23:57:30Z

3

<pre>@myMultiLineString</pre>

OR

<span style="white-space:pre">@myMultiLineString</span>

No need to do Html.Encode, as it's done by default

edited Dec 3, 2013 at 23:57

answered Dec 3, 2013 at 23:49

Philipp Munin

5,9337 gold badges43 silver badges64 bronze badges

Comments

Roman Marusyk · Accepted Answer · 2016-08-02 18:01:49Z

1

 [DataType(DataType.MultilineText)]
public your_property {set; get;}

and it will work if your using EditorFor()

edited Aug 2, 2016 at 18:01

Roman Marusyk

24.8k27 gold badges83 silver badges127 bronze badges

answered Aug 2, 2016 at 17:39

Ahmad Tarabeshi

1739 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC: How do I display multiline text?

6 Answers 6

6 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related