在 Blazor 有没有一个类似的 Html. Raw 的网站？

小开

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

Workaround (from that issue):

cshtml

<pre>
<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);
}
}
</pre>

index.html

<pre>
<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>
</pre>

小开

最佳答案

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.

小开

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";
}

小开

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


@code {
string InputString = "html code";
}

小开

<span class="link-dark">@((MarkupString)(get_user(user_row["user_name"].ToString())))</span>

小开

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>");
}