MarkupString no Blazor

Existem algumas situações onde é necessário renderizar algum trecho HTML, que vem de alguma propriedade do componente. Como veremos mais adiante, existem algumas limitações com relação a isso no Blazor.

Para entender melhor esse problema, vamos utilizar uma aplicação de exemplo criada com o Template do Blazor.

Se você não sabe como criar uma aplicação Blazor, dê uma olhada nesse artigo aqui para criar um projeto com o Visual Studio 2019, ou nesse outro aqui com o VSCode.

Problema

Vamos simular essa situação no Componente Index.razor. Para isso, modifique-o como mostra a Figura 1.

Figura 1: Tentando renderizar um HTML que veio de uma Propriedade

Veja que colocamos um pequeno trecho HTML dentro de uma propriedade do componente Index.razor. E essa mesma propriedade está sendo exibida no corpo do HTML desse componente.

Se você executar a sua aplicação, verá que o HTML não será corretamente renderizado, como mostra a Figura 2.

Figura 2: Conteúdo da propriedade MeuHtml renderizado no componente

Isso ocorre, pois no Blazor, as strings são renderizadas através de text nodes do DOM. Portanto, qualquer Markup que estiver contido nessa string, será ignorado e tratado com um simples texto literal.

MarkupString

A solução para esse problema é fazer um cast dessa string, para um objeto da classe MarkupString. Veja na Figura 3.

Figura 3: Fazendo cast da string para MarkupString

Esse cast irá garantir que qualquer tag HTML que estiver dentro dessa string, será interpretada corretamente pelo browser. Faça um teste e veja, como mostra a Figura 4, que agora o markup é corretamente apresentado.

Figura 4: HTML da propriedade corretamente renderizado

Concluindo

Esse recurso pode ser útil quando temos que apresentar algum tipo de HTML mais dinâmico, que vem do resultado de alguma operação feita em nosso código.

Mas tenha cuidado em utilizar esse recurso, e garanta que o HTML que será renderizado dessa maneira, sempre venha de uma fonte segura.

Grande Abraço e até o próximo!

Publicidade