如何在 Blazor 中添加新线路

Question

我正在尝试创建一个换行符，并且已经查看了其他论坛，有些正在使用 '\n'、'\r' 或 Environment.NewLine 但个人没有任何作用。我给你代码和结果：

1：

string n1 = SomeText;
string n2 = AnotherText;
string beforeStr = n1 + Environment.NewLine + n2;

2：

string n1 = SomeText;
string n2 = AnotherText;
string beforeStr = n1 + '\r' + n2;

3：

string n1 = SomeText;
string n2 = AnotherText;
string beforeStr = n1 + '\n' + n2;

总是相同的结果：

SomeText AnotherText

Answer 1

MarkupString解决方案将吞咽/解释所有非转义的 html 字符。这可能会导致使用动态用户输入字符串的 XSS 攻击。
这里的方法是先进行 html-escape，然后将所有换行符替换为 <br />

@using System.Web
@using System.Text.RegularExpressions;

<div>
  @((MarkupString)Regex.Replace(
    HttpUtility.HtmlEncode(@multilineString), "\r?\n|\r", "<br />"))
</div>

正则表达式\r?\n|\r将替换\r (old Mac), \r\n (Windows)和\n (Unix)

这也可以作为组件来实现。

MultilineString.razor

@using System.Web
@using System.Text.RegularExpressions;

@((MarkupString)Regex.Replace(HttpUtility.HtmlEncode(@Value), "\r?\n|\r", "<br />"))

@code {
    [Parameter]
    public string Value { get; set; } = default!;
}

现在更容易使用<MultilineString Value=@yourInput />

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

Answer 3

我创建了一个简单的组件 LineBreaksToBRs。它避免了 MarkupString 的风险。

@if (lines != null)
    for (int i = 0; i < lines.Length; i++)
    {
        @lines[i];
        <br />
    }

@code {
    string[] lines;

    [Parameter]
    public string InputString { get; set; }

    protected override void OnParametersSet()
    {
        lines = InputString?.Split('\n');
    }
}

和用途

...
<div class="field">
    <span>My Field</span>
    <span>
        <LineBreaksToBRs InputString=@Record.MyField />
    </span>
</div>
...

Answer 4

CSS 有一个非常简单的解决方案：

.pre-wrap {
   white-space: pre-wrap;
}

<div class="pre-wrap">@MyMultiLineString</div>