131

I have some HTML that is stored in a string. How can I render it in a Blazor/Razor view without automatic HTML encoding?

Iliar Turdushev
  • 4,935
  • 1
  • 10
  • 23
Dave
  • 3,676
  • 4
  • 28
  • 39
  • 1
    I make this remark in case it is of use to anyone else: if you have a MarkupString? (nullable), you have to cast it to MarkupString (not nullable) in order for it to not be escaped. – Hammerite May 09 '23 at 09:40

6 Answers6

238

Feature to render raw HTML was added in Blazor 0.5.0 version. This is the example of how raw HTML can be rendered from string containing HTML content:

@((MarkupString)myMarkup)

@functions {
    string myMarkup = "<p class='markup'>This is a <em>markup string</em>.</p>";
}

More info can be found in "Blazor 0.5.0 experimental release now available" announcement.

Nechemia Hoffmann
  • 2,118
  • 2
  • 12
  • 21
Maxim Kornilov
  • 5,675
  • 1
  • 24
  • 35
  • 8
    Note that you can use MarkupString to inject a – DavidHulsman Jan 05 '20 at 18:26
  • 8
    Beware: MarkupString is auto-closing tags, so it is not "raw" at all. If you try to output "
    " the result will be "
    ".
     – Nick Kovalsky Jul 17 '21 at 12:26
  • 1
    private static MarkupString HtmlRaw(string value) { return (MarkupString)value; } – Pažout Apr 12 '22 at 08:35
  • @NickKovalsky any suggestion on how to circumvent this? – Rik van den Berg Dec 19 '22 at 09:49
  • Looks like a "no": https://github.com/dotnet/aspnetcore/issues/15746 "Blazor manipulates DOM Elements = element needs to be immediately valid (closed tags) – Nick Kovalsky Dec 21 '22 at 13:59
13

Yes, sample:

@page "/"

<h2>Title</h2>
<hr />
<p>
    @ms
</p>

@code {
    MarkupString ms => (MarkupString)description;

    string description = $@"
This is an example of how Azure serverless functions can be consumed from Blazor WASM.
<br><br>
To run this project in development mode, the <b>HttpTriggerSample</b> project must be run simultaneously.
<br><br>
Serverless Functions origin: <b>{fs}<b>.";

    // by example
    static string fs => Program.IS_DEVELOPMENT ? "DevelopmentStorage" : "Azure";
}
Alan1963
  • 159
  • 1
  • 5
6

You can also store the raw HTML as string to a variable of type MarkupString, then you can use it without casting.

@myMarkup

@code {
    private MarkupString myMarkup = 
        new MarkupString("<p class='markup'>This is a <em>markup string</em>.</p>");
}

output

Ibrahim Timimi
  • 2,656
  • 5
  • 19
  • 31
3

Not right now, but will have it probably in the next version: Follow this.

Workaround (from that issue):

cshtml

<span ref="Span"></span>

@functions{
    [Parameter] string Content { get; set; }
    private ElementRef Span;

    protected override void OnAfterRender()
    {
        Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.Invoke<bool>("RawHtml", Span, Content);
    }
}

index.html

<script>
    Blazor.registerFunction('RawHtml', function (element, value) {
        element.innerHTML = value;
        for (var i = element.childNodes.length - 1; i >= 0; i--) {
            var childNode = element.childNodes[i];
            element.parentNode.insertBefore(childNode, element);
        }
        element.parentNode.removeChild(element);
        return true;
    });
</script>
H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Flores
  • 8,226
  • 5
  • 49
  • 81
0

index.html
<div>@((MarkupString)InputString)</div>

@code {
    string InputString = "html code";
}
Vaibhav Pathade
  • 41
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 19 '22 at 19:18
0
<span class="link-dark">@((MarkupString)(get_user(user_row["user_name"].ToString())))</span>
Mirko MyRent
  • 111
  • 1
  • 4