Comment rendre un texte HTML multiligne en utilisant un bind C# dans un projet blazor ?

Question

J'ai un Blazor avec une page Razor côté client. Sur cette page, je veux afficher un texte multiligne, par exemple :

Série non trouvée
Message d'erreur

Mais le texte est trouvé dans une chaîne C# à l'aide d'une fonction @bind .

J'ai essayé d'utiliser la méthode normale \n pour créer une nouvelle ligne. Il a bien saisi la commande, mais il a placé un "espace" dans le texte au lieu de créer une nouvelle ligne.

J'ai également essayé d'écrire <br /> dans le texte, mais il l'a simplement écrit dans le texte.

Ma page rasoir :

<p>@resultString</p>

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

Avec les données fournies dans l'extrait de code, je m'attendrais à obtenir le résultat suivant :

Série non trouvée
Message d'erreur

Answer 1

Le seul moyen auquel je pense est d'utiliser les modèles Razor. \r\n Envirnoment.Newline, et tout le reste ne peut pas faire bouger le compilateur.

Voici une solution fonctionnelle utilisant le modèle Razor :

<p>@resultString</p>

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

}

Mise à jour : Vous pouvez également utiliser ceci :

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

Mise à jour 2 : D'après les documents :

Rendre du HTML brut Blazor rend normalement les chaînes de caractères en utilisant les nœuds de texte du DOM, ce qui n'est pas le cas de Blazor. et traitées comme du texte littéral. Cette nouvelle fonctionnalité vous permet de rendre des valeurs spéciales de MarkupString qui seront analysées en HTML ou SVG et ensuite insérées dans le DOM. insérées dans le DOM.

AVERTISSEMENT : Le rendu d'un code HTML brut construit à partir d'une source non fiable constitue un risque majeur pour la sécurité !

Utilisez le type MarkupString pour ajouter des blocs de contenu HTML statique.

@((MarkupString)myMarkup)

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

J'espère que cela vous aidera...

Answer 2

Je ne pense pas que ce soit une bonne idée de rendre la balise html brute parce qu'elle est très dangereuse la plupart du temps.

En ce qui concerne votre question, je vous suggère d'ajouter une ligne CSS pour afficher le saut de ligne :

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

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

Démonstration

Answer 3

Vous pouvez toujours opter pour l'approche la plus simple : le fractionnement et le bouclage.

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

@code {

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

Answer 4

Lors de l'utilisation de MarkupString il est important de s'assurer que les lignes sont correctement encodées. Une façon simple de s'en assurer est d'utiliser la méthode d'aide suivante :

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

Utilisation :

<div>
    @HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with {userinput}");
</div>