Come ottenere una variabile dall'input HTML in Blazor C#

Blazor è un framework potente per la creazione di applicazioni Web interattive con C# anziché JavaScript. Una delle funzionalità principali di Blazor è la possibilità di associare codice C# con elementi HTML, semplificando l'acquisizione degli input dell'utente e il loro utilizzo nell'applicazione. In questo articolo esploreremo come ottenere una variabile da un elemento di input HTML in Blazor, sia nelle applicazioni Blazor Server che Blazor WebAssembly.

Introduzione all'associazione dati bidirezionale di Blazor

Blazor offre una funzionalità nota come "associazione dati bidirezionale", che consente alle modifiche nell'interfaccia utente (UI) di aggiornare automaticamente la variabile C# sottostante e viceversa. Ciò è estremamente utile quando si desidera acquisire i dati immessi dall'utente in un campo di input HTML e riflettere immediatamente tali modifiche nel codice C#.

Iniziare

Per ottenere una variabile da un campo di input HTML, sono necessari alcuni componenti chiave:

1. Input HTML : il campo di input in cui l'utente inserisce i dati.
2. Variabile C# : variabile C# che archivia i dati dall'input.
3. Associazione dati : connessione tra il campo di input e la variabile C#, in genere tramite la direttiva @bind in Blazor.

Nelle sezioni seguenti, esamineremo vari esempi per dimostrare come funziona.

Esempio 1: associazione di input di testo semplice

Il modo più semplice per acquisire l'input di un utente è utilizzare la direttiva @bind . Questo associa automaticamente un elemento di input HTML a una variabile C#.

Esempio di codice (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; }

Spiegazione:

1. La direttiva @bind associa l'elemento input alla variabile userName in C#. Ogni volta che l'utente digita nel campo di input, la variabile userName viene aggiornata automaticamente.
2. Il paragrafo <p>Hello, @userName!</p> mostra dinamicamente il valore di userName , mostrando il testo aggiornato in tempo reale mentre l'utente digita.

In questo esempio la variabile userName è legata al campo di input e l'associazione bidirezionale di Blazor garantisce che ogni volta che l'utente modifica il testo, il valore di userName venga aggiornato in tempo reale.

Esempio 2: ottenere e utilizzare l'input facendo clic sul pulsante

A volte è necessario eseguire azioni sui dati immessi dall'utente, ad esempio fare clic su un pulsante per inviare il valore o elaborarlo ulteriormente. Questo può essere facilmente ottenuto anche in Blazor.

Esempio di codice (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}"); } }

Spiegazione:

1. La direttiva @bind="age" associa il campo di input alla variabile age .
2. Il @ associa l'evento clic del pulsante al metodo SubmitAge .
3. Quando l'utente fa clic sul pulsante, viene chiamato il metodo SubmitAge , che stampa l'età immessa sulla console.

In questo esempio, l'utente può inserire la propria età e quando fa clic sul pulsante "Invia", viene attivato il metodo SubmitAge per eseguire un'azione con la variabile age .

Esempio 3: convalida dell'input

Blazor consente di eseguire facilmente la convalida dell'input combinando l'associazione dati con componenti del modulo come <EditForm> .

Esempio di codice (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; } } }

Spiegazione:

1. Il componente <EditForm> viene utilizzato per racchiudere i campi di input ed eseguire la convalida.
2. @bind-Value="person.FirstName" associa il campo di input alla proprietà FirstName dell'oggetto person .
3. Il componente DataAnnotationsValidator utilizza le annotazioni dei dati (come [Required] ) per convalidare l'input.
4. Se l'input è valido e il modulo viene inviato, viene chiamato il metodo HandleValidSubmit che elabora i dati.

Convalida:

• Se l'utente non fornisce un nome (a causa dell'annotazione [Required] ), verrà visualizzato il messaggio di convalida e il modulo non verrà inviato finché l'input non sarà valido.

Associazione avanzata con altri tipi di input

Blazer supporta un'ampia gamma di tipi di input, ad esempio caselle di testo, caselle di controllo, pulsanti di opzione, elenchi a discesa e così via. È possibile associare variabili a qualsiasi di questi elementi in modo simile.

Esempio: associazione della casella di controllo

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

In questo esempio, la casella di controllo è associata alla variabile isSubscribed e quando l'utente seleziona o deseleziona la casella, il valore di isSubscribed viene aggiornato automaticamente.

Conclusione

Ottenere una variabile da un input HTML in Blazor è semplice ed efficiente, grazie alla potente associazione dati bidirezionale di Blazor. Usando la direttiva @bind , puoi collegare rapidamente i campi di input alle variabili C#, assicurando che le modifiche nell'interfaccia utente si riflettano nel codice e viceversa.

Che tu stia creando moduli semplici o una logica di convalida dell'input complessa, le funzionalità di associazione dati di Blazor semplificano il processo di utilizzo degli input dell'utente. Dalle caselle di testo alle caselle di controllo, Blazor gestisce perfettamente l'integrazione tra HTML e C#, rendendolo una scelta eccellente per la creazione di applicazioni Web interattive.