html - 如何在 Blazor 的字段中渲染 html

Question

我有一个用 HTML 保存在数据库中的字段。我正在使用 TinyMCE 作为我的文本编辑器，它正确地将 HTML 标签保存在数据库中。但是，当我渲染该字段时，它仍然显示标签。最初我有这个:

<td>
    @objInv.Notes
</td>

我解决此问题的最新尝试是:

<td>
    @(new HtmlString(objInv.Notes))
</td>

无论哪种方式，它仍然呈现为:

<p>New laptops 09/07/2022 <strong>test</strong></p>

我的愿望是:

新笔记本电脑 09/07/2022 测试

Answer 1

在 Blazor 中，渲染原始 HTML 是使用 MarkupString 类实现的。例如，您可以将原始 HTML 分配给字符串变量，然后在渲染时将其转换为 MarkupString。或者，您可以直接声明并初始化 MarkupString 字段。

这是一个例子:

@tableTitle

<table class="table table-striped">
    <thead>
        <tr>
            <th>Notes</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@((MarkupString)myNote)</td>
        </tr>
    </tbody>
</table>

@code {
    string myNote = "<p>New laptops 09/07/2022 <strong>test</strong></p>";
    MarkupString tableTitle = new MarkupString("<h1 style='color: blue;'>Laptop Notes</h1>");
}

输出: