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

Question

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

找不到系列
错误信息

但是文本是在使用@bind的 C# 字符串中找到的。

我尝试使用普通的\n来换行。 它确实知道它是命令，但它在文本中放置了一个“空格”而不是换行。

我也尝试在文本中写<br /> ，但它只是在文本中写了。

我的 razor 页面：

<p>@resultString</p>

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

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

找不到系列
错误信息

Answer 1

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

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

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

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

演示

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 类型添加 static HTML 内容块。

@((MarkupString)myMarkup)

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

希望这可以帮助...

Answer 3

您始终可以使用 go 的简单方法：拆分和循环

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

@code {

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

Answer 4

使用MarkupString时，确保行正确编码很重要。 确保这一点的一种简单方法是使用以下辅助方法：

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);
    }
}

用法：

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

Answer 5

<label title="msg" class="col-form-label fw-bold fs--1">@((MarkupString)Msg) </label>

@code{    
string Msg = "Password is not <b>strong</b> enough!";
}

在 razor 中使用 ( MarkupString ) 在字符串中显示 html