How to render encoded tags as proper HTML, rather than text?

Question

I'm getting the following text from a database: (supplied by client, so I can't do much with it)

investment professionals.<BR /><BR /> blah blah blah

which is getting rendered as:

investment professionals.<BR /><BR /> blah blah blah

I don't want to print the <BR /> tags on the screen. I want them to behave as actual breaks.

The following Html Helper code builds the span it exists in, adds that to a div and returns the HTML string:

StringBuilder sbElements = new StringBuilder();

TagBuilder span = new TagBuilder("span") {InnerHtml = subject.AboutText};
sbElements.Append(span.ToString());

TagBuilder div = new TagBuilder("div");
div.MergeAttribute("class", "about-text");
div.InnerHtml = sbElements.ToString();

return div.ToString();

If I Html.Encode() the output of the helper method, the encoded tags - />< - get written to the screen. How can I take the source text I have and ensure that the tags get rendered as HTML, rather than text?

Answer 1

If you are using Razor, it will doubly-encode your string as @Chevex described. If you use the new MVC3 <%: %> syntax, it will also doubly-encode it. Regardless of your view engine, you can work around the encoding with either the IHtmlString route (eg, MvcHtmlString) described by @Chevex or by bypassing the default encoding using a different template syntax.

The later, which doesn't involve changing any code, just requires tweaking the syntax you use to render to a view.

For Razor:

@Html.Raw(yourvariable)

For MVC's default view template system:

<%=yourvariable%>

Answer 2

Try this:

    String Input = "investment professionals.<BR /><BR /> blah blah blah";

    String Output = Server.HtmlDecode(Input);

Answer 3

Change return div.ToString() to MvcHtmlString.Create(div.ToString()) and the method return type to MvcHtmlString instead of a string . This will prevent the view engine from automatically encoding the output.

Returning MvcHtmlString is the standard practice for rendering HTML output via helper methods.

What is happening is that you are decoding the value from the database and the view engine is re-encoding it when it is rendered. The Razor view engine automatically HTML encodes output in your views unless it is an MvcHtmlString . Returning MvcHtmlString will stop that from happening.

public static MvcHtmlString MyNonHtmlEncodedOutput(this HtmlHelper html)
{
        StringBuilder sbElements = new StringBuilder();

        TagBuilder span = new TagBuilder("span") {InnerHtml = Server.HtmlDecode(subject.AboutText)};
        sbElements.Append(span.ToString());

        TagBuilder div = new TagBuilder("div");
        div.MergeAttribute("class", "about-text");
        div.InnerHtml = sbElements.ToString();

        return MvcHtmlString.Create(div.ToString());
}

Answer 4

You can try this:

 String Input = "<p>New Appartments is Avaliable at very Reasonable Price</p>";
 String Output = Server.HtmlDecode(Input);
 string _output = System.Text.RegularExpressions.Regex.Replace(Output, "<.*?>", string.Empty);

Answer 5

You actually want to use Html.Decode(string) . This will convert encoded characters like < to < .

Answer 6

Just to add my findings to this question as i was struggling to use × in this way.

SetInnerText() will html encode all text by default whereas InnerHtml doesn't encode anything as it is expecting raw html.

So if I have got this the right way around you would have to first decode your text string to get the un-encoded tags (ie <br/> ) and then set this into the InnerHtml property and the tags will be rendered as html.

so you would have something like

element.InnerHtml = Server.HtmlDecode(yourText);