Blazor... O bom e velho .Net agora rodando no navegador, sem precisar de plugins. E não é bruxaria tipo Silverlight. É só .Net, mas agora ele está em ação com o WebAssembly. A Microsoft aposta no Blazor como nova arma no ASP.NET. Quer mais? Confira: Blazor - Agora é oficialmente do ASP.NET.

Pegue seu café e VAMOS AO CÓDIGO!

Laptop aberto em mesa de café mostrando código ao lado de bolo de chocolate na sala com sofá

Vamos criar um app Blazor. Não vou ficar te mimando! O resultado final está aqui, mas siga o passo a passo se for corajoso.

Antes de começar, veja os pré-requisitos.

Pré-Requisitos

  • Visual Studio 2017 v15.7 ou mais recente - Baixar
  • .Net Framework 2.1 Preview 2 - Baixar
  • Extensão do Visual Studio - Baixar
  • SQL Server - Baixar

Agora que está tudo prontinho, vamos nessa! Pronto para começar?

Criando uma aplicação Blazor

Crie um projeto Blazor: (File > New > Project > .NET Core > ASP.NET Core Web Application). Na próxima tela, escolha Blazor e clique em OK.

novoProjeto

blazor

Três projetos vão aparecer:

blazorStructure

  • Client: O frontend! O .Net no navegador.
  • Server: Faz o papel do servidor.
  • Shared: Código compartilhado entre cliente e servidor.

Projeto BlazorBasico.Shared

Aqui será rápido. Faça pequenas mudanças.

Crie uma pasta Models e adicione a classe Produto.

Projeto BlazorBasico.Server

Adicione o EntityFramework ao projeto Server. Vá em Manage Nuget Packages e procure por Microsoft.EntityFrameworkCore.SqlServer. Use a versão 2.1.0.

Em seguida, crie uma pasta Context e adicione a classe BlazorDBContext.cs com o código abaixo.

Esta classe irá configurar o banco e fazer migrations.

Use os comandos no Package Manager:

Configure o contexto visualmente.

packagemanager

Adicione uma nova Controller chamada ProdutoController e coloque o código nela.

BlazorBasico.Client

Exclua os arquivos Counter e FetchData.

Crie um novo Razor Pages na pasta Pages, chame de Produto.cshtml.

Serão criados dois arquivos: Produto.cshtml e Produto.cshtml.cs.

No Produto.cshtml.cs, adicione:

O que foi feito

O HttpClient realiza chamadas API. IUriHelper ajuda com URLs. OnParametersSetAsync é chamado quando a rota é ativada.

Produto.cshtml

Use o Razor nesse arquivo conforme suas necessidades.

wwwroot/index.html

Substitua o conteúdo:

wwwroot/css/site.css

Atualize com estas regras:

Agora, rode o projeto e teste!

Download

Clippy Octocat

Código disponível no GitHub.

Atenção: Anti-vírus

O Kaspersky pode bloquear seu projeto. Cuidado com o mono.js! Desative se precisar.