ASP .NET Core - Iniciando com o Blazor

 Hoje vamos criar nossa primeira aplicação usando o Blazor.    

A Microsoft anunciou recentemente o lançamento de um novo framework web - o Blazor que eu apresentei neste artigo : Blazor - O novo framework SPA da Microsoft - Macoratti

Hoje, vamos configurar o ambiente de desenvolvimento do Blazor em nossa máquina e executar nossa primeira aplicação ASP.NET Core usando o Blazor e o Visual Studio 2017.

O Blazor é um novo framework para criar aplicativos do lado do cliente usando C#, Razor e HTML que são executados no navegador com o WebAssembly.

Mas o que vem a ser esse WebAssembly ?

O WebAssembly (ou apenas Wasm) é uma linguagem assembly de baixo nível com um formato binário compacto que pode ser executado nos navegadores. Como é um código binário de baixo nível, ele não pode ser lido/escrito por humanos, mas podemos compilar o código de outras linguagens para o WebAssembly para facilitar sua execução no navegador.

Assim, ele é um subconjunto da linguagem JavaScript sendo projetado para complementar e executar ao lado do JavaScript. Ele nos permite executar código escrito em vários idiomas na Web, com velocidade quase nativa. (O WebAssembly foi desenvolvido como um padrão web e é suportado por todos os principais navegadores sem plugins.)

Os pré-requisitos para poder criar aplicações usando o Blazor são:

  • Instalar o  .NET Core 2.1 SDK. Pegue aqui
  • Instalar a última versão do Visual Studio 2017 (15.7). Pegue aqui
Nota: O Blazor não é suportado em versões do Visual Studio anteriores a versão v15.7 e precisa do .NET Core SDK 2.1

