如何在blazor项目中使用C#bind使HTML文本多行？

我有一个带有客户端剃须刀页面的

Blazor

项目。在该页面上，我希望显示多行文本，例如：

找不到序列
错误消息

但是文本是使用

@bind

在C#字符串中找到的

我试过用普通的

\n

换行。它确实认为这是命令，但它在文本中放置了一个“空格”，而不是换行

我也试过在文本中写

，但它只是在文本中写了

我的剃须刀页面：

<p>@resultString</p>

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

@resultString

@代码{
字符串resultString=“找不到序列\n错误消息”；
}

对于代码段中的输入，我希望得到以下输出：

找不到序列

---

错误消息

我能想到的唯一方法是使用Razor模板\r\n、Envirnoment.Newline和其他任何内容都无法使编译器移动

以下是使用Razor模板的工作解决方案：

<p>@resultString</p>

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

}

@resultString

@代码{
RenderFragment resultString=@未找到序列
错误消息
；
}

更新： 您还可以使用以下选项：

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

MarkupString resultString=（MarkupString）$“未找到序列
错误消息”；

更新2： 从文件中：

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

警告：呈现从任何不受信任的源构建的原始HTML是一个错误 重大安全风险

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

@（（MarkupString）myMarkup）
@功能{
string myMarkup=“
这是一个标记字符串。
”；
}

---

希望这有帮助…

我认为渲染原始html标记不是一个好主意，因为它在大多数情况下都非常危险

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

<p style="white-space: pre-line" >@resultString</p> @code { string resultString = "Series not found \nError message"; }

@resultString

@代码{ 字符串resultString=“找不到序列\n错误消息”； } 演示

---

您可以选择简单的方法：拆分和循环

@foreach (var line in resultString.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries))
{
        <p>@line</p>
 }

@code {

    public string resultString  => "Series not found \nError message";
}

@foreach（resultString.Split（新[]{'\r'，'\n'}，StringSplitOptions.RemoveEmptyEntries）中的变量行）
{
@线

}
@代码{
公共字符串resultString=>“找不到序列\n错误消息”；
}

使用

标记字符串时，确保行正确编码非常重要。确保这一点的一个简单方法是使用以下帮助器方法：

public static class HtmlHelper
{
   public static MarkupString RenderMultiline(string textWithLineBreaks)
    {
        var encodedLines = (textWithLineBreaks ?? string.Empty)
            .Split(new char[] { '\r', '\n' })
            .Select(line => HttpUtility.HtmlEncode(line))
            .ToArray();

        return (MarkupString)string.Join("<br />", encodedLines);
    }
}

公共静态类HtmlHelper
{
公共静态标记字符串RenderMultiline（字符串文本带换行符）
{
var encodedLines=（textWithLineBreaks？？string.Empty）
.Split（新字符[]{'\r'，'\n}）
.Select（line=>HttpUtility.HtmlEncode（line））
.ToArray（）；
return（MarkupString）string.Join（“
”，encodedLines）；
}
}

用法：

<div>
    @HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with {userinput}");
</div>


@HtmlHelper.RenderMultiline（$“此文本使用{userinput}覆盖\n多行代码”）；
@resultString
谢谢！工作完美。或用于保持间距。
<div>
    @HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with {userinput}");
</div>