Este post pertenece a una serie de tres partes donde estamos viendo cómo renderizar componentes Blazor en el interior de vistas MVC de ASP.NET Core. Hasta ahora, hemos visto cómo renderizar desde vistas MVC componentes Blazor usando los siguientes modos de renderización:

• Componentes estáticos (SSR)
• Componentes con interactividad en servidor (Blazor Server)

En esta entrega final veremos cómo renderizar componentes Blazor ejecutados por completo en el lado cliente (WebAssembly).

Renderizar componentes Blazor WebAssembly en vistas MVC

Las particularidades de los componentes Blazor WebAssembly hacen que el proceso de renderizado en vistas MVC sea algo diferente al de los componentes estáticos o interactivos en servidor, precisamente porque se ejecutan por completo en el lado cliente.

Básicamente, tendremos que seguir una estructura similar a la empleada cuando creamos una Blazor Web App con soporte para componentes WebAssembly: necesitaremos un proyecto "Host" ASP.NET Core y un proyecto "Client", con todo lo que debe ejecutarse en el lado cliente. El primero de ellos ya lo tenemos, puesto que es nuestra aplicación MVC.

Para crear el proyecto "Client" con todo ya configurado, lo más sencillo es añadir a la solución donde se encuentra el proyecto MVC una Blazor Web App con soporte para componentes interactivos WebAssembly. Con esto, se añadirán dos proyectos:

• El "Host", llamado  <NombreProyecto> (el nombre que hayamos elegido para él), que no necesitaremos y podemos eliminar una vez creado.
• El proyecto <NombreProyecto>.Client, que es el código y configuraciones que se ejecutarán en el lado cliente. Este es el proyecto que debemos mantener en la solución.

El proyecto <NombreProyecto>.Client tendremos que referenciarlo desde el proyecto MVC y debemos introducir en él los componentes Blazor que queremos renderizar más adelante en las vistas.

Por ejemplo, podríamos crear en él el siguiente componente WasmCounter.razor:

<h1>Wasm Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private void IncrementCount() => currentCount++;
}

Una vez tenemos el componente y el proyecto cliente de Blazor WebAssembly referenciado desde el proyecto MVC, debemos añadir algunos servicios y configuraciones en el archivo Program.cs, aunque para ello necesitaremos instalar previamente el paquete Microsoft.AspNetCore.Components.WebAssembly.Server.

Luego, bastará con registrar los servicios:

builder.Services.AddRazorComponents()
    // .AddInteractiveServerComponents() // Descomentar para usar también
                                         // componentes interactivos en el servidor
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
    // .AddInteractiveServerRenderMode() // Descomentar si usamos también
                                         // componentes interactivos en servidor
    .AddInteractiveWebAssemblyRenderMode();

De la misma forma que hicimos con los componentes interactivos en servidor, en la llamada a MapRazorComponents<T>(), el tipo T puede ser cualquier componente Blazor que tengamos en el proyecto, o bien un componente vacío como App.razor.

A partir de este momento, podemos renderizar el componente WasmCounter en cualquier vista MVC con el tag helper <component> y el modo de renderizado WebAssembly o WebAssemblyPrerendered:

<component type="typeof(WasmCounter)" render-mode="WebAssemblyPrerendered" />

Publicado en Variable not found.