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

user_7090086 0
Viewed 8309

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

blazor asp.net-core html c#
5 Answers

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

enter image description here

user_100916070

The only way I can think of is using Razor templates. \r\n, Envirnoment.Newline, and anything else cannot make the compiler budge.

Here is a working solution using Razor Template:

<p>@resultString</p>

@code {
    RenderFragment resultString =  @<p>Series not found <br />Error message</p>;

}

Update: You can also use this:

MarkupString  resultString = (MarkupString) $"Series not found <br />Error message";

Update 2: From the documents:

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

Hope this helps...

Admin1

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

When using MarkupString, it is important to ensure that the lines are correctly encoded. One simple way to ensure that is to use the following helper method:

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

Usage:

<div>
    @HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with {userinput}");
</div>
user_21159050 
<label title="msg" class="col-form-label fw-bold fs--1">@((MarkupString)Msg) </label>

@code{    
string Msg = "Password is not <b>strong</b> enough!";
}

Use (MarkupString) in razor to display html in string

user_187129380
Related