Hace no demasiado, mientras analizábamos la posibilidad de que Blazor acabara en algún momento sustituyendo a MVC como tecnología "por defecto" para el desarrollo de aplicaciones web en .NET, comentaba que técnicamente no hay nada que impida a ambas tecnologías convivir pacíficamente en una misma aplicación. De hecho, están diseñadas para trabajar juntas :)

En este sentido, uno de los escenarios soportados es la inserción de componentes Blazor en el interior de vistas de una aplicación ASP.NET Core MVC. Esto puede ser muy interesante, entre otros casos, si queremos ir introduciendo Blazor progresivamente en aplicaciones MVC existentes o para reutilizar componentes entre distintos proyectos.

En esta miniserie vamos a ver cómo conseguirlo con los distintos modos de renderizado de Blazor, porque cada uno tiene sus particularidades:

• Renderizado estático (SSR), lo que veremos en este post.
• Renderizado en servidor (Blazor Server), en un futuro post.
• Renderizado en cliente (Blazor WebAssembly), también en un artículo posterior.

Renderizar estáticamente componentes Blazor en vistas MVC (SSR)

La inserción de componentes Blazor en vistas MVC es trivial. Basta con utilizar el tag helper <component> en el interior de la vista, como se muestra a continuación:

<component type="typeof(MyComponent)" render-mode="Static" />

El parámetro type indica el tipo del componente que se desea renderizar. En el ejemplo, MyComponent haría referencia a un componente Blazor que se encuentra en el proyecto, habitualmente en el archivo MyComponent.razor. Obviamente, será necesario cualificarlo por completo, o bien usar la directiva @using para ponerlo a tiro.  

El parámetro render-mode indica el modo de renderizado del componente; más adelante veremos otros ejemplos, pero en este caso estamos utilizando el valor Static, que indica que el componente se renderizará de forma estática en el servidor y no dispondrá de capacidades interactivas, es decir, no será capaz de procesar eventos de usuario ni manipular el DOM una vez sea entregado al lado cliente.

Y no hay que hacer nada más :) El componente MyComponent se renderizará y el HTML resultante se insertará en la vista como parte del proceso de renderizado de la misma en el lado servidor. No hay que configurar servicios, ni registrar rutas, ni añadir middlewares ni nada por el estilo: todo viene de serie ya configurado en los proyectos MVC.

Por si queréis ver cómo hacerlo paso a paso para probarlo en directo, implementemos un ejemplo simple. Sobre un proyecto ASP.NET Core MVC recién creado, añadimos el siguiente archivo Counter.razor en una carpeta llamada /Components (nombre arbitrario) del proyecto:

<h3>Counter</h3>
<p>Current count: @CurrentCount</p>

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

@code {

    [Parameter]
    public int CurrentCount { get; set; } = 0;

    private void IncrementCount()
    {
        CurrentCount++;
    }
}

Para insertar este componente en la vista Index.cshtml de la aplicación, añadimos el siguiente código:

@using MvcWithBlazor.Components
...

<div class="text-center">
    <component type="typeof(Counter)" render-mode="Static" />
</div>

Obviamente, el espacio de nombres del using dependerá del nombre de vuestro proyecto.

Al ejecutar la aplicación, veremos que el componente Counter se renderiza correctamente en la vista Index.cshtml, aunque el botón de incremento del contador no funcionará, ya que el componente se ha renderizado de forma estática.

Si se trata de un componente parametrizado, como el Counter que hemos visto algo más arriba, es posible pasarle valores iniciales desde la vista MVC. Para ello, debemos añadir atributos llamados param- seguidos del nombre del parámetro del componente. Por ejemplo, a continuación se muestra cómo establecer un valor inicial al contador del componente Counter:

<component type="typeof(Counter)" render-mode="Static" param-CurrentCount="10" />

¡Y esto es todo! Siguiendo los pasos anteriores, ya sabemos cómo insertar componentes estáticos renderizados en el servidor, e incluso pasarle parámetros cuando sea necesario.

En los siguientes posts veremos cómo hacer lo mismo pero con componentes dinámicos, tanto ejecutados en el lado servidor como en el lado cliente 🙂

Publicado en Variable not found.