Cum să obțineți o variabilă de la intrarea HTML în Blazor C#

Blazor este un cadru puternic pentru construirea de aplicații web interactive cu C#, mai degrabă decât JavaScript. Una dintre caracteristicile de bază ale Blazor este capacitatea de a lega codul C# cu elemente HTML, facilitând capturarea intrărilor utilizatorilor și utilizarea lor în aplicația dvs. În acest articol, vom explora cum să obținem o variabilă dintr-un element de intrare HTML în Blazor, atât în ​​Blazor Server, cât și în aplicațiile Blazor WebAssembly.

Introducere în legarea de date bidirecțională a Blazor

Blazor oferă o caracteristică cunoscută sub numele de „legare de date în două sensuri”, care permite modificări în interfața cu utilizatorul (UI) pentru a actualiza automat variabila C# de bază și invers. Acest lucru este extrem de util atunci când doriți să capturați datele introduse de utilizator într-un câmp de introducere HTML și să reflectați imediat acele modificări în codul dvs. C#.

Noțiuni de bază

Pentru a obține o variabilă dintr-un câmp de introducere HTML, aveți nevoie de câteva componente cheie:

1. Intrare HTML : câmpul de introducere în care utilizatorul introduce date.
2. Variabila C# : Variabila C# care stochează datele de la intrare.
3. Legarea datelor : conexiunea dintre câmpul de intrare și variabila C#, de obicei prin directiva @bind din Blazor.

În secțiunile următoare, vom parcurge diverse exemple pentru a demonstra cum funcționează acest lucru.

Exemplul 1: Legare simplă de introducere a textului

Cea mai simplă modalitate de a captura intrarea unui utilizator este utilizarea directivei @bind . Aceasta leagă automat un element de intrare HTML la o variabilă C#.

Exemplu de cod (componenta 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ţie:

1. Directiva @bind leagă elementul input la variabila userName în C#. Ori de câte ori utilizatorul introduce în câmpul de intrare, variabila userName este actualizată automat.
2. Paragraful <p>Hello, @userName!</p> afișează dinamic valoarea userName , afișând textul actualizat în timp real pe măsură ce utilizatorul scrie.

În acest exemplu, variabila userName este legată de câmpul de intrare, iar legarea bidirecțională a lui Blazor asigură că ori de câte ori utilizatorul modifică textul, valoarea userName este actualizată în timp real.

Exemplul 2: Obținerea și utilizarea intrării la clic pe buton

Uneori trebuie să efectuați acțiuni asupra datelor introduse de utilizator, cum ar fi să faceți clic pe un buton pentru a trimite valoarea sau a o procesa în continuare. Acest lucru poate fi ușor de realizat și în Blazor.

Exemplu de cod (componenta 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ţie:

1. Directiva @bind="age" leagă câmpul de intrare la variabila age .
2. @ leagă evenimentul de clic al butonului de metoda SubmitAge .
3. Când utilizatorul face clic pe butonul, este apelată metoda SubmitAge , care imprimă vârsta introdusă pe consolă.

În acest exemplu, utilizatorul își poate introduce vârsta, iar când face clic pe butonul „Trimite”, metoda SubmitAge este declanșată pentru a efectua o acțiune cu variabila age .

Exemplul 3: Validarea intrării

Blazor vă permite să efectuați validarea intrărilor cu ușurință, combinând legarea datelor cu componente de formular precum <EditForm> .

Exemplu de cod (componenta 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ţie:

1. Componenta <EditForm> este folosită pentru a încheia câmpurile de intrare și pentru a efectua validarea.
2. @bind-Value="person.FirstName" leagă câmpul de intrare la proprietatea FirstName a obiectului person .
3. Componenta DataAnnotationsValidator utilizează adnotări de date (cum ar fi [Required] ) pentru a valida intrarea.
4. Dacă intrarea este validă și formularul este trimis, se apelează metoda HandleValidSubmit , procesând datele.

Validare:

• Dacă utilizatorul nu furnizează un prenume (din cauza adnotării [Required] ), va apărea mesajul de validare, iar formularul nu va fi trimis până când introducerea este validă.

Legare avansată cu alte tipuri de intrare

Blazor acceptă o gamă largă de tipuri de introducere, cum ar fi casete de text, casete de selectare, butoane radio, meniuri derulante etc. Puteți lega variabile la oricare dintre aceste elemente într-un mod similar.

Exemplu: Legarea casetei de selectare

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

În acest exemplu, caseta de selectare este legată de variabila isSubscribed , iar atunci când utilizatorul bifează sau debifează caseta, valoarea isSubscribed este actualizată automat.

Concluzie

Obținerea unei variabile dintr-o intrare HTML în Blazor este ușoară și eficientă, datorită legăturii de date în două sensuri puternice a Blazor. Folosind directiva @bind , puteți lega rapid câmpurile de intrare la variabilele C#, asigurându-vă că modificările din interfața de utilizare sunt reflectate în codul dvs. și invers.

Indiferent dacă construiți formulare simple sau o logică complexă de validare a intrărilor, capabilitățile Blazor de legare a datelor simplifică procesul de lucru cu intrările utilizatorului. De la casete de text la casete de selectare, Blazor gestionează integrarea între HTML și C# fără probleme, făcându-l o alegere excelentă pentru construirea de aplicații web interactive.