Blazor - Passando dados entre Componentes

Hoje vamos aprender como passar dados entre Componentes no Blazor.

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.  

Passando dados entre componentes

A melhor maneira de transmitir dados entre as páginas em uma aplicação Blazor é registrar um serviço singleton e injetar o serviço como uma dependência nas páginas ou componentes necessários.

Neste artigo vamos criar uma classe de serviço usando código C#, vamos registrar essa classe como um serviço na aplicação Blazor, vamos depois injetar uma instância do serviço nas paginas da aplicação e usar o serviço para compartilhar dados entre os componentes do Blazor.

Essa abordagem permite passar parâmetros de um componente para outro mesmo se esses componentes estiverem em páginas diferentes. Isso além de manter seu código limpo, também garante que o usuário final tenha uma experiência consistente em todas as páginas do seu site. Além disso, o uso de uma classe de serviço permite que você passe dados de uma maneira que não exija o uso de parâmetros de roteamento.

Configuração Inicial

Crie um novo projeto Blazor do tipo WebAssembly chamado Blazor_App1 usando o VS 2019.(Veja como fazer isso em detalhes aqui).

Com o projeto pronto vamos criar uma pasta Services dentro da pasta Pages do projeto Blazor.

A seguir vamos incluir a declaração abaixo:

@using Blazor_App1.Pages.Services

No arquivo arquivo _Imports.razor do projeto:

Assim todos os demais componentes do projeto poderão acessar os componentes desta pasta.

Agora vamos criar uma classe chamada AppData.cs dentro da pasta Services e a seguir vamos criar o componente Pagina2.razor dentro da pasta Pages.

Criando a classe de Serviço

Nosso principal objetivo é poder definir o valor de uma propriedade em uma página de forma que outra página esteja ciente deste valor. Isso não é um relacionamento Pai-Filho oque vamos fazer é compartilhar dados comuns entre componentes irmãos.

Vamos abrir a classe AppData.cs e criar duas propriedades públicas nesta classe:

Definimos assim a propriedade públic Idade do tipo int e Sexo do tipo string.

Registrando o Serviço

Vamos agora registrar a classe como um serviço no contâiner de serviço da aplicação.

Abra o método Startup e inclua o código as seguir no método ConfigureServices:

Aqui incluimos a classe AppData (da pasta Services) com uma vida útil Singleton, usando o método AddSingleton<> () da interface IServiceCollection.

O Singleton é perfeito para um aplicativo Blazor do lado do cliente, mas se você estiver trabalhando com o Blazor do lado do servidor, desejará se registrar usando o tempo de vida Scoped, para que cada usuário diferente receba sua própria instância do serviço durante a sessão. (Ex: services.AddScoped<Pages.Services.AppData>(); )

Um Singleton permite que a mesma instância de uma classe de serviço seja compartilhada entre componentes. Isso é bom, porque você deseja garantir que todas as suas páginas recebam a mesma instância da classe de serviço AppData.

Isso vai garantir que os dados (ou seja, Idade e sexo) sejam compartilhados corretamente entre as páginas ao longo da vida útil do aplicativo.

Configurando a Pagina

Como queremos passar dados entre as páginas da aplicação Blazor ,  o componente Razor Index.razor será a primeira página.

Comece injetando a instância singleton do serviço AppData neste componente usando a diretiva @inject:

Injetamos uma instância do serviço definido na classe AppData com o nome AppData.

Este é o nome pelo qual você fará referência à instância de serviço no escopo do componente Index.razor.

Em seguida, criamos um formulário simples vinculando o valor do elemento input à propriedade Idade na instância AppData, e,  outro elemento input à propriedade Sexo.

A seguir definimos um link que direciona o usuário para uma página definida com a rota : "/pagina2".

Definindo o componente Pagina2

Vamos então definir o código do componente Pagina2.razor conforme abaixo:

Primeiro temos a diretiva @page definindo a rota para acessar este componente.

A seguir injetamos uma instância do serviço no componente e depois usamos essa instância para obter as informações de Idade e Sexo exibindo-as na página.

Veja o resultado obtido:

Vimos assim uma abordagem mais robusta para passar dados entre componentes usando um serviço Singleton.

Na próxima parte do artigo veremos como melhorar nossa experiência para atualizar dados de componentes.

"Tendo sido, pois, justificados pela fé, temos paz com Deus, por nosso Senhor Jesus Cristo;
Pelo qual também temos entrada pela fé a esta graça, na qual estamos firmes, e nos gloriamos na esperança da glória de Deus."
Romanos 5:1,2

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?


Referências:

José Carlos Macoratti