Blazor, styling dynamic data

Wiep Corbier

I have dynamic data showing on a blazor page

                @foreach (var item in DisplayList.OrderBy(i => i.CompanyId))
                {
                    
                        @item.Company
                        @item.FunctionName
                        @item.Identifier
                        @item.SkillsSet
                    
                }

In my code I do a if..contains..replace on the part item.SkillsSet. This is a string. What I'm trying to do is: when this string contains a value I want that value to be surrounded with the "mark" tag so that part is highlighted. Like: Jo | Lisa | Me | John But the result is not what I expect. It shows the names and the tag. It doesn't highlight the text It shows:

Jo | Lisa | Me | John

What to do?

Richard Deeming

Try using the Html.Raw helper method to indicate that the string should not be HTML-encoded:

@Html.Raw(item.SkillsSet)

NB: You'll need to make sure the rest of the string is properly HTML-encoded to ensure it displays correctly and to avoid the potential for a persisted cross-site scripting vulnerability.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Wiep Corbier

Didn't work but you put me in the right direction Richard. Many thanks!!! I found the solution in a minute after trying your tip: How do I render raw HTML in Blazor? | Blazor FAQ | Syncfusion[^]