我怎样才能在 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

浏览器中的文档结构将在 HTML 中，因此您需要使用 HTML 标签（具体来说是 <br />）来控制文档的流向。

string beforeStr = n1 + '<br />' + n2;

正如 Panagiotis Kanavos 所提到的，可能是因为您使用的是 Blazor，您最终可能会在 .razor 组件中得到这样的结果：

<p>
    @n1 <br /> @n2
</p>

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：来自文件：

Render raw HTML Blazor normally renders strings using DOM text nodes, which means that any markup they may contain will be ignored and treated as literal text. This new feature lets you render special MarkupString values that will be parsed as HTML or SVG and then inserted into the DOM.

WARNING: Rendering raw HTML constructed from any untrusted source is a major security risk!

Use the MarkupString type to add blocks of static HTML content.

@((MarkupString)myMarkup)

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

Answer 3

我不太擅长html，这是我用来创建新行的。可能有更好的方法，但这对我有用：

<div style="display:inline;"> one line</div>

空行的另一种方式是：

<div style="height:1em;"></div>

Answer 4

这就是我要为我工作的东西。在我的剃刀文件中，我添加了这个：

@foreach (var item in References)
{
    <br />
    @item
}

在我的 C# class 中，我添加了这个：

protected List<string> References { get; set; } = new List<string>();

只需在引用中填写您想要的每一行文本，效果很好。我找到了很多其他解决方案，但这对我来说是最简单的。

Answer 5

MarkupString 解决方案将 swallow/interpret 所有非转义的 html 字符。这可能会导致使用动态用户输入字符串的 XSS 攻击。
这里的方法是先html-转义，然后把所有的换行换成

@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 6

这对我来说效果很好

@foreach (var sub in beforeStr.Split('\n'))
{
    @sub <br/>
}

@code{
string n1 = SomeText;
string n2 = AnotherText;
string beforeStr = n1 + '\n' + n2;
}

Answer 7

我创建了一个简单的组件 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>
...

我怎样才能在 Blazor 中换行

How can I have New Line in Blazor

c#

asp.net

newline

blazor