DEV Community: Gustavo Bellini Bigardi

ASP.NET Core 3.0 Preview 8 - Novidades do Blazor - Estrutura e código

Gustavo Bellini Bigardi — Thu, 22 Aug 2019 20:11:38 +0000

Salve galera!

Continuando com as novidades do Blazor no relase do .NET Core 3.0 Preview 8, vamos as alterações de código!

Case-sensitive component binding

A partir desta versão, os componentes criados através de arquivos com a extensão .razor são sensíveis a caixa alta / baixa.

Por que isso? Antes, se fosse necessário criar um componente Button, por exemplo, com funcionalidades extras, estilizado como um botão primário, teríamos conflito com o elemento <button> do HTML. Agora que foi habilitado o "case-sensitive" para componentes, não temos mais esse problema.

Abaixo o exemplo que foi utilizado no Blog do ASP.NET Core, onde usamos uma tag <button> dentro dele e algumas funcionalidades extras, como incrementar um contador.

Agora, um teste para você fazer… Tente renomear seu componente de Buttton para button, ajuste o nome no arquivo Count.razor e tente compilar seu projeto. Você terá um erro como o da imagem a seguir, informando que seus componente não pode ser todo em letras minúsculas devido a conflito com o HTML.

NavLink atualizado para suportar atributos extras

O component NavLink, parte do Blazor, agora suporta parâmetros adicionais para serem renderizados com a tag de âncora <a>. Antes tínhamos suporte para os atributos href e class, mas agora podemos especificar qualquer um. Veja os exemplos onde podemos adicionar o target:

<NavLink href="my-page" target="_blank">My page</NavLink>

E isso irá produzir:

<a href="my-page" target="_blank" rel="noopener noreferrer">My Page</a>

Data binding considerando a cultura atual

O suporte a data binding (@bind) para o elemento <input> agora suporta cultura. Os valores podem ser formatados e "parseados" de acordo com a cultura atual, identificada pela propriedade System.Globalization.CultureInfo.CurrentCulture

Isso quer dizer que, o data binding do elemento vai formatar e converter de forma correta quando a cultura do usuário for a mesma que a atual para o ambiente de runtime, onde podemos configurar utilizando um Middleware para localization no ASP.NET Core. Também podemos especificar a cultura a ser utilizada em um data binding, com o parâmetro @bind:culture, onde o valor do parâmetro é uma instância da classe CultureInfo.

Para fazer um binding ignorando a cultura (InvariantCulture), podemos fazer:

<input @bind="amount" @bind:culture="CultureInfo.InvariantCulture" />

Os elementos <input> do tipo number e date irão utilizar por padrão a cultura invariante (CultureInfo.InvarianteCulture) e regras de formatação de acordo com o browser. Esses elementos não podem conter texto digitado sem formatação e a aparência deles é controlada pelo browser.

Outros tipos de campo com regras específicas de formatação são datetime-local, month e week. Esses campos ainda não suportados pelo Blazor, dado que também não suportados pela maioria dos browsers.

Outro ponto importante é que o data binding agora também suporta os tipos DateTimeOffset, DateTime? e DateTimeOffset? (?, tipos nuláveis suportados).

Suporte do Razor Pages a diretiva `@attribute`

O Razor Pages (consequentemente Blazor também) agora suporta a diretiva @attribute, para adicionar atributos a classe gerada para a página.

Podemos, por exemplo, especificar que a página precisa ter autorização validada, como a seguir:

@page
@attribute [Microsoft.AspNetCore.Authorization.Authorize]

<h1>Authorized users only!<h1>

<p>Hello @User.Identity.Name. You are authorized!</p>

Concluindo

Estas foram as últimas novidades deste release, diretamente relacioandas ao Blazor.

Temos algumas novidades extras, mais gerais do ASP.NET Core que do Blazor, que serão apresentadas na terceira parte desta série.

Referências

Este post tem como referência / faz tradução ao post original sobre o release do .NET Core 3.0 Preview 8, disponível em:
https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/

ASP.NET Core 3.0 Preview 8 - Novidades do Blazor - Novos Templates

Gustavo Bellini Bigardi — Mon, 19 Aug 2019 18:57:05 +0000

E aí galera, tudo certo?

Bom, esse é um de meus primeiros posts aqui na plataforma DEV.TO, que tem me atraído bastante devido a comunidade de desenvolvedores e demais profissionais de TI que postam conteúdo por aqui.

Na semana passada (13/08/2019) tivemos uma nova versão do .NET Core 3.0 liberada, a versão Preview 8. Junto com ela, tivemos novas versões do EF Core e ASP.NET Core e, consequentemente, do Blazor.

Irei postar as novidades em artigos separados, assim não fica muito extenso para leitura e cada um pode focar onde ainda não se atualizou ou tem mais interesse, ok? Vamos lá!

Novos Templates do Blazor

Os templates foram atualizados e organizados, sendo que agora temos dois templates, onde demais "templates" foram colocados como opções.

