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

Posted

技术标签:

【中文标题】如何在 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 中的输入,我希望得到以下输出:

找不到系列错误信息

【问题讨论】:

&lt;pre&gt;@resultString&lt;/pre&gt; 【参考方案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>

【讨论】:

以上是关于如何在 Blazor 项目中使用 C# 绑定制作 HTML 文本多行?的主要内容,如果未能解决你的问题,请参考以下文章

Blazor数据绑定

如何从数据库 Blazor C# 中获取 Id 数据

C#:如何在 Blazor Wasm 托管中将动态 Razor 组件从服务器发送到客户端?

Blazor 中 RadzenDataList 中 RadzenTextBox 的 2 路绑定

Blazor——Asp.net core的新前端框架

如何在 c# blazor 网页中更新实时日期时间