Como obter uma variável da entrada HTML no Blazor C#

Blazor é uma estrutura poderosa para construir aplicativos da web interativos com C# em vez de JavaScript. Um dos principais recursos do Blazor é a capacidade de vincular código C# a elementos HTML, facilitando a captura de entradas do usuário e seu uso em seu aplicativo. Neste artigo, exploraremos como obter uma variável de um elemento de entrada HTML no Blazor, tanto nos aplicativos Blazor Server quanto no Blazor WebAssembly.

Introdução à vinculação de dados bidirecional do Blazor

O Blazor oferece um recurso conhecido como “vinculação de dados bidirecional”, que permite que alterações na interface do usuário (IU) atualizem automaticamente a variável C# subjacente e vice-versa. Isso é extremamente útil quando você deseja capturar dados inseridos pelo usuário em um campo de entrada HTML e refletir imediatamente essas alterações em seu código C#.

Começando

Para obter uma variável de um campo de entrada HTML, você precisa de alguns componentes principais:

1. Entrada HTML : o campo de entrada onde o usuário insere os dados.
2. Variável C# : A variável C# que armazena os dados da entrada.
3. Vinculação de dados : a conexão entre o campo de entrada e a variável C#, normalmente por meio da diretiva @bind no Blazor.

Nas seções a seguir, examinaremos vários exemplos para demonstrar como isso funciona.

Exemplo 1: vinculação de entrada de texto simples

A maneira mais simples de capturar a entrada de um usuário é usando a diretiva @bind . Isso vincula automaticamente um elemento de entrada HTML a uma variável C#.

Exemplo de código (componente Razor)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

Explicação:

1. A diretiva @bind vincula o elemento input à variável userName em C#. Sempre que o usuário digita no campo de entrada, a variável userName é atualizada automaticamente.
2. O parágrafo <p>Hello, @userName!</p> exibe dinamicamente o valor de userName , mostrando o texto atualizado em tempo real conforme o usuário digita.

Neste exemplo, a variável userName está vinculada ao campo de entrada, e a ligação bidirecional do Blazor garante que sempre que o usuário modificar o texto, o valor de userName seja atualizado em tempo real.

Exemplo 2: Obtendo e usando entrada ao clicar no botão

Às vezes, você precisa realizar ações nos dados inseridos pelo usuário, como clicar em um botão para enviar o valor ou processá-lo posteriormente. Isso também pode ser facilmente alcançado no Blazor.

Exemplo de código (componente Razor)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

Explicação:

1. A diretiva @bind="age" vincula o campo de entrada à variável age .
2. O @ vincula o evento click do botão ao método SubmitAge .
3. Quando o usuário clica no botão, o método SubmitAge é chamado, que imprime a idade inserida no console.

Neste exemplo, o usuário pode inserir sua idade, e ao clicar no botão “Enviar”, o método SubmitAge é acionado para realizar uma ação com a variável age .

Exemplo 3: Validação de entrada

O Blazor permite realizar validação de entrada facilmente, combinando vinculação de dados com componentes de formulário como <EditForm> .

Exemplo de código (componente Razor)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

Explicação:

1. O componente <EditForm> é usado para agrupar os campos de entrada e realizar a validação.
2. O @bind-Value="person.FirstName" vincula o campo de entrada à propriedade FirstName do objeto person .
3. O componente DataAnnotationsValidator usa anotações de dados (como [Required] ) para validar a entrada.
4. Se a entrada for válida e o formulário for enviado, o método HandleValidSubmit é chamado, processando os dados.

Validação:

• Se o usuário não fornecer um nome (por causa da anotação [Required] ), a mensagem de validação aparecerá e o formulário não será enviado até que a entrada seja válida.

Vinculação avançada com outros tipos de entrada

Blazor oferece suporte a uma ampla variedade de tipos de entrada, como caixas de texto, caixas de seleção, botões de opção, menus suspensos, etc. Você pode vincular variáveis ​​a qualquer um desses elementos de maneira semelhante.

Exemplo: vinculação de caixa de seleção

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

Neste exemplo, a caixa de seleção está vinculada à variável isSubscribed e quando o usuário marca ou desmarca a caixa, o valor de isSubscribed é atualizado automaticamente.

Conclusão

Obter uma variável de uma entrada HTML no Blazor é fácil e eficiente, graças à poderosa ligação de dados bidirecional do Blazor. Usando a diretiva @bind , você pode vincular rapidamente campos de entrada a variáveis ​​C#, garantindo que as alterações na UI sejam refletidas em seu código e vice-versa.

Esteja você criando formulários simples ou lógica de validação de entrada complexa, os recursos de vinculação de dados do Blazor simplificam o processo de trabalho com entradas do usuário. De caixas de texto a caixas de seleção, o Blazor lida perfeitamente com a integração entre HTML e C#, tornando-o uma excelente escolha para a construção de aplicativos web interativos.