.NET 8 - Novidades do Blazor

   Hoje vou apresentar as novidades do Blazor previstas para o .NET 8.

Com o lançamento do preview 6 para o .NET 8 podemos dizer que temos muitas novidades relacionadas ao Blazor.



A renderização do lado do servidor de componentes Blazor - ao mesmo tempo chamada de "Blazor United" - veio em abril como parte do Preview 3, com Daniel Roth da Microsoft dizendo: "Este é o início do esforço de unificação Blazor para permitir o uso de componentes Blazor para todas as suas necessidades de interface do usuário da web, do lado do cliente e do lado do servidor. Esta é uma prévia da funcionalidade, por isso ainda é um pouco limitada, mas nosso objetivo é permitir o uso de componentes Blazor reutilizáveis, não importa como você escolha arquitetar seu aplicativo."

No .NET 8 Preview 6, agora podemos habilitar a interatividade para componentes individuais usando o modo de renderização Blazor Server. Desta forma  você pode habilitar a interatividade com o Blazor Server usando o método de extensão AddServerComponents e habilitar a interatividade para componentes específicos usando o novo atributo [RenderModeServer].

Outro aprimoramento do Blazor a partir do Preview 5 é um novo modelo de projeto do Blazor Web App, fornecendo um único ponto de partida para usar os componentes do Blazor para criar qualquer estilo de interface do usuário da Web, renderizado do servidor ou do cliente (Blazor WebAssembly).

Vejamos a seguir um resumo das principais novidades relacionadas ao Blazor (link)

1- Vinculação e validação de modelo de formulário com renderização do lado do servidor

O novo modo de renderização do lado do servidor do Blazor agora pode modelar o model binding e validar os valores de postagem do formulário HTTP.

Para vincular dados de uma solicitação de formulário, aplique o atributo [SupplyParameterFromForm] a uma propriedade de componente. Os dados na solicitação que correspondem ao nome da propriedade serão vinculados à propriedade. A propriedade pode ser um tipo primitivo, tipo complexo, coleção ou dicionário. A validação do lado do servidor usando anotações de dados também é suportada.

Exemplo:

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    public DateOnly? ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

Pages/Movies/Create.razor

@page "/movies/create"
@inject BlazorMovieContext DB

<PageTitle>Create</PageTitle>

<h1>Create</h1>

<h4>Movie</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <EditForm method="post" Model="Movie" OnValidSubmit="AddMovie">
            <DataAnnotationsValidator />
            <ValidationSummary class="text-danger" />
            <div class="mb-3">
                <label for="title" class="form-label">Title:</label>
                <InputText id="title" @bind-Value="Movie.Title" class="form-control" />
                <ValidationMessage For="() => Movie.Title" class="text-danger" />
            </div>
            <div class="mb-3">
                <label for="release-date" class="form-label">Release date:</label>
                <InputDate id="release-date" @bind-Value="Movie.ReleaseDate" class="form-control" />
                <ValidationMessage For="() => Movie.ReleaseDate" class="text-danger" />
            </div>
            <div class="mb-3">
                <label for="genre" class="form-label">Genre:</label>
                <InputText id="genre" @bind-Value="Movie.Genre" class="form-control" />
                <ValidationMessage For="() => Movie.Genre" class="text-danger" />
            </div>
            <div class="mb-3">
                <label for="price" class="form-label">Price:</label>
                <InputNumber id="price" @bind-Value="Movie.Price" min="0" step="0.01"
 class="form-control" />
                <ValidationMessage For="() => Movie.Price" class="text-danger" />
            </div>
            <button type="submit" class="btn btn-primary">Create</button>
        </EditForm>
    </div>
</div>

<div>
    @if (movieAdded)
    {
        <span>
            Movie was added.
        </span>
    }
    <a href="/movies">Back to List</a>
</div>

@code {

    [SupplyParameterFromForm]
    public Movie Movie { get; set; } = new();

    private bool movieAdded = false;

    public async Task AddMovie()
    {
        DB.Movie.Add(Movie);
        await DB.SaveChangesAsync();
        movieAdded = true;
    }
}

Se houver vários formulários em uma página, eles podem ser distinguidos usando o parâmetro Name, e você pode usar a propriedade Name no [SupplyParameterFromForm] para indicar de qual formulário deseja vincular os dados.

Você não precisa mais configurar um componente CascadingModelBinder para habilitar o model binding. Agora isso está configurado para você automaticamente.

2- Navegação de página aprimorada e manipulação de formulários

O Blazor agora aprimorará a navegação na página e o manuseio do formulário interceptando a solicitação para aplicar a resposta ao DOM existente, preservando o máximo possível. O aprimoramento evita a necessidade de carregar totalmente a página e fornece uma experiência de usuário muito mais suave, semelhante a um aplicativo de página única (SPA), mesmo que o aplicativo ainda esteja sendo renderizado no lado do servidor.

Nesta versão de visualização, a navegação aprimorada e a manipulação de formulários ainda não são compatíveis com componentes interativos (servidor ou WebAssembly) na página ao mesmo tempo. Se seu aplicativo usar componentes interativos, a navegação aprimorada será desativada automaticamente. Essa limitação será abordada em uma prévia antes do lançamento do .NET 8 GA.

