Blazor中是否有类似Html.Raw的功能？

Question

我有一些存储在字符串中的 HTML 代码，如何在 Blazor/Razor 视图中呈现它而不进行自动 HTML 编码？

- Dave

---

我在这里做出一条备注，以防对其他人有用：如果你有一个MarkupString?（可为空），为了使其不被转义，你必须将其强制转换为MarkupString（不可为空）。 - Hammerite

Answer 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实验版本现已发布"的公告中找到。

- Maxim Kornilov

---

请注意，您可以使用MarkupString将<script>标记注入动态Blazor页面中，这是Blazor通常不允许的。也许这不是我应该做的事情，但如果您想插入自定义Google搜索框，这非常有用。 - DavidHulsman

注意：MarkupString会自动闭合标签，因此它并不是“原始的”。如果你尝试输出"<div>"，结果将是"<div></div>"。 - Nick Kovalsky

私有的静态的MarkupString HtmlRaw(string value) { return (MarkupString)value; } - Pažout

@NickKovalsky，有什么绕过这个问题的建议吗？ - Rik van den Berg

看起来是一个“否定”：https://github.com/dotnet/aspnetcore/issues/15746 “Blazor 操作 DOM 元素 = 元素需要立即有效（闭合标签）。” - Nick Kovalsky

Answer 2

是的，这是一个示例：

@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

---

MarkupString会自动闭合标签，所以它并不是完全“原始”的。如果你尝试输出"<div>"，结果将变成"<div></div>"。 - Nick Kovalsky

Answer 3

您还可以将原始HTML存储为MarkupString类型的变量字符串，然后就可以在不需要转换的情况下使用它。

@myMarkup

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

- Ibrahim Timimi

Answer 4

目前还没有，但可能会在下一个版本中推出：关注这个。

解决方法（来自该问题）： 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>

- Flores

Answer 5

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

- Mirko MyRent

Answer 6

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

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

- Vaibhav Pathade

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community