Variable not found: Mostrar HTML "crudo" en componentes Blazor

Hoy va un truquillo rápido sobre Blazor que puede resultar útil en muchos escenarios. Como probablemente sepáis, al igual que ocurre con otras tecnologías, Blazor codifica la salida HTML por motivos de seguridad, de forma que cualquier contenido con código de marcado será mostrado por defecto tal cual, sin interpretar las etiquetas.

Por ejemplo, considerad el siguiente código en un componente Blazor:

<p>This text is encoded: @myHtml</p>

@code {
    string myHtml = "Hello, <b>this is bold</b>";
}

El resultado que enviaremos al navegador es el siguiente:

<p>This text is encoded: Hello, &lt;b&gt;this is bold&lt;/b&gt;</p>

Y, por tanto, nuestros usuarios podrán leer literalmente este párrafo:

This text is encoded: Hello, <b>this is bold</b>

Normalmente no es eso lo que queremos mostrarles, ¿verdad?

Para conseguir que un contenido HTML sea interpretado apropiadamente debemos anular la codificación por defecto de Blazor, para lo que utilizaremos el tipo de datos MarkupString. Esta estructura, definida en Microsoft.AspNetCore.Components, permite indicar al motor de renderizado HTML que su contenido no debe ser codificado y, por tanto, debe ser incluido literalmente en la página.

El siguiente código mostrará en el navegador el texto "This text is not encoded: Hello this is bold" (negrita incluida):

<p>This text is not encoded: @myMarkup</p>

@code {
    MarkupString myMarkup = new MarkupString("Hello, <b>this is bold");
}

Para simplificar un poco su implementación, MarkupString define la operación de conversión explícita desde string, por lo que podemos hacer casting directo sobre la marcha en el momento del renderizado:

<p>This text is encoded: @myHtml</p>
<p>This text is not encoded: @((MarkupString)myHtml)</p>

@code {
    string myHtml = "Hello, <b>this is bold</b>";
}

Y el resultado visible en el navegador será el esperado:

This text is encoded: Hello, <b>this is bold</b>
This text is not encoded: Hello, this is bold

Espero que os sea de utilidad :)

Publicado en: www.variablenotfound.com.