Cómo obtener una variable de una entrada HTML en Blazor C#

Blazor es un marco potente para crear aplicaciones web interactivas con C# en lugar de JavaScript. Una de las características principales de Blazor es la capacidad de vincular código C# con elementos HTML, lo que facilita la captura de entradas del usuario y su uso en su aplicación. En este artículo, exploraremos cómo obtener una variable de un elemento de entrada HTML en Blazor, tanto en las aplicaciones Blazor Server como en Blazor WebAssembly.

Introducción al enlace de datos bidireccional de Blazor

Blazor ofrece una característica conocida como "enlace de datos bidireccional", que permite cambios en la interfaz de usuario (UI) para actualizar automáticamente la variable C# subyacente y viceversa. Esto es extremadamente útil cuando desea capturar datos ingresados ​​por el usuario en un campo de entrada HTML y reflejar inmediatamente esos cambios en su código C#.

Empezando

Para obtener una variable de un campo de entrada HTML, necesita algunos componentes clave:

1. Entrada HTML : el campo de entrada donde el usuario ingresa datos.
2. Variable C# : la variable C# que almacena los datos de la entrada.
3. Enlace de datos : la conexión entre el campo de entrada y la variable C#, normalmente a través de la directiva @bind en Blazor.

En las siguientes secciones, analizaremos varios ejemplos para demostrar cómo funciona esto.

Ejemplo 1: enlace de entrada de texto simple

La forma más sencilla de capturar la entrada de un usuario es mediante la directiva @bind . Esto vincula automáticamente un elemento de entrada HTML a una variable de C#.

Ejemplo 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; }

Explicación:

1. La directiva @bind vincula el elemento input a la variable userName en C#. Cada vez que el usuario escribe en el campo de entrada, la variable userName se actualiza automáticamente.
2. El párrafo <p>Hello, @userName!</p> muestra dinámicamente el valor de userName , mostrando el texto actualizado en tiempo real a medida que el usuario escribe.

En este ejemplo, la variable userName está vinculada al campo de entrada y el enlace bidireccional de Blazor garantiza que cada vez que el usuario modifica el texto, el valor de nombre de userName se actualiza en tiempo real.

Ejemplo 2: obtener y utilizar información al hacer clic en un botón

A veces es necesario realizar acciones sobre los datos ingresados ​​por el usuario, como hacer clic en un botón para enviar el valor o procesarlo más. Esto también se puede lograr fácilmente en Blazor.

Ejemplo 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}"); } }

Explicación:

1. La directiva @bind="age" vincula el campo de entrada a la variable age .
2. El @ vincula el evento de clic del botón al método SubmitAge .
3. Cuando el usuario hace clic en el botón, se llama al método SubmitAge , que imprime la edad ingresada en la consola.

En este ejemplo, el usuario puede ingresar su edad y cuando hace clic en el botón "Enviar", se activa el método SubmitAge para realizar una acción con la variable age .

Ejemplo 3: Validación de entrada

Blazor le permite realizar la validación de entradas fácilmente combinando el enlace de datos con componentes del formulario como <EditForm> .

Ejemplo 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; } } }

Explicación:

1. El componente <EditForm> se utiliza para ajustar los campos de entrada y realizar la validación.
2. @bind-Value="person.FirstName" vincula el campo de entrada a la propiedad FirstName del objeto person .
3. El componente DataAnnotationsValidator utiliza anotaciones de datos (como [Required] ) para validar la entrada.
4. Si la entrada es válida y se envía el formulario, se llama al método HandleValidSubmit , que procesa los datos.

Validación:

• Si el usuario no proporciona un nombre (debido a la anotación [Required] ), aparecerá el mensaje de validación y el formulario no se enviará hasta que la entrada sea válida.

Enlace avanzado con otros tipos de entrada

Blazor admite una amplia gama de tipos de entrada, como cuadros de texto, casillas de verificación, botones de opción, menús desplegables, etc. Puede vincular variables a cualquiera de estos elementos de manera similar.

Ejemplo: enlace de casilla de verificación

 @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; }

En este ejemplo, la casilla de verificación está vinculada a la variable isSubscribed y cuando el usuario marca o desmarca la casilla, el valor de isSubscribed se actualiza automáticamente.

Conclusión

Obtener una variable a partir de una entrada HTML en Blazor es fácil y eficiente, gracias al potente enlace de datos bidireccional de Blazor. Al utilizar la directiva @bind , puede vincular rápidamente campos de entrada a variables de C#, garantizando que los cambios en la interfaz de usuario se reflejen en su código y viceversa.

Ya sea que esté creando formularios simples o una lógica de validación de entradas compleja, las capacidades de enlace de datos de Blazor simplifican el proceso de trabajar con las entradas del usuario. Desde cuadros de texto hasta casillas de verificación, Blazor maneja la integración entre HTML y C# a la perfección, lo que lo convierte en una excelente opción para crear aplicaciones web interactivas.