J'ai un projet Blazor avec une page ClientSide Razor. Sur cette page, je souhaite afficher un texte multiligne, par exemple:
Série introuvable
Message d'erreur
Mais le texte se trouve dans une chaîne C # à l'aide d'un @bind .
J'ai essayé d'utiliser la \n normale pour créer une nouvelle ligne. Il a compris que c'était une commande, mais il a placé un «espace» dans le texte au lieu de créer une nouvelle ligne.
J'ai aussi essayé d'écrire <br /> dans le texte, mais ensuite il l'a simplement écrit dans le texte.
Ma page rasoir:
<p>@resultString</p>
@code {
string resultString = "Series not found \nError message";
}
Avec l'entrée dans l'extrait de code, je m'attendrais à la sortie suivante:
Série introuvable
Message d'erreur
4 Réponses :
La seule façon dont je peux penser est d'utiliser des modèles Razor. \ r \ n, Envirnoment.Newline, et quoi que ce soit d'autre ne peut pas faire bouger le compilateur.
Voici une solution de travail utilisant le modèle Razor:
@((MarkupString)myMarkup)
@functions {
string myMarkup = "<p class='markup'>This is a <em>markup string</em>.</p>";
}
Mise à jour: vous pouvez également utiliser ceci:
MarkupString resultString = (MarkupString) $"Series not found <br />Error message";
Mise à jour 2: À partir des documents:
Rendu HTML brut Blazor rend normalement les chaînes à l'aide de nœuds de texte DOM, ce qui signifie que tout balisage qu'elles peuvent contenir sera ignoré et traité comme du texte littéral. Cette nouvelle fonctionnalité vous permet de rendre des valeurs spéciales MarkupString qui seront analysées en HTML ou SVG, puis insérées dans le DOM.
AVERTISSEMENT: le rendu du HTML brut construit à partir de toute source non fiable est un risque majeur pour la sécurité!
Utilisez le type MarkupString pour ajouter des blocs de contenu HTML statique.
<p>@resultString</p>
@code {
RenderFragment resultString = @<p>Series not found <br />Error message</p>;
}
J'espère que cela t'aides...
Merci! Fonctionne parfaitement.
Je ne pense pas que ce soit une bonne idée de rendre la balise html brute car elle est si dangereuse la plupart du temps.
En ce qui concerne votre question, je vous suggère d'ajouter un code CSS une ligne pour afficher le saut de ligne:
<p style="white-space: pre-line" >@resultString</p>
@code {
string resultString = "Series not found \nError message";
}
Ou utilisez white-space: pre-wrap; pour maintenir les espacements.
Vous pouvez toujours opter pour l'approche simple: 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";
}
Lors de l'utilisation de MarkupString , il est important de s'assurer que les lignes sont correctement codées. Un moyen simple de s'en assurer consiste à utiliser la méthode d'assistance suivante:
<div>
@HtmlHelper.RenderMultiline($"This text goes over\nmultiple lines\neven with {userinput}");
</div>
Usage:
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);
}
}
Essayez \ r \ n retour et nouvelle ligne ..
<pre>@resultString</pre>