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

Posted 2023-03-05

【中文标题】如何在 Blazor 项目中使用 C# 绑定制作 HTML 文本多行？

【英文标题】：How to make a HTML text multiline using a C# bind in a blazor project?

【发布时间】：2020-02-17 21:39:52

【问题描述】：

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

找不到系列错误信息

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

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

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

我的剃须刀页面：

<p>@resultString</p>

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

使用代码 sn-p 中的输入，我希望得到以下输出：

找不到系列错误信息

【问题讨论】：

<pre>@resultString</pre>

【参考方案1】：

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

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

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

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

演示

【讨论】：

或使用white-space: pre-wrap; 保持间距。

【参考方案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>";

希望这会有所帮助...

【讨论】：

谢谢！完美运行。

【参考方案3】：

你总是可以选择简单的方法：拆分和循环

@foreach (var line in resultString.Split(new[]  '\r', '\n' , StringSplitOptions.RemoveEmptyEntries))

        <p>@line</p>
 

@code 

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

【讨论】：

谢谢！这对我有用！

【参考方案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>