如何在 blazor 项目中使用 C# 绑定制作 HTML 文本多行？

Question

我有一个Blazor带有客户端 Razor 页面的项目。在该页面上，我想显示多行文本，例如：

未找到系列
错误消息

但是文本是在 C# 字符串中使用@bind.

我试过使用法线\n来换行。它确实选择了它是命令，但它在文本中放置了一个“空格”而不是换行。

我也试过<br />在文中写，但后来它只是在文中写了。

我的剃须刀页面：

<p>@resultString</p>

@code {
    string resultString = "Series not found \nError message";
}

使用代码片段中的输入，我希望得到以下输出：

未找到系列
错误消息

Answer 1

我认为渲染原始 html 标签不是一个好主意，因为大多数时候它是如此危险。

至于你的问题，我建议你应该添加一行CSS代码来显示换行：

<p style="white-space: pre-line" >@resultString</p>

@代码 {
    string resultString = "未找到系列\n错误信息";
}

演示

Answer 2

我能想到的唯一方法是使用 Razor 模板。\r\n、Envirnoment.Newline 和其他任何东西都不能让编译器让步。

这是使用 Razor 模板的有效解决方案：

<p>@resultString</p>

@code {
    RenderFragment resultString =  @<p>Series not found <br />Error message</p>;

}

更新：您也可以使用这个：

MarkupString  resultString = (MarkupString) $"Series not found <br />Error message"; 

更新 2：从文件：

呈现原始 HTML Blazor 通常使用 DOM 文本节点呈现字符串，这意味着它们可能包含的任何标记都将被忽略并被视为文字文本。这个新功能允许您呈现特殊的 MarkupString 值，这些值将被解析为 HTML 或 SVG，然后插入到 DOM 中。

警告：渲染从任何不受信任的来源构建的原始 HTML 是一个主要的安全风险！

使用 MarkupString 类型添加静态 HTML 内容块。

@((MarkupString)myMarkup)

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

希望这可以帮助...