Привязка элементов управления к данным в приложениях Blazor

Завершено

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

Предположим, вы разрабатываете страницу, которая собирает информацию от клиентов об их любимых пиццах. Вам необходимо загружать сведения из базы данных и позволить клиентам вносить изменения, например записывать их любимые ингредиенты. При внесении изменения пользователем или обновлении в базе данных необходимо, чтобы новые значения отображались в пользовательском интерфейсе как можно быстрее.

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

Что такое привязка данных?

Если вам нужно, чтобы элемент HTML отображал значение, можно написать код для изменения отображения. Необходимо написать дополнительный код, чтобы обновить отображение при изменении значения. В Blazor можно с помощью привязки данных подключить элемента HTML к полю, свойству или выражению. Таким образом, при изменении значения HTML-элемент обновляется автоматически. Обновление обычно происходит сразу после изменения, и вам не придется писать код для такого обновления.

Чтобы привязать элемент управления, используется директива @bind:

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

На предыдущей странице обновляется значение customerEmail каждый раз, когда переменная <input> изменяет свое значение.

Note

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

Привязка элементов к конкретным событиям

Директива @bind является интеллектуальной и распознает используемые элементы управления. Например, при привязке значения к текстовому полю <input> она привязывает атрибут value. Флажок HTML <input> имеет checked атрибут вместо атрибута value. Атрибут @bind автоматически использует этот атрибут checked. По умолчанию элемент управления привязан к событию DOM onchange. Например, рассмотрим эту страницу:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

При отображении страницы значение по умолчанию Margherita отображается как в элементе <h1>, так и в текстовом поле. При вводе новой любимой пиццы в текстовое поле элемент <h1> не изменится, пока не будет выполнен переход из текстового поля или нажата клавиша ВВОД, так как именно эти действия вызывают событие DOM onchange.

Часто именно такое поведение и требуется. Но предположим, что элемент <h1> должен обновляться при вводе любого символа в текстовое поле. Для этого можно применить привязку к событию DOM oninput. Для привязки к этому событию необходимо использовать директивы @bind-value и @bind-value:event:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

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

Форматирование привязанных значений

При отображении дат может потребоваться локализованный формат данных. Предположим, что вы создаете страницу для пользователей из Великобритании, которые предпочитают в датах сначала писать день. Вы можете использовать директиву @bind:format, чтобы указать формат даты одной строкой:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Note

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

В качестве альтернативы использованию директивы @bind:format можно написать код C# для форматирования привязанного значения. Используйте методы доступа get и set в определении элемента, как показано в следующем примере:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

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