Blazor -  O Roteamento no Blazor

Hoje veremos como definir e configurar as rotas e o roteamento em aplicações Blazor.

A seguir veremos as opções que temos disponíveis nas aplicações Blazor para realizar, controlar e definir o roteamento.

Rotas e Roteamento

Uma rota é um padrão URL e o roteamento é um processo de correspondência de padrões que monitora as requisições e determina o que fazer com cada requisição.

As aplicações do lado do servidor (Blazor Server app) usam o roteamento de endpoit da ASP.net Core. Usando o método de extensão MapBlazorHub do endpoint de roteamento, a ASP.Net Core é inicializada para aceitar a conexão de entrada para o componente Blazor.

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
    {  
      ....  
        app.UseRouting();       

        app.UseEndpoints(endpoints =>  
        {  
            endpoints.MapBlazorHub();  
            endpoints.MapFallbackToPage("/_Host");  
        });  
    }  

As aplicações do lado do servidor (Blazor Server app) permitem definir a rota de fallback que opera  com baixa prioridade na correspondência de roteamento. A rota de fallback é considerada apenas quando outras rotas não são correspondidas, sendo definida no componente _Host.cshtml.

Os aplicativos do lado do cliente (Blazor Client app) fornecem o roteamento do lado do cliente. O roteador está configurado no aplicativo cliente Blazor no arquivo App.cshtml.

    <Router AppAssembly="@typeof(Program).Assembly"/>  

A diretiva @page

Usando a diretiva @page, você pode definir o roteamento no componente Blazor. Essas diretivas são convertidas internamente em RouteAttribute quando o modelo é compilado, e, geralmente você usa essa diretiva em um componente criado na pasta Pages do projeto Blazor.

   @page "/rota1"  

Um componente Blazor pode possuir mais de uma rota, e, se exigirmos que o componente renderize a partir de muitos valores de rotas temos que definir cada rota com uma diretiva @page:

   @page "/rota1"  
   @page "/rota2"  
   @page "/rota3"  

Além disso o roteador pode usar parâmetros de rota para popular os parâmetros de componente correspondentes com o mesmo nome (não diferencia maiúsculas de minúsculas):

@page "/RouteParameter/{texto}"

<h1>Blazor é @Texto!</h1>

@code {
    [Parameter]
    public string Texto { get; set; }

    protected override void OnInitialized()
    {
        Texto = Texto ?? "fantástico";
    }
}

Aqui o parâmetro esta definido entre colchetes {texto}.

Obs: Atualmente não existe suporte para parâmetros opcionais.

Podemos também definir restrições de rota e impor uma correspondência de tipo em um segmento de rota para um componente. Exemplo:

@page "/rota1/{Id:int}"

<h1>O Id é igual a @Id!</h1>

@code {
    [Parameter]
    public int Id { get; set; }
}

Aqui temos que :

• Um segmento de rota Id está presente na URL da requisição.
• O segmento de Id é um inteiro (int).

A seguir temos a restrições de rotas disponíveis:

RouteAttribute

Se você esta utilizando o componente somente de classe (abordagem code-behind) pode usar o atributo RouteAttribute :

    using Microsoft.AspNetCore.Components;        

    namespace BlazorServerApp.Pages  
    {  
        [Route("/rota1")]  
        public class MeuComponent: ComponentBase  
        {  
           ...  
        }  
    }  

O template Route

O mecanismo Router (do roteador) permite definir o roteamento para cada componente. O modelo de rota é definido no arquivo App.razor. Aqui, podemos definir a página de layout padrão e os dados de rota padrão:

        <Router AppAssembly="@typeof(Program).Assembly">  
        <Found Context="routeData">  
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />  
        </Found>  
        <NotFound>  
            <LayoutView Layout="@typeof(MainLayout)">  
                <p>Sorry, there's nothing at this address.</p>  
            </LayoutView>  
        </NotFound>  
     </Router>  

No código acima, três componentes são definidos no componente Router: Found, NotFound e RouteView.

O componente RouteView recebe os dados da rota e o layout padrão. O mecanismo de roteamento Blazor processa o componente Found, e, se qualquer rota não corresponder, ele renderiza o componente NotFound.

Assim, o componente NotFound nos permite fornecer mensagens personalizadas quando a rota ou o conteúdo não for encontrado.

Nota: Para que as URLs sejam resolvidas corretamente, o aplicativo deve incluir uma marca de <base> em seu arquivo wwwroot/index.html (Webassembly) ou arquivo pages/_Host. cshtml (servidor) com o caminho base do aplicativo especificado no atributo href (<base href="/">).

O componente NavLink

O Blazor fornece o componente NavLink que gera o elemento de hiperlink HTML e manipula a alternância da classe CSS ativa com base na correspondência href do componente NavLink com a URL atual.

Existem duas opções para fazer uma atribuição corresponder a um atributo do componente NavLink:

• NavLinkMatch.All:  Ativo quando corresponde a toda a URL atual;
• NavLinkMatch.Prefix: É uma opção padrão. Ativo quando corresponde a qualquer prefixo do URL atual;

O componente NavLink é renderizado como a âncora tag. Você também pode incluir o atributo de destino.

Navegando de um componente para outro via código

O Blazor também permite navegar de um componente para outro componente via código usando os recursos do namespace Microsoft.AspNetCore.Components.NavigationManager.

O serviço NavigationManager fornece os seguintes eventos e propriedades.

Desta forma, para navegar para uma URI usando o serviço NavigationManager, você deve injetar o serviço usando a diretiva @inject no componente e pode usar o método NavigateTo para navegar de um componente para outro.

Exemplo:

    @page "/teste"  
    @inject NavigationManager _navigate     

    <button class="btn btn-primary" @onclick="NavegarParaComponente">
         Navegar para outro componente
    </button>      

    @code {  
        void NavegarParaComponente()  
        {  
            _navigate.NavigateTo("Novo_Componente");  
        }  
    }  

Assim, temos muitas opções para realizar o roteamento em aplicações Blazor, e, com certeza com a evolução da ferramenta, algumas das limitações existentes serão superadas.

"Os meus olhos estão continuamente no Senhor, pois ele tirará os meus pés da rede."
Salmos 25:15

Referências:

• ASP .NET Core 2 - MiniCurso Básico - Macoratti

• ASP .NET Core MVC - CRUD básico com ADO .NET - Macoratti

• ASP .NET Core - Implementando a segurança com ... - Macoratti

• ASP .NET Core - Iniciando com ASP .NET Core MVC e ... - Macoratti

• ASP .NET Core MVC - Criando um site com MySql e EF ... - Macoratti

• ASP .NET Core - Gerenciador de Despesas Pessoais com ... - Macoratti

• Minicurso ASP .NET Core 2.0 - Apresentando MVC - YouTube

• ASP .NET Core - Configurando o ambiente de ... - Macoratti

• ASP .NET Core e EF Core - Configurando o ambiente - Macoratti

• ASP .NET Core - Como configurar o AutoMapper - Macoratti

• Blazor - Introdução - Macoratti

• ASP .NET Core - CRUD usando Blazor e Entity ... - Macoratti

José Carlos Macoratti