No Blazor, um componente é uma classe .NET, que você pode escrever diretamente (por exemplo, como uma classe C#) ou mais comumente na forma de uma página Razor (ou seja, um arquivo .cshtml).

Quando você cria um novo projeto, o Blazor oferece as principais funcionalidades que a maioria dos aplicativos precisa. Isso inclui:

  • Layouts
  • Roteamento
  • Injeção de dependência
  • Lazy Loading ou Carregamento lento (isto é, carregar partes do aplicativo sob demanda à medida que o usuário navega)
  • Testes Unitários

Sendo que tudo isso é opcional. Você usa se quiser.
 
Se você estiver no Linux ou no Mac pode criar uma aplicação Blazor na linha de comando:
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run
Nota: Antes você tem que instalar os templates para o Blazor :
dotnet new --install "Microsoft.AspNetCore.Blazor.Templates" 
Para ver lista de templates disponíveis acesse: https://dotnetnew.azurewebsites.net/

Iniciando o desenvolvimento com Blazor

A primeira coisa a fazer para iniciar o desenvolvimento com Blazor é instalar a :  “ASP.NET Core Blazor Language Services extension”  que você pode obter neste link aqui.

Após fazer o download e instalar o pacote, ao final você verá a mensagem abaixo:

Após esse procedimento abra o VS 2017 Community e selecione File ->New Project;

Selecione .NET Core e o template ASP .NET Core Web Application e informe o nome Blazor_Demo e clique em OK;

Na próxima janela selecione o template Blazor e clique em OK:

 

Na janela Solution Explorer podemos ver a estrutura do projeto criado conforme mostra a imagem a seguir:

Temos uma pasta Pages onde vamos incluir as views da nossa aplicação que serão renderizadas no navegador.

 

Executando o projeto iremos obter no navegador o seguinte resultado:

Vemos na página inicial o menu lateral esquerdo com 3 opções : Home, Counter e Fetch Data (igual a template do Angular)

Cada uma dessas páginas é a implementação dos arquivos Razor contido na pasta Pages:

  1. Index.cshtml
  2. Counter.cshtml
  3. FetchData.cshtml

E cada um desses arquivos implementa um componente Blazor que é compilado e executado no lado do cliente no navegador.

Na opção Counter a página exibe um Button(Click me) que ao ser clicando incrementa o contador:

Assim, cada vez que o botão for clicado, o contador é incrementado sem uma atualização de página. Normalmente, esse tipo de comportamento do lado do cliente é tratado via JavaScript; mas aqui, ele é implementado em C# e .NET pelo componente Counter.

Vamos dar uma olhada na implementação do componente Counter no arquivo Counter.cshtml:

A interface do usuário para o componente Counter é definida usando código HTML normal.

A lógica de renderização dinâmica (por exemplo, loops, condicionais, expressões) é adicionada usando uma sintaxe do C# incorporada chamada Razor. A marcação HTML e a lógica de renderização C# são convertidas em uma classe de componente no momento da criação. O nome da classe .NET gerada corresponde ao nome do arquivo.

Os membros da classe do componente são definidos em um bloco @functions. No bloco @functions, o estado do componente (propriedades, campos) e os métodos podem ser especificados para tratamento de eventos ou para definir outra lógica de componentes. Esses membros podem ser usados como parte da lógica de renderização do componente e para manipular eventos.

Quando o botão da página for clicado, o manipulador onclick registrado do componente Counter é chamado (o método IncrementCount) e o componente Counter regenera sua árvore de renderização. O Blazor compara a nova árvore de renderização com a anterior e aplica quaisquer modificações no navegador Document Object Model (DOM). A contagem exibida é então atualizada.

Vamos alterar o código do arquivo Counter.cshtml conforme a figura abaixo:

Executando novamente agora iremos obter:

Usando Componentes

Depois que um componente é definido, o componente pode ser usado para implementar outros componentes. A marcação para usar um componente se parece com uma tag HTML em que o nome da tag é o tipo de componente.

Abra o arquivo Index.cshtml e inclua a tag para incluir o componente Counter nesta página:

Execute novamente a aplicação e agora observe a página para a opção Home:

Usando parâmetros de Componentes

Os componentes também podem ter parâmetros, que são definidos usando propriedades privadas na classe de componentes decorada com o atributo [Parameter]. Use atributos para especificar argumentos para um componente na marcação.

Vamos agora atualizar o componente Counter para ter uma propriedade IncrementaQuantidade cujo valor padrão seja igual a 1.

Abra o arquivo Counter.cshtml e altere o código conforme abaixo:

Após isso abra o arquivo Index.cshtml e altere a quantidade de incremento do Counter para 10 definindo um atributo que corresponda ao nome da propriedade do componente para IncrementaQuantidade.

Executando novamente veremos o parâmetro em ação:

Roteamento para componentes

A diretiva @page na parte superior do arquivo Counter.cshtml especifica que esse componente é uma página para a qual as solicitações podem ser roteadas. Especificamente, o componente Counter manipula requisições enviadas para /counter.

Sem a diretiva @page, o componente não manipularia solicitações roteadas, mas o componente ainda poderia ser usado por outros componentes.

Injeção de dependência

Os serviços registrados com o provedor de serviços do aplicativo estão disponíveis para os componentes por meio de injeção de dependência (DI). Os serviços podem ser injetados em um componente usando a diretiva @inject.

Dê uma olhada na implementação do componente FetchData em FetchData.cshtml. A diretiva @inject é usada para injetar uma instância HttpClient no componente.

O componente FetchData usa o HttpClient injetado para recuperar dados JSON do servidor quando o componente é inicializado.

Nos bastidores, o HttpClient fornecido pelo runtime do Blazor é implementado usando interop JavaScript para chamar a API de busca do navegador subjacente para enviar a requisição (a partir de C#, é possível chamar qualquer biblioteca JavaScript ou API do navegador).

Os dados recuperados são desserializados na variável C# forecasts como uma matriz de objetos do WeatherForecast.

A seguir um laço foreach é usado para renderizar cada instância de forecast como uma linha na tabela :

E é assim que funciona a nossa primeira aplicação Blazor.

Aguarde mais artigos sobre o Blazor em breve...

"Vinde a mim, todos os que estais cansados e oprimidos, e eu vos aliviarei."(disse Jesus)
Mateus 11:28

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