Blazor - Usando componentes com ASP .NET MVC

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.

O Blazor permite que você crie interfaces de usuário da web interativas usando C# em vez de JavaScript.

Os aplicativos Blazor são compostos de componentes de IU da web reutilizáveis, implementados em C#, HTML e CSS. Embora você possa fazer um aplicativo completo no Blazor, talvez não queira reescrever seus aplicativos ASP.NET Core MVC existentes para aproveitar as vantagens do Blazor.

Neste caso você pode integrar os componentes do Blazor em um aplicativo MVC existente e também em aplicações Razor Pages.

Neste artigo vamos criar um projeto Razor Pages padrão e incluir um componente Blazor integrando-o com nosso aplicação Razor Pages.

ASP .NET Core 5
Componente Blazor

Criando o projeto Razor Page

Vamos criar um projeto ASP .NET Core Razor Pages no VS 2019 Community chamado RazorPage_Blazor;

Observe que eu já estou usando o ASP .NET Core 5.0 mas podemos usar também a ASP .NET Core 3.1.

Configurando o projeto para usar o componente Blazor

Vamos agora realizar algumas configurações no projeto Razor Page criado para poder usar o componente Blazor.

Na raiz do projeto crie o componente _Imports.razor e defina os namespaces abaixo neste arquivo:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using RazorPage_Blazor

Na pasta Pages (ou outra pasta) crie um componente Blazor chamado Contador.razor que iremos usar no projeto.

O código deste componente é o mesmo gerado no template padrão do Blazor para o componente Counter.razor.

<h2>Olá sou um componente Blazor</h2>

<h2>Contagem Atual: @currentCount</h2>

<button class="btn btn-primary" @onclick="IncrementCount">Clique aqui</button>

@code {
   private int currentCount = 0;

   [Parameter]
   public int InitialValue { get; set; }

   private void IncrementCount() => currentCount++;

   protected override void OnParametersSet()
   {
       currentCount = InitialValue;
   }
}

Vamos alterar o código do arquivo Startup para incluir :

O serviço Blazor : services.AddServerSideBlazor()
O mapeamento requerido para o endpoint : endpoints.MapBlazorHub()

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace RazorPage_Blazor
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            // inclua esta linha
            services.AddServerSideBlazor();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. 
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();

                // inclua esta linha
                endpoints.MapBlazorHub();
            });
        }
    }
}

Finalmente abra o arquivo Index.cshtm da pasta Pages e integre o componente Blazor usando o tag helper component e adicione o script Blazor:

@page
@model IndexModel

@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h2 class="display-4">Usando componente Blazor </h2>
</div>

<hr />

<component type="typeof(RazorPage_Blazor.Pages.Contador)" param-InitialValue="0" render-mode="Server" />

@section Scripts {
    <script src="_framework/blazor.server.js"></script>
}

Agora é só alegria...

Executando o projeto veremos o componente exibido na página e poderemos interagir com o contador da mesma forma que na aplicação Blazor:

Para fazer a integração de um componente Blazor em uma aplicação ASP .NET Core MVC basta seguir os mesmos procedimentos.

Pegue o projeto aqui: RazorPage_Blazor.zip

"Foge também das paixões da mocidade; e segue a justiça, a fé, o amor, e a paz com os que, com um coração puro, invocam o Senhor."
2 Timóteo 2:22