ASP.NET Core 3.0 Preview 8 — Novidades do Blazor — Funcionalidades e Estrutura

Gustavo Bellini Bigardi
Aug 22 · 3 min read

E aí galera!

Continuando a série de pequenos posts sobre as novidades do Blazor Preview 8, vamos as mudanças de funcionalidades e estrutura de código do framework!

A primeira parte encontra-se disponível no link abaixo.

Case-sensitive component binding

A partir desta versão, os componentes criados através de arquivos com a extenoa .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.

Exemplo de código com o botão em letras maiúsculas.

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.

Falha de compilação com o componente em letras minúsculas.

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 no link abaixo.

Gustavo Bellini Bigardi

Written by

Agora estou com plataforma própria. Segue o novo endereço do blog! https://blog.gbbigardi.dev/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade