Jak uzyskać zmienną z danych wejściowych HTML w Blazor C#

Blazor to potężna platforma do tworzenia interaktywnych aplikacji internetowych przy użyciu języka C#, a nie JavaScript. Jedną z podstawowych funkcji Blazora jest możliwość powiązania kodu C# z elementami HTML, co ułatwia przechwytywanie danych wejściowych użytkownika i używanie ich w aplikacji. W tym artykule omówimy, jak uzyskać zmienną z elementu wejściowego HTML w programie Blazor, zarówno w aplikacjach Blazor Server, jak i Blazor WebAssembly.

Wprowadzenie do dwukierunkowego powiązania danych Blazor

Blazor oferuje funkcję znaną jako „dwukierunkowe wiązanie danych”, która umożliwia zmianom w interfejsie użytkownika (UI) automatyczne aktualizowanie podstawowej zmiennej C# i odwrotnie. Jest to niezwykle przydatne, gdy chcesz przechwycić dane wprowadzone przez użytkownika w polu wejściowym HTML i natychmiast odzwierciedlić te zmiany w kodzie C#.

Pierwsze kroki

Aby uzyskać zmienną z pola wejściowego HTML, potrzebujesz kilku kluczowych komponentów:

1. Dane wejściowe HTML : Pole wejściowe, w którym użytkownik wprowadza dane.
2. Zmienna C# : Zmienna C# przechowująca dane z danych wejściowych.
3. Powiązanie danych : połączenie między polem wejściowym a zmienną C#, zwykle za pośrednictwem dyrektywy @bind w Blazorze.

W kolejnych sekcjach omówimy różne przykłady, aby zademonstrować, jak to działa.

Przykład 1: Proste powiązanie wprowadzania tekstu

Najprostszym sposobem przechwycenia danych wejściowych użytkownika jest użycie dyrektywy @bind . Spowoduje to automatyczne powiązanie elementu wejściowego HTML ze zmienną C#.

Przykład kodu (komponent 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; }

Wyjaśnienie:

1. Dyrektywa @bind wiąże element input ze zmienną userName w języku C#. Za każdym razem, gdy użytkownik wpisze coś w polu wejściowym, zmienna userName zostanie automatycznie zaktualizowana.
2. Akapit <p>Hello, @userName!</p> dynamicznie wyświetla wartość userName , pokazując aktualizowany tekst w czasie rzeczywistym, gdy użytkownik pisze.

W tym przykładzie zmienna userName jest powiązana z polem wejściowym, a dwukierunkowe powiązanie Blazora gwarantuje, że za każdym razem, gdy użytkownik zmodyfikuje tekst, wartość userName będzie aktualizowana w czasie rzeczywistym.

Przykład 2: Pobieranie i używanie danych wejściowych po kliknięciu przycisku

Czasami zachodzi potrzeba wykonania działań na danych wprowadzonych przez użytkownika, np. kliknięcia przycisku w celu przesłania wartości lub dalszego jej przetwarzania. Można to również łatwo osiągnąć w Blazorze.

Przykład kodu (komponent 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}"); } }

Wyjaśnienie:

1. Dyrektywa @bind="age" wiąże pole wejściowe ze zmienną age .
2. @ wiąże zdarzenie kliknięcia przycisku z metodą SubmitAge .
3. Gdy użytkownik kliknie przycisk, wywoływana jest metoda SubmitAge , która wypisuje wprowadzony wiek na konsoli.

W tym przykładzie użytkownik może wprowadzić swój wiek, a po kliknięciu przycisku „Prześlij” uruchamiana jest metoda SubmitAge w celu wykonania akcji ze zmienną age .

Przykład 3: Walidacja danych wejściowych

Blazor umożliwia łatwe sprawdzanie poprawności danych wejściowych, łącząc powiązanie danych ze składnikami formularzy, takimi jak <EditForm> .

Przykład kodu (komponent 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; } } }

Wyjaśnienie:

1. Komponent <EditForm> służy do zawijania pól wejściowych i przeprowadzania walidacji.
2. Parametr @bind-Value="person.FirstName" wiąże pole wejściowe z właściwością FirstName obiektu person .
3. Komponent DataAnnotationsValidator używa adnotacji danych (takich jak [Required] ) do sprawdzania poprawności danych wejściowych.
4. Jeśli dane wejściowe są prawidłowe i formularz zostanie przesłany, wywoływana jest metoda HandleValidSubmit , która przetwarza dane.

Walidacja:

• Jeśli użytkownik nie poda imienia (ze względu na adnotację [Required] ), pojawi się komunikat potwierdzający, a formularz nie zostanie przesłany, dopóki wprowadzone dane nie będą prawidłowe.

Zaawansowane wiązanie z innymi typami wejściowymi

Blazor obsługuje szeroką gamę typów danych wejściowych, takich jak pola tekstowe, pola wyboru, przyciski opcji, listy rozwijane itp. Zmienne można powiązać z dowolnym z tych elementów w podobny sposób.

Przykład: powiązanie pola wyboru

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

W tym przykładzie pole wyboru jest powiązane ze zmienną isSubscribed , a gdy użytkownik zaznaczy lub odznaczy to pole, wartość isSubscribed zostanie automatycznie zaktualizowana.

Wniosek

Pobieranie zmiennej z danych wejściowych HTML w Blazorze jest łatwe i wydajne dzięki zaawansowanemu dwukierunkowemu wiązaniu danych Blazora. Używając dyrektywy @bind , możesz szybko połączyć pola wejściowe ze zmiennymi C#, upewniając się, że zmiany w interfejsie użytkownika zostaną odzwierciedlone w kodzie i odwrotnie.

Niezależnie od tego, czy tworzysz proste formularze, czy złożoną logikę sprawdzania poprawności danych wejściowych, możliwości wiązania danych Blazor upraszczają proces pracy z danymi wejściowymi użytkownika. Od pól tekstowych po pola wyboru — Blazor bezproblemowo obsługuje integrację między HTML i C#, co czyni go doskonałym wyborem do tworzenia interaktywnych aplikacji internetowych.