88

我有一些存储在字符串中的 HTML。如何在没有自动 HTML 编码的情况下在 Blazor/Razor 视图中呈现它?

4

3 回答 3

173

Blazor在0.5.0 版本中添加了呈现原始 HTML 的功能。这是如何从string包含 HTML 内容呈现原始 HTML 的示例:

@((MarkupString)myMarkup)

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

更多信息可以在“Blazor 0.5.0 实验版本现已推出”公告中找到。

于 2018-07-29T23:13:40.947 回答
3

不是现在,但可能会在下一个版本中使用:Follow this

解决方法(来自那个问题):

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>

索引.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>
于 2018-05-30T12:25:41.113 回答
3

的,样品:

@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";
}
于 2021-06-20T01:45:21.703 回答