Как получить переменную из ввода HTML в Blazor C#

Blazor — это мощная платформа для создания интерактивных веб-приложений с использованием C#, а не JavaScript. Одной из основных функций Blazor является возможность связывать код C# с элементами HTML, что позволяет легко захватывать вводимые пользователем данные и использовать их в своем приложении. В этой статье мы рассмотрим, как получить переменную из элемента ввода HTML в Blazor как в приложениях Blazor Server, так и в приложениях Blazor WebAssembly.

Введение в двустороннюю привязку данных Blazor

Blazor предлагает функцию, известную как «двусторонняя привязка данных», которая позволяет при изменениях в пользовательском интерфейсе (UI) автоматически обновлять базовую переменную C# и наоборот. Это чрезвычайно полезно, когда вы хотите захватить данные, введенные пользователем в поле ввода HTML, и немедленно отразить эти изменения в вашем коде C#.

Начиная

Чтобы получить переменную из поля ввода HTML, вам понадобится несколько ключевых компонентов:

1. HTML-ввод : поле ввода, в которое пользователь вводит данные.
2. Переменная C# : переменная C#, в которой хранятся входные данные.
3. Привязка данных : связь между полем ввода и переменной C#, обычно через директиву @bind в Blazor.

В следующих разделах мы рассмотрим различные примеры, чтобы продемонстрировать, как это работает.

Пример 1: Простая привязка ввода текста

Самый простой способ перехватить вводимые пользователем данные — использовать директиву @bind . Это автоматически привязывает элемент ввода HTML к переменной C#.

Пример кода (компонент 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; }

Объяснение:

1. Директива @bind привязывает элемент input к переменной userName в C#. Всякий раз, когда пользователь вводит данные в поле ввода, переменная userName автоматически обновляется.
2. Параграф <p>Hello, @userName!</p> динамически отображает значение userName , отображая обновленный текст в режиме реального времени по мере ввода пользователем.

В этом примере переменная userName привязана к полю ввода, а двусторонняя привязка Blazor гарантирует, что всякий раз, когда пользователь изменяет текст, значение userName обновляется в режиме реального времени.

Пример 2. Получение и использование ввода при нажатии кнопки

Иногда вам необходимо выполнить действия с данными, введенными пользователем, например нажать кнопку, чтобы отправить значение или продолжить его обработку. Этого также можно легко добиться в Blazor.

Пример кода (компонент 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}"); } }

Объяснение:

1. Директива @bind="age" привязывает поле ввода к переменной age .
2. Символ @ привязывает событие нажатия кнопки к методу SubmitAge .
3. Когда пользователь нажимает кнопку, вызывается метод SubmitAge , который выводит введенный возраст на консоль.

В этом примере пользователь может ввести свой возраст, и когда он нажимает кнопку «Отправить», метод SubmitAge запускается для выполнения действия с переменной age .

Пример 3: Проверка ввода

Blazor позволяет легко выполнять проверку ввода, комбинируя привязку данных с такими компонентами формы, как <EditForm> .

Пример кода (компонент 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; } } }

Объяснение:

1. Компонент <EditForm> используется для переноса полей ввода и выполнения проверки.
2. @bind-Value="person.FirstName" привязывает поле ввода к свойству FirstName объекта person .
3. Компонент DataAnnotationsValidator использует аннотации к данным (например, [Required] ) для проверки входных данных.
4. Если ввод верен и форма отправлена, вызывается метод HandleValidSubmit , обрабатывающий данные.

Проверка:

• Если пользователь не укажет имя (из-за аннотации [Required] ), появится сообщение проверки, и форма не будет отправлена, пока введенные данные не станут действительными.

Расширенная привязка с другими типами ввода

Blazor поддерживает широкий спектр типов ввода, таких как текстовые поля, флажки, переключатели, раскрывающиеся списки и т. д. Аналогичным образом можно привязать переменные к любому из этих элементов.

Пример: привязка флажка

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

В этом примере флажок привязан к переменной isSubscribed , и когда пользователь устанавливает или снимает флажок, значение isSubscribed автоматически обновляется.

Заключение

Получить переменную из ввода HTML в Blazor легко и эффективно благодаря мощной двусторонней привязке данных Blazor. Используя директиву @bind , вы можете быстро связать поля ввода с переменными C#, гарантируя, что изменения в пользовательском интерфейсе будут отражены в вашем коде и наоборот.

Независимо от того, создаете ли вы простые формы или сложную логику проверки ввода, возможности привязки данных Blazor упрощают процесс работы с пользовательскими данными. Blazor обеспечивает плавную интеграцию между HTML и C#, от текстовых полей до флажков, что делает его отличным выбором для создания интерактивных веб-приложений.