
Neste artigo, explicarei como você pode adicionar páginas baseadas no Blazor a um aplicativo Razor Pages existente.

Prefácio
Blazor será ouro em duas semanas . Muitas coisas no projeto ainda estão sujeitas a mudanças drásticas, e o último Preview 9 complicou significativamente a interação entre as páginas do Razor e os componentes do Blazor: não é mais possível passar parâmetros de uma página do Razor para um componente do Blazor usando
Html.RenderComponentAsync
. Isso pode mudar no futuro, mas é provável que no .NET Core 3.0 apareça com essa limitação.
Se você ainda deseja aprimorar seu aplicativo Razor Pages existente com a magia Blazor, uma solução é criar completamente suas páginas no Blazor. Neste artigo, vou mostrar como você pode adicionar Blazor Pages a um aplicativo Razor Pages existente, onde partes do aplicativo são construídas usando Razor Pages e outras usando Blazor Pages. O layout é o mesmo para os dois tipos de página .
Etapa um: suporte para Blazor
Portanto, temos um aplicativo Razor Pages existente que foi convertido para .NET Core 3.

Primeiro, você precisa adicionar o suporte do Blazor ao seu aplicativo. Este suporte permitirá que você renderize componentes do Blazor a partir de uma página do Razor. A documentação oficial o orienta por todo o processo, mas aqui está um rápido resumo.
Startup.cs:
Nós precisamos adicionar
Services.AddServerSideBlazor
para ConfigureServices
e endpoints.MapBlazorHub
em Configure
:

_Layout.cshtml : O Blazor
biblioteca JS é necessário para conectar Blazor no lado do servidor. Ele pode ser adicionado a
_Layout.cshtml
:

?
<script src="_framework/blazor.server.js"></script>
_Imports.razor:
Também precisamos de um novo arquivo chamado
_Imports.razor
. Deve ser adicionado à pasta Pages:

_Imports.razor
usado para definir as instruções de uso para os componentes do Blazor. Você pode começar com o seguinte
:?
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web
E isso é tudo . Nosso aplicativo agora suporta Blazor. Podemos verificar isso copiando o componente clássico do Contador em nosso aplicativo

?
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}
E edite
Privacy.cshtml
para incluir o componente Contador:
<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>
Agora, quando lançarmos o aplicativo, um Contador funcional deve aparecer em nossa página:

Na próxima parte deste artigo, mostrarei como você pode modificar seu aplicativo Razor Pages para que, em vez de apenas adicionar componentes às páginas existentes, você possa criar páginas Blazor completas.
Etapa dois: suporte para páginas do Blazor
Nosso componente Blazor define uma rota
“/counter”
:

Mas segui-lo não funciona:

nosso objetivo é fazer com que o roteamento para as páginas do Blazor funcione. E queremos que as páginas do Blazor usem o mesmo layout das páginas do Razor. Precisamos de algumas coisas para fazer isso, começando com o roteador .
App.razor:
Crie um novo arquivo
App.razor
na pastaPages
:

Componente Router é definida em
App.razor
:
?
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"/>
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
</Router>
O roteador verifica automaticamente todos os componentes do Blazor usando a diretiva de página e adiciona rotas a eles.
_Host.cshtml:
Também precisamos de uma página para hospedar as páginas do Blazor. Ele pode ser chamado como você quiser, mas os modelos do Blazor são usados por padrão
_Host.cshtml
, o que é bom para nós (assim como para qualquer outro). Em _Host.cshtml
podemos definir um layout, que no nosso caso será o mesmo das páginas do Razor.

_Host.cshtml
contém a chamada Html.RenderComponentAsync
:
?
@page "/blazor"
@{
Layout = "_Layout";
}
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
Startup.cs:
E, finalmente, uma pequena adição ao método
Configure Startup.cs
. Anteriormente, adicionamos MapBlazorHub
e agora precisamos adicionar uma chamada MapFallbackToPage
apontando para o novo _Host.cshtml
:

E é isso! Agora só precisamos testar nossa configuração. Adicione um Contador de Página Blazor (Contador) ao seu layout editando
Pages/Shared/_Layout.cshtml
:

Quando lançamos o aplicativo, vemos uma página Blazor funcionando em nosso aplicativo Páginas Razor:

E não quebramos o suporte para adicionar componentes Blazor a Páginas Razor:

Notas
Algumas coisas a serem observadas:
- As rotas do Blazor só funcionam quando apontam para a raiz. Se “/ contador” for alterado para, por exemplo, a
“/products/counter”
página não será capaz de carregar o necessárioblazor.server.js
. Em vez disso, obteremos um 404. Deve ser possível alterar a tag do script para que possa carregar o script necessário independentemente da localização, mas parece que mudou de pré-8 para pré-9 e não consegui fazer funcionar. Aqui está uma captura de tela 404 mostrando o problema: - Se você conseguir carregar o script, provavelmente terá os mesmos problemas com o hub Blazor: os scripts tentam localizar o hub em / products / blazor em vez de blazor. Para contornar isso, você pode iniciar manualmente uma conexão entre o servidor e o navegador:
?
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
configureSignalR: function (builder) {
builder.withUrl('/_blazor');
}
});
</script>
Código de amostra
O código de amostra para este projeto está disponível no GitHub .
Quer saber mais sobre nosso curso? Aqui está .