mike's web log

 

Blog Search


(Supports AND)

 

Google Ads

 

Feed

Subscribe to the RSS feed for this blog.

See this post for info on full versus truncated feeds.

 

Quote

Dictionaries are the second-to-last refuge of scoundrels.

Phillip Blanchard



 

Navigation






<April 2014>
SMTWTFS
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910


 

25 Most-Visited Entries

 

Categories

  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
 

Blogs I Read

 

Contact

Email me
 

Blog Statistics

Dates
First entry - 6/27/2003
Most recent entry - 4/3/2014

Totals
Posts - 2298
Comments - 2480
Hits - 1,620,159

Averages
Entries/day - 0.58
Comments/entry - 1.08
Hits/day - 410

Update every 30 minutes. Last: 3:59 PM Pacific

 
   |  Rendering HTML as HTML in Razor

posted at 02:10 PM | | [3] |

Suppose you want to concat together a bunch of strings and markup, maybe like this:

var stringWithMarkup = "a" + "<br/>" + "b" + "<br/>" + "c" ;
(Let's assume you're doing something a bit more sophisticated than this, like including some variables, but bear with me for the duration here.)

And let's say your goal is to render something like this:

a
b
c


So you do this in a Razor page:

<div>
@stringWithMarkup
</div>
Guess what you get -- ? Yes, this:

a <br/> b <br/> c <br/>

This is, as they say, by design. When Razor renders strings, it automatically HTML encodes them, which is a security measure. What you might intend as HTML elements inside the string — e.g., <br/> — are encoded in such a way that they're treated as text, not HTML (e.g. &lt;br/&gt;). (This is noted a couple of times in the ASP.NET Razor ebook -- for example, see "HTML Encoding" in Chapter 2 - Introduction to ASP.NET Web Programming Using the Razor Syntax.)

However, you won't find in that chapter any info on what to do if you do want the embedded markup rendered as markup and not encoded. [Important Warning] You can do this, but it's not obvious how. I asked around, and the ever-helpful Erik Porter came to the rescue. Here's the solution in a nutshell:

<div>
@(new HtmlString(stringWithMarkup))
</div>
In other words, pass your string to a new instance of the HtmlString class. Knowing this, you can read an explanation in Scott Guthrie's blog; here's the salient bit:
ASP.NET 4 introduces a new IHtmlString interface (along with a concrete implementation: HtmlString) that you can implement on types to indicate that its value is already properly encoded (or otherwise examined) for displaying as HTML, and that therefore the value should not be HTML-encoded again. The <%: %> code-nugget syntax checks for the presence of the IHtmlString interface and will not HTML encode the output of the code expression if its value implements this interface.
Scott Hunter, who's another of the ASP.NET Razor PMs, noted that this would be a good candidate for a simple helper. He suggested that you could create a helper like this:

@helper RawText(string s) {
@(new HtmlString(s))
}
Create a blank file named CustomHelpers in the App_Code folder of the website and then copy the RawText helper code in, save the file, done. Then you can do something like this your other pages:

<div>
@CustomHelpers.RawText(stringWithMarkup)
</div>
Slick, eh? Obviously, you can name the file and the helper anything you want, just change the syntax accordingly where you want to invoke the helper.


[1] <Requisite but important warning>Do this only if you trust the markup you're rendering. The whole point of auto-encoding strings is to protect you from things like scripting attacks. Basically, don't ever pass through user input as HTML; let it be encoded unless you have good reason to trust it.</warning>

[categories] ,