Blazor Server App: Este é o antigo Blazor Server-Side, onde podemos criar um projeto com o Blazor onde a renderização das views ocorre no servidor, com o uso do SignalR para comunicação com o browser.
Blazor WebAssembly App: Este é o antigo Blazor Client-Side, onde podemos criar um projeto Blazor onde a renderização ocorre no lado do cliente (browser), gerando um pacote em WebAssembly que irá executar nossa aplicação ASP.NET Core diretamente no browser. Este template pode ser publicado de forma estática ou mesmo utilizando o ASP.NET Core (Kestrel) como servidor dos assets estáticos que o Blazor gera.

Para visualizar estes novos templates, além do .NET Core Preview 8 instalado, precisamos atualizar o Visual Studio 2019 Preview para a versão 16.3 Preview 2 ou superior. Ao acessar o menu para criar um novo projeto e filtrar por "Blazor", temos os templates descritos conforme a imagem a seguir:

Para quem utiliza o Visual Studio Code com o CLI do .NET Core, pode instalar ou atualizar os templates do Blazor com o comando a seguir, lembrando que é preciso atualizar o SDK do .NET Core 3.0 para preview 8 antes.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview8.19405.7

Os templates para criarmos projetos Blazor App e Blazor WebAssembly App, com o CLI, são blazorserver e blazorwasm, respectivamente.

Para criar um projeto do tipo Blazor WebAssembly App e utilizar o ASP.NET Core como host dos arquivos estáticos, precisamos marcar na tela de criação do projeto a opção ASP.NET Core Hosted, ou para que estiver utilizando o CLI, adicionar o argumento --hosted

dotnet new blazorwasm --hosted

Novo Template para o componentes Blazor

O novo template Razor Class Lib agora é o padrão para criação de componentes para Razor Pages ou Blazor, sendo que o antigo template Blazor Class Lib foi removido.

Outro detalhe é que o template é baseado no .NET Standard, permitindo sua utilização tanto com a versão Server como WebAssembly App do Blazor. Caso você precise componentizar views inteiras assim como assets e usar como target o .NET Core, é necessário informar isso na opção "Support Pages and Views" na tela de criação do projeto, ou para o CLI do .NET Core com o argumento --support-pages-and-views.

Para criar um novo Razor Class Lib via .NET Core CLI:

dotnet new razorclasslib --support-pages-and-views

Demais templates

Outros templates a nível de projeto também não mais aparecem "duplicados" e foram organizados, aparecendo apenas no menu "Create a new project" do Visual Studio 2019 Preview ou do CLI do .NET Core.

Worker Service
gRPC Service

O segundo template que listo acima será detalhado em um segundo post, pois agora temos um suporte melhor do Visual Studio e CLI do .NET Core para trabalharmos com serviços gRPC.

Adicional

O template de uma aplicação SPA Angular agora foi atualizado para utilizar o Angular 8. Como o foco da série é sobre Blazor, irei abordar este assunto em outro post fora da série, ok?

Treinamento com Desconto

Temos um código de 50% de desconto para o treinamento presencial Azure na Prática.

O Azure na Prática surgiu de necessidades observadas pelos palestrantes e Microsoft MVPs Ericson da Fonseca, Milton Camara Gomes e Renato Groffe ao longo de diversos eventos em que os mesmos participaram nos últimos anos.

Eles constataram nestes encontros técnicos dúvidas recorrentes sobre qual a melhor maneira de uma empresa migrar para a nuvem, quais serviços utilizar, além de como conduzir este processo de mudança sem custos abusivos e maximizando a produtividade das equipes de TI.

Diante de tudo isso, surgiu a ideia deles (Ericson, Milton e Renato) compartilharem suas experiências através de um curso totalmente diferente dos hoje existentes no mercado. Um treinamento com foco totalmente prático e enfatizando os principais recursos do Azure, tornando o aprendizado muito mais fácil e dinâmico.

Lembrando que o treinamento será inteiramente prático, ou seja, cada participante deverá levar o seu notebook para operar a plataforma.

Para se inscrever com 50% de desconto, basta utilizar o código jundevelopers ou acessar o link a seguir que já direciona para o Sympla com o código de desconto aplicado.

https://www.sympla.com.br/azure-na-pratica__605145?d=jundevelopers

Concluindo

Este é apenas um pedaço das novidades que temos para o Blazor no Preview 8 do .NET Core 3.0. Estou quebrando em partes para detalhar um pouco melhor cada uma das novidades e não deixar os artigos muito extensos e postar com maior frequência. Acompanhe a série para mais novidades, sendo que teremos novos posts ainda esta semana.

DEV Community: Gustavo Bellini Bigardi

ASP.NET Core 3.0 Preview 8 - Novidades do Blazor - Estrutura e código

Case-sensitive component binding

NavLink atualizado para suportar atributos extras

Data binding considerando a cultura atual

Suporte do Razor Pages a diretiva @attribute

Concluindo

Referências

ASP.NET Core 3.0 Preview 8 - Novidades do Blazor - Novos Templates

Novos Templates do Blazor

Novo Template para o componentes Blazor

Demais templates

Adicional

Treinamento com Desconto

Concluindo

Referências

Suporte do Razor Pages a diretiva `@attribute`