Blazor - Navegação de formulário aprimorada

Blazor - Navegação de formulário aprimorada - I

Neste artigo veremos a navegação de formulário aprimorada no Blazor.

No .NET 8 o Blazor recebeu diversas melhorias que o alçaram a um outro patamar. Um dos muitos recursos que foram incluídos no Blazor é a navegação de formulário aprimorada ou enhanced form navigation.

O recurso Enhanced Form Navigation do Blazor no .NET 8 permite que os formulários sejam navegados de forma mais eficiente e suave melhorando a experiencia do usuario. Isso é feito interceptando os requests de navegação e a seguir aplicando a resposta ao DOM existente, preservando o máximo possível do estado do formulário.

Antes do Enhanced Form Navigation, a navegação de formulários no Blazor era feita enviando um request HTTP para a página de destino. Isso causa uma recarga completa da página, o que pode ser lento e causar perda de dados.

O Enhanced Form Navigation resolve esse problema enviando um request Fetch para a página de destino. Esse request é mais rápido e eficiente do que um request HTTP e preserva o estado do formulário atual.

Obs: O Fetch é uma API nativa do navegador que fornece uma interface unificada para fazer requests HTTP e HTTPS.

Ao usar o template Blazor Web App para criar aplicações Blazor podemos ter dois tipos de roteamento para requests de navegação de página e tratamento de formulários:

Navegação normal : Onde um recarregamento de página inteira é disparado para a URL de solicitação.

Navegação aprimorada : Onde o Blazor intercepta o request e executa um request Fetch, a seguir aplica o patch do conteúdo de resposta ao DOM da página. (para isso ele usa o script blazor.web.js)

Usando o recurso

Podemos habilitar o tratamento aprimorado de formulário, em formulários EditForm ou nos formulários HTML, que usam a tag <form>.

Nos formulários <EditForm> temos que adicionar a diretiva Enhance na definição do EditForm.

Nos formulários HTML podemos adicionar o atributo data-enhance no formulario:

<form data-enhance>
<input name="query" placeholder="Procurar" value="@Query" />
<button>Procurar</button>
</form>

O comportamento é o seguinte:

Quando o usuário clica em um link de navegação para uma página que contém um formulário com a diretiva Enhance, o Blazor intercepta o request e executar as seguintes etapas:

- Recupera o estado do formulário atual do DOM;
- Envia um request Fetch para a página de destino;
- Aplica a resposta do request Fetch ao DOM existente;

O Blazor também atualiza o estado do formulário com os dados da página de destino. Isso permite que o usuário continue editando o formulário sem perder dados.

Podemos usar este recurso para:

- Navegar entre páginas de um formulário
- Navegar entre páginas de um formulário e outros componentes
- Navegar entre páginas de um formulário e uma página de destino que contém um formulário relacionado

Recebendo valores via QeryString e via formulário

Outro recurso disponível é que podemos receber o valor de parâmetros via querystring usando o atributo [SupplyParameterFromQuery] e também podemos obter valores do formulário usando o atributo [SupplyParameterFromForm].

Exemplo:

   <EditForm method="post" Model=“Test" OnValidSubmit=“Add" FormName="create" Enhance>
        //...
</EditForm>

@code {
[SupplyParameterFromQuery]
    public int Id { get; set; }

[SupplyParameterFromForm]
    public Product? Product { get; set; }
...
}

Neste exemplo:

[SupplyParameterFromQuery] - Indica que o componente pode suprir o valor para o parâmetro da querystring da URL

[SupplyParameterFromForm] - Indica que o valor da propriedade será fornecida a partir do formulário de dados

Os parâmetros de componente fornecidos pela string de consulta suportam os seguintes tipos: bool, DateTime, decimal, duplo, float, Guid, int, longo, string, variantes anuláveis dos tipos anteriores.
Array dos tipos anteriores, sejam elas anuláveis ou não.

Comparando o comportamento

Vejamos o comportamento da aplicação na renderização estática no servidor sem usar a navegação de formulários aprimorada:

- O navegador envia um request ao servidor
- No servidor o request é roteado para um componente razor
- O Componente Razor gera o HTML que adicionado ao response e o response é enviado ao navegador do cliente
- E o navegador exibe pagina

Esta abordagem tem dois problemas:

- Causa uma atualização da página inteira
- Para formulários o usuário perde a posição atual

Agora vejamos o comportamento usando a navegação de formulários aprimorada:

Mas agora o HTML renderizado contém o script blazor.web.js, e, se o usuário quiser navaegar para uma nova pagina ou submter um formulario o request será interceptado pelo blazor.web.js e vai realizar um request Fetch ao servidor.

No servidor o componente razor vai executar usando a renderização estatica e vai produzir HTML que vai ser adicionado ao response e enviado ao navegador, e, neste momento o blazor.web.js vai tratar o response e vai calcular o menor numero de alterações necessárias para atualizar a interface do usuário atualizando o DOM
e a pagina será atualiza com as alterações feitas.

Nesta abordagem :

- Não temos uma atualização da página inteira
- Para formulários o usuário não perde a posição atual

Na próxima parte do artigo veremos o funcionamento deste recurso na prática. ...

"Pois, assim como o Pai ressuscita os mortos, e os vivifica, assim também o Filho vivifica aqueles que quer."
João 5:21

Referências:

José Carlos Macoratti