Render a string as HTML in C# Razor

Question

I am attempting to render an address from my model. The string contains line breaks that I am replacing with a break tag. Although, it is rendering on the page as a string instead as HTML. How can I force my string to render as HTML instead?

Attempt:

<span id="addressLine">
    @Model.MyData.Address.Replace("\r\n", "<br />");
</span>

Result on page:

Address Top<br />Street Name<br />City<br />PostCode

Should be displayed as:

Address Top
Street Name
City
PostCode

@DanielA.White - Sorry mate, first day using C#. So I should split it and save it as different variables and render them on different lines? — Fizzix
– Fizzix, Commented Dec 4, 2014 at 1:32
Use @Html.Raw(Model.MyData.Address.Replace("\r\n", "<br />")) — dom
– dom, Commented Dec 4, 2014 at 1:36

dom · Accepted Answer · 2014-12-04 01:38:37Z

100

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

answered Dec 4, 2014 at 1:38

dom

6,8424 gold badges32 silver badges35 bronze badges

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

3 Comments

John Koerner Over a year ago

Be careful using this, as if the user's address is 1234 <script>alert('a')</script> lane, you will have xss problems

Fizzix Over a year ago

@JohnKoerner - Don't worry, we clean out everything and format the address before saving it in the database. Thanks for the heads up though.

Kind Contributor Over a year ago

This is no longer the best answer. A couple of answers below use a CSS/HTML strategy that avoids the use of Html.Raw. The problem with line-breaks is a CSS/HTML one, and modern browsers can be controlled (with CSS/HTML) to behave how you intend.

cnom · Accepted Answer · 2020-12-05 04:32:56Z

34

Use

@(new HtmlString(@Model.MyData.Address))

It is safer, so that you avoid potential xss attacks

See this post: Rendering HTML as HTML in Razor

edited Dec 5, 2020 at 4:32

answered Aug 7, 2015 at 13:16

cnom

3,3015 gold badges35 silver badges62 bronze badges

1 Comment

Kelvin Over a year ago

How does it avoid potential xss attacks? It is just a wrapper around a string to indicate that when used on a view that the content shouldn't be encoded, so any untrusted content will be displayed the same as Html.Raw.

score 10 · Accepted Answer · 2014-12-04 01:52:03Z

10

Use css to preserve the white space

Html

<div id="addressLine">
  @Model.MyData.Address;
</div>

Css

#addressLine {
  white-space: pre;
}

edited Dec 4, 2014 at 1:52

answered Dec 4, 2014 at 1:38

user3559349

2 Comments

Kind Contributor Over a year ago

This answer is also better because you no longer need to use Html.Raw.

Michael Over a year ago

This answer is only about css, not about html encoding or rendering html as is with razor. Which happens serverside, so little to do with css in this case.

Indrit Vaka · Accepted Answer · 2021-11-21 20:32:48Z

10

To render HTML on blazor you can use MarkupString => @((MarkupString)here your string) this will render the string as HTML

<span id="addressLine">
    @((MarkupString)@Model.MyData.Address.Replace("\r\n", "<br />"));
</span>

answered Nov 21, 2021 at 20:32

Indrit Vaka

3242 silver badges22 bronze badges

Comments

Thiago · Accepted Answer · 2014-12-04 01:48:54Z

1

You should use CSS whitespace property instead of it. For more details, access http://www.w3schools.com/cssref/pr_text_white-space.asp

It also helps you avoiding Cross-site scripting (http://en.wikipedia.org/wiki/Cross-site_scripting)

answered Dec 4, 2014 at 1:48

Thiago

111 bronze badge

Collectives™ on Stack Overflow

Render a string as HTML in C# Razor

5 Answers 5

3 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related