3- Preservar os elementos DOM existentes com renderização de streaming

A renderização de streaming Blazor agora preservará os elementos DOM existentes ao transmitir atualizações para a página, o que fornece uma experiência de usuário mais rápida e suave.

4- Especificar o modo de renderização do componente no local da chamada

Agora você pode especificar o modo de renderização para uma instância de componente usando o atributo de diretiva @rendermode. O modo de renderização será então aplicado ao componente e seus filhos. Por exemplo,

<Counter @rendermode="@RenderMode.Server" />

Para habilitar o uso do site de chamada @rendermode, certifique-se de definir a Razor Language Version no arquivo de projeto para 8.0. Isso será tratado internamente no framework e não será necessário na próxima versão de visualização.

Para fazer isso, edite o arquivo .csproj do seu projeto, adicionando a seguinte linha no primeiro elemento <PropertyGroup>: <RazorLangVersion>8.0</RazorLangVersion>

5-  Renderização interativa com Blazor WebAssembly

Agora você pode habilitar a renderização interativa de componentes com o Blazor WebAssembly. Embora essa opção ainda não esteja exposta no modelo Blazor Web App, você pode habilitá-la manualmente.

Para habilitar o suporte para o modo de renderização WebAssembly em seu projeto Blazor, adicione os serviços relacionados chamando app.Services.AddRazorComponents().AddWebAssemblyComponents() e adicione o modo de renderização WebAssembly chamando app.MapRazorComponents<App>().AddWebAssemblyRenderMode().

Quaisquer componentes que você deseja renderizar no WebAssembly precisarão ser baixados junto com todas as suas dependências para o navegador. Você precisará configurar um projeto Blazor WebAssembly separado para lidar com a criação de qualquer código específico do WebAssembly e referenciá-lo em seu aplicativo Blazor.

Você pode especificar o modo de renderização interativo WebAssembly para um componente adicionando o atributo [RenderModeWebAssembly] à definição do componente ou especificando @rendermode="@RenderMode.WebAssembly" em uma instância do componente.

Os componentes que você configura para renderizar no WebAssembly também serão pré-renderizados do servidor por padrão, portanto, certifique-se de criar seus componentes para que sejam renderizados corretamente em qualquer ambiente ou desative a pré-renderização ao especificar o modo de renderização: [RenderModeWebAssembly(prerender: false)] ou @rendermode="@(new WebAssemblyRenderMode(prerender: false)).

Neste link existe um exemplo mostrando como configurar a interatividade baseada em WebAssembly para um componente Counter que é renderizado na página Index.

Observe que atualmente há uma limitação em que os componentes com rotas devem ser definidos no mesmo assembly que o componente App passado para MapRazorComponents<App>(), portanto, eles não podem ser definidos atualmente no assembly do cliente. Isso será resolvido em uma atualização futura.

6- Melhorias nas seções do Blazor

Foram feitas as seguintes melhorias em como as seções do Blazor interagem com outros recursos do Blazor:

Valores em cascata: Os valores em cascata agora fluirão para o conteúdo da seção de onde o conteúdo é definido em vez de onde é renderizado em uma saída de seção.

Limites de erro(Error boundaries): Exceções não tratadas agora serão tratadas por limites de erro definidos em torno do conteúdo da seção em vez de em torno da saída da seção.

Renderização de stream: Se o conteúdo da seção usará a renderização de stream agora é determinado pelo componente em que o conteúdo da seção é definido em vez do componente que define a saída da seção.

7- Valores de string de consulta em cascata para componentes Blazor

Agora você pode receber valores de parâmetro de string de consulta em qualquer componente, não apenas componentes @page, usando o atributo [SupplyParameterFromQuery]. Por exemplo:


  [SupplyParameterFromQuery]
  public int PageIndex { get; set; }  

Assim, não é mais necessário adicionar o atributo [Parameter] a qualquer propriedade que declare [SupplyParameterFromQuery].

8- Novo template Blazor Web App para habilitar a interatividade do servidor

O template Blazor Web App agora fornece uma opção no Visual Studio para habilitar a interatividade usando o modo de renderização do servidor:

A mesma opção já está disponível na linha de comando: dotnet new blazor --use-server

9 - Consolidação dos templates Blazor

Como parte da unificação dos vários templates de hospedagem Blazor em um único template no .NET 8, também estão sendo consolidados o número de templates de projeto Blazor.

Nesta versão preview, foram removidos o template Blazor Server e a opção "ASP.NET Core hosted" do template Blazor WebAssembly. Ambos os cenários serão representados por opções ao usar o novo template Blazor Web App.

Essas são as principais relacionados ao Blazor no  .NET 8, segundo o informe oficial, lembrando que até o lançamento da versão final em novembro de 2023 poderemos ter alterações nestas funcionalidades.

E estamos conversados.

"Esta é a vida eterna: que te conheçam, o único Deus verdadeiro, e a Jesus Cristo, a quem enviaste"
João 17:3

Referências:

José Carlos Macoratti