Este post pertenece a una serie de tres partes donde estamos viendo cómo renderizar componentes Blazor en vistas MVC de ASP.NET Core.

En la primera parte de la serie vimos cómo renderizar componentes estáticos (SSR) en servidor, y ahora vamos a centrarnos en hacerlo con componentes con interactividad también en el lado servidor (Blazor Server), dejando para una siguiente entrega los componentes interactivos ejecutados por completo en cliente con WebAssembly.

Renderizar componentes Blazor Server en vistas MVC

En el post anterior vimos lo sencillo que era renderizar un componente Blazor sin interactividad, pues consite simplemente en utilizar el tag helper <component> con el modo de renderizado Static.

Renderizar componentes interactivos ejecutados en el lado servidor (Blazor Server) es algo más complejo, dado que los componentes interactivos requieren algunos cambios en el componente o su entorno y un poco más de configuración.

Primero, para que las directivas de eventos como @onclick funcionen, aparte de que el componente sea renderizado de forma interactiva, necesitamos que éste importe el espacio de nombres Microsoft.AspNetCore.Components.Web. De lo contrario, estos eventos no serán capturados por Blazor porque la directiva @onclick no será interpretada en el momento de la compilación, y simplemente será incluida tal cual como atributo en el HTML enviado al cliente.

Esto es muy sencillo, basta con añadir la siguiente línea al componente o, mejor aún, en un archivo de importaciones _Imports.razor creado en la raíz de la carpeta de componentes:

@using Microsoft.AspNetCore.Components.Web

Asegurado este punto, vamos ahora con la configuración de la aplicación. En primer lugar, necesitamos añadir al proyecto ASP.NET Core MVC los servicios de componentes interactivos en servidor. Para ello, en el código de inicialización, en Program.cs, debemos insertar la llamada a AddServerSideBlazor() sobre la colección de servicios de la aplicación:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorComponents()   // Insertar estas 
    .AddInteractiveServerComponents();  // dos líneas

// Otras configuraciones
...

Aparte, ya en la zona de mapeo de endpoints, debemos insertar las líneas siguientes. Son las encargadas, entre otras cosas, de configurar el hub SignalR encargado de gestionar la comunicación entre el servidor y el componente Blazor en el lado cliente:

...
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorComponents<App>()          // Insertar estas 
    .AddInteractiveServerRenderMode(); // dos líneas

app.Run();

Ojo a esa llamada a MapRazorComponents<T>(), donde estamos configurando el componente raíz de la aplicación Blazor interactiva. El parámetro genérico T es obligatorio y debería ser el componente Blazor que actuará como componente raíz de la aplicación.

Sin embargo, en nuestro caso no necesitamos un componente raíz de la aplicación porque sólo queremos renderizar componentes específicos con el tag helper <component>. Por esta razón podemos poner ahí cualquier componente que tengamos en el proyecto, es decir, podemos crear un archivo Components/App.razor sin contenido (esta es la opción recomendada en la documentación oficial), o bien utilizar directamente un componente existente:

app.MapRazorComponents<Counter>()          // Insertar estas 
    .AddInteractiveServerRenderMode();     // dos líneas

Por último, en el layout de la aplicación MVC, o bien en la sección Scripts de la página donde queramos insertar el componente Blazor, hay que añadir la referencia al script de Blazor:

<script src="_framework/blazor.web.js"></script>

¡Esto es todo! Ya podemos insertar un componente interactivo en servidor, simplemente indicando el modo de renderizado Server en el tag helper <component>, justo en el lugar de la vista MVC donde queramos que aparezca:

<component type="typeof(Counter)" render-mode="Server" />

Si queremos que, además, el componente se prerenderice antes de iniciar los mecanimos de interactividad, en render-mode podemos especificar el valor ServerPrerendered.

En la próxima entrega de la serie veremos cómo renderizar desde una vista MVC componentes Blazor ejecutados por completo en el lado cliente con WebAssembly.

Publicado en Variable not found.