Как сделать многострочный текст HTML, используя привязку C #, в блазорном проекте?

Question

У меня есть Blazor проект со страницей ClientSide Razor. На этой странице я хочу показать многострочный текст, например:

Серия не найдена Сообщение об ошибке

Но текст находится в строке C # с использованием @bind.

Я пытался использовать обычный \n для создания новой строки. Он понял, что это была команда, но вместо новой строки поместил «пробел» в текст.

Я также попытался написать <br /> в тексте, но потом просто написал это втекст.

Моя страница бритвы:

<p>@resultString</p>

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

При вводе фрагмента кода ожидается следующий вывод:

Серия не найдена Сообщение об ошибке

Answer 1

Я не думаю, что было бы хорошей идеей отображать необработанный HTML-тег, потому что он в большинстве случаев очень опасен.

Что касается вашего вопроса, я бы посоветовал вам добавить одну строку CSS код для отображения разрыва строки:

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

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

Демо

Answer 2

Вы всегда можете пойти на простой подход: разделить и цикл

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

@code {

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

Answer 3

Единственное, о чем я могу думать, это использовать шаблоны 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>";
}

Надеюсь, это поможет ...