Injeção de Dependência HttpClient no Blazor
Para quem trabalha com projetos na WEB, implementar injeção de dependência (DI) é comum. Isto significa que você pode ter diversos pacotes de bibliotecas no projeto e invocá-lo no devido momento, em tempo de execução.
O objetivo deste artigo é mostrar como que a DI é implementada em projetos Blazor. Para quem não conhece o Blazor, leia este artigo introdutório para entender como rodar códigos C# diretamente no navegador.
O projeto será feito no Visual Studio 2017, versão 15.8, portanto, abra o VS, selecione File / New / Project. Selecione o template Web / ASP.NET Core Web Application. O nome do projeto é BlazorDI, clique em OK e na tela aberta a seguir, selecione o template Blazor (ASP.NET Core hosted).
Clique no botão OK, aguarde o VS criar o projeto e fazer download das bibliotecas do Blazor diretamente do NUGET. Note no Solution Explorer que foram criados 3 projetos, sendo:
BlazorDI.Client — projeto a ser executado no cliente (navegador), o qual contém as páginas cshtml e a referência do projeto BlazorDI.Shared para ter acesso a classe WeatherForecast. Neste Client temos as DLLs Microsoft.AspNetCore.Blazor.Browser, Microsoft.AspNetCore.Blazor.Build e NETStandard.Library.
BlazorDI.Server — projeto que será o servidor, contendo o controller SampleDataController.cs que irá expor serviços via API, ou seja, retorna JSON para quem solicitar. Este projeto tem referência dos outros 2 projetos e das DLLs Microsoft.AspNetCore.App, Microsoft.AspNetCore.Blazor.Server, Microsoft.AspNetCore.Razor.Design, Microsoft.AspNetCore.App e Microsoft.NETCore.App.
BlazorDI.Shared — projeto que contém a classe WeatherForecast.cs que será compartilhada nos outros 2 projetos e a DLL NETStandard.Library.
Note que tudo está baseado nas bibliotecas do ASP.NET Core e .NET Standard.
Serviços via API — JSON
O primeiro passo para entender os códigos é analisar o Controller SampleDataController que irá fornecer dados via serviços API que retorna JSON para quem solicitar. Isto será feito pelo método WeatherForecasts() que cria uma coleção de 5 objetos do tipo WeatherForecasts (classe contida no BlazorDI.Shared) com dados randômicos, somente para gerar um conjunto de dados. No mundo real, isto viria de um serviço na WEB, a ideia é a mesma.
Já no projeto BlazorDI.Shared tem a classe WeatherForecast com 4 propriedades que serão usadas nos outros projetos.
UI que consumirá o serviço API
Vamos direto ao ponto e analisar a página fetchdata.cshtml do projeto BlazorDI.Client, afinal esta é a página que o usuário irá visualizar todos os dados. Segundo a listagem a seguir, na primeira linha está referenciado o projeto @ using BlazorDI.Shared, o qual é necessário para se ter acesso à classe WeatherForecast.cs.
Em seguida, a diretiva @page “/fetchdata” define a rota que será invocada na linha <NavLink class=”nav-link” href=”fetchdata”> do arquivo NavMenu.cshtml.
Agora vem o foco do artigo que é a declaração da injeção de dependência diretamente na página. Como todo serviço de API é exposto via HTTP, é necessário declarar a diretiva @inject HttpClient Http, onde HttpClient é uma classe de System.Net.Http. Sendo assim, quando for preciso injetar qualquer dependência, basta usar o @ inject seguido da sua classe.
Veja o código do @ if que verifica se a variável forecasts está nula. Caso verdadeiro, mostra a mensagem Carregando, enquanto os dados não chegam da API. Caso falso, mostra a tabela com a previsão do tempo.
Os códigos que solicitam serviços são normalmente feitos de forma assíncrona, para não travar a app até que todos os dados cheguem. Este bloco de código Razor @ functions {} escrito em C# declara uma variável forecasts do tipo array de WeatherForecast[]. Esta mesma variável forecasts é usada no looping @foreach (var forecast in forecasts) para percorrer todos os dados lidos da API.
Em seguida, há o método OnInitAsync() que é assíncrono, que tem como objetivo invocar a API WeatherForecasts do Controller SampleDataController.cs que irá expor os dados via JSON. Por isto é usado o Http.GetJsonAsync do tipo array WeatherForecast[]. Pronto, esta API está exposta para quem quiser consumir em qualquer aplicação.
Por fim, pressione F5 para executar a aplicação no Chrome. Sugiro você usar a ferramenta de desenvolvedor do Browser (F12) para visualizar o tráfego de rede (guia Network).
Clique no menu Fetch data e aguarde o retorno dos dados. Veja que os dados são mostrados conforme o layout da tabela do HTML, mas nos bastidores, veja que apenas os dados JSON foram transferidos. Isto significa que temos uma página Blazor rodando no navegador, com códigos escritos na linguagem C#, que trafega apenas as informações necessárias (neste caso, dados da API), sem fazer qualquer tipo de Postback dos demais elementos da página.
Conclusão
A forma de trabalhar com injeção de dependência diretamente na página cshtml no Blazor é similar a usada no ASP.NET Core, deixando o código limpo, de fácil manutenção, trafegando somente as informações necessárias, e o melhor de tudo, escrito em C# diretamente no Browser, graças ao WebAssembly.
Boa sorte, sucesso nos projetos e se precisar treinar o seu time, fale comigo rehaddad@msn.com
