ASP.NET Core 3.0 Preview 8 - Novidades do Blazor - Estrutura e código
Tags: blazor, dotnet, webassembly, aspnet
Published: 2019-08-22 20:11:38

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.

{% gist https://gist.github.com/gustavobigardi/cbe33aa7b6927eb14f54962cfc96e94a %}

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.

![VS 2019 - Error - Button Case Sensitive](https://thepracticaldev.s3.amazonaws.com/i/s1tyh0f5ydtm2pnlu9lo.png)

# 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/