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

blazor textarea autosize
blazor html raw
line break in mvc view
blazor markupstring
blazor inputtextarea height

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

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...

Blazor textbox, Feb 08, 2020 · Learn how to use autocomplete field in blazor project with short MVC Razor : Different way of getting @Html. one that spans over multiple lines). Use the Text property to specify an editor value or to bind the displayed text to a Blazor is a free, open source Web framework to build Web apps using C# that  In this article, we will create a Single Page Application (SPA) using the server-side Blazor concepts with the help of Entity Framework Core database first approach. Single-Page Applications are web applications that load a single HTML page and dynamically update that page as the user interacts with the app.

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

ASP.NET Core Blazor forms and validation, https://docs.microsoft.com › en-us › aspnet › core › blazor › components With the release of new ASP. We update the HTML to bind to the local data model. Create an Angular application with a few clicks. NET provides a built-in user database with support for multi-factor authentication and external authentication with Google, Twitter, and more. Blazor Bind Event. 0; Install Blazor Templates.

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

ASP.NET Core Blazor data binding, Razor components provide data binding features via an HTML element <input @bind="CurrentValue" /> @code { private string CurrentValue { get; set; } } The text box is updated in the UI only when the component is  If I set ReferenceOutputAssembly to false for the blazor project reference in the hosted asp. Blazor is a feature of ASP. To celebrate this new technology, we have designed and created a new suite of Razor Components for Blazor. Leveraging Blazor You can also generate these multiple forms in C#, using Blazor's RenderFragment class.

Blazor input text password, Later we will create a Blazor application and connect with Cassandra database 0 Retail Blazor gives you the ability to write rich web apps with C# rather than jаvascript. It exposes properties common to all HTML text input controls. a simple startup project < InputText id="Name" @bind-Value="_ContactFormModel. Blazor templates define their Razor components using this approach. C# code is placed in a code-behind file defined as a partial class. The following example shows the default Counter component with an @code block in an app generated from a Blazor template. HTML markup, Razor code, and C# code are in the same file: Pages/Counter.razor:

how to make text multiple lines in HTML Code Example, Get code examples like "how to make text multiple lines in HTML" instantly right from your google search results with the Grepper Chrome  The <textarea> tag defines a multi-line text input control. The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

Building a C# Interactive shell in a browser with Blazor , It is actually remarkably simple to build a C# Interactive shell with Roslyn. namespace imports, doesn't support multi-line input and plenty more. Once you create a basic Blazor project, we can start putting together the The first piece of C# code to add will handle the ability to run code – so bind to the  Blazor is a client-side web framework that purports to allow us to use C# in client-side, single-page applications. It looks and feels very similar to Razor Pages apps. This sample project allows us to get ToDo list items from an external data source, add new items, remove items, and toggle items.

Comments
  • Try \r\n return & newline..
  • <pre>@resultString</pre>
  • Thanks! Works perfectly.