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

输出：