Blazor 中是不是有与 Html.Raw 等效的内容？

Posted 2023-03-27

【中文标题】Blazor 中是不是有与 Html.Raw 等效的内容？

【英文标题】：Is there an equivalent to Html.Raw in Blazor?Blazor 中是否有与 Html.Raw 等效的内容？

【发布时间】：2018-11-09 06:57:54

【问题描述】：

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

【参考方案1】：

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

@((MarkupString)myMarkup)

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

更多信息可以在"Blazor 0.5.0 experimental release now available"公告中找到。

【讨论】：

请注意，您可以使用 MarkupString 将

谢谢，您的建议对我有帮助。

注意：MarkupString 是自动关闭标签，所以它根本不是“原始的”。如果您尝试输出“”，结果将是“”。

【参考方案2】：

现在没有，但可能会在下一个版本中提供：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>

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>

【参考方案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";

【讨论】：

MarkupString 是自动关闭标签，所以它根本不是“原始的”。如果您尝试输出“”，结果将是“”