How to make a HTML text multiline using a C# bind in a blazor project?

Question

I have a Blazor project with a ClientSide Razor Page. On that page I want to show a multiline text, for example:

Series not found
Error message

But the text is found in a C# string using a @bind.

I have tried using the normal \n to make a newline. It did pickup that it was command, but it placed a "space" in the text instead of making a new line.

I have also tried writing <br /> in the text, but then it just wrote that in the text.

My razor page:

<p>@resultString</p>

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

With the input in the code snippet I would expect the following output:

Series not found
Error message

Answer 1

You can always go for the simple approach: split and loop

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

@code {

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

Answer 2

I don't think it's a good idea to render the raw html tag because it is so dangerous most of the time.

As for your question, I would suggest you should add one line CSS code to display the line breaking:

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

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

Demo