I've a String field on my model that contains an html value, my problem is that when I place the code to render this field on my view it will be entirely reconverted to html, and the final result is a big string with html characters escaped...
#field //= "<div>"
renders
< ;div> ;
How can i override this behavior and force it to write the html unescaped on my field?
You could use the Html.Raw helper:
#Html.Raw(field)
Use #Html.Raw:
#Html.Raw(field)
Related
I am using Blazor with a rich text editor. When I output text like this:
It adds quotes around the text and the actual markup is displayed:
My markup is displayed with quotes, and the actual markup (bold and color) is not displayed. Does anyone know why or how to make this work with Blazor?
The issue is fundamental to the way Blazor compiles and renders pages. The components are built as generated classes during compilation that then use a RenderTreeBuilder to generate the HTML back out again. This in turn takes your inputs to be string literals and outputs them as such, as what blazor is seeing in your markup is "insert string x into position y", not actual HTML markup.
EDIT
I found a simple way to do this shortly after I answered so I placed it here, using the type MarkupString. Setup is done like this:
MarkupRenderer.razor
#((MarkupString)Markup)
#code {
[Parameter]
public string Markup { get; set; }
}
and then in your parent you use it like so:
Parent.razor*
.....
<MarkupRenderer Markup="#markupString" />
This will render out the tags and attributes as you are looking for to get the content output as HTML.
Official documentation on this is very short and includes the warning:
"Rendering raw HTML constructed from any untrusted source is a security risk and should be avoided!", which it is, so keep that in mind if you haven't already.
I ended up using Markdig
<PackageReference Include="Markdig" Version="0.20.0" />
Then including an unmapped field in my POCO model:
[NotMapped]
public MarkupString HtmlQuestion { get; set; }
Then in my service layer I added the markup text:
using Markdig;
...
q.HtmlQuestion = (MarkupString)Markdown.ToHtml(q.QuestionDescription);
Hi i have model with property content. model.Content is HTML tags like object string
when i try
#foreach (var user in #Model.Organizations){
#user.Content
}
he is don`t create html tags just print text. how i can create tags from text?
enter image description here
Try to use #Html.Raw()
#Html.Raw(user.Content)
I have a sort of strange use-case in Angular 2 where I have some content that contains regular html tags as well as custom html tags. I want to render the regular html tags and show the custom html tags as plain text. For example
the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>
should have <CUSTOM_TAG>boy</CUSTOM_TAG> appearing as plain text just as you see it above, however <b>store</b> should appear as store i.e. the bold tag is actually rendered.
When I try the usual way of inserting html i.e.
<div [innerHtml]="myHtml"></div>
I get a sanitization error because of the custom tag. When I fix the sanitization error as was done here it just strips out the custom tags which I also don't want. Is showing the custom tags as plain text and rendering the regular html tags possible?
If all the possible custom tags are known, you can encode them before passing the string to the [innerHTML] binding. The method encodeCustomTags in the following code snippet uses a regular expression to replace <customTag> with <customTag>:
private customTags = [
"CUSTOM_TAG",
"otherTag",
];
myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");
private encodeCustomTags(html: string): string {
let regex: RegExp;
for (let tag of this.customTags) {
regex = new RegExp(`<(/?)${tag}>`, "gi");
html = html.replace(regex, `<$1${tag}>`)
}
return html;
}
See this stackblitz for a demo.
I have a string, read from a database, that contains HTML that I want to output. Despite applying HttpUtility.HtmlDecode(), the View always renders the string as encoded HTML (i.e. <SPAN> instead of <SPAN>).
I am using:
string test = WebUtility.HtmlDecode(myStr);
<span>#test</span>
I have tried:
string test = HttpUtility.HtmlDecode(myStr);
<span>#test</span>
<span>#HttpUtility.HtmlDecode(myStr)</span>
Use Html.Raw()
#Html.Raw("<span>Hello</span>")
All the output from helpers and other elements in Razor are put through HttpUtility.HtmlEncode, unless they implement IHtmlString. But your best option here is using Html.Raw()
You need to use #Html.Raw:
#Html.Raw("<h1>Header</h1>")
Will output the text Header.
Try this helper method
#Html.Raw(myStr)
This is extremely aggravating. I just want to simply insert raw html. I can't use the literal control because there's no ignoring the quote character. I don't want to use a script element because I'm adding it in a ascx file. I just want raw html output. Is there no operater for this?
I've properbly misunderstood you completely but:
In Classic ASP it is:
<%=("<div style=""color:red;"">html</div>")%>
output:
<div style="color:red;">html</div>