Привязка данных

При разработке компонентов Razor мы можем использовать привязку данных параметров компонента к атрибутам HTML-элементов.

Атрибут @bind

С помощью атрибута @bind можно осуществлять привязку данных в компонентах Razor. Наиболее часто такая привязка осуществляется с использованием следующей конструкции

@bind-[ATTRIBUTE] = "[VALUE]"

Здесь [ATTRIBUTE] — это атрибут html-элемента, а [VALUE] — параметр, поле и выражение Razor. Например, часто пользователь должен вводить какие-либо данные в приложении, а приложение эти данные обрабатывать. Обычно для ввода данных в html используется элемент <input>. Создадим новое приложение Blazor Hybrid и рассмотрим и напишем следующий код компонента Home.razor:

@page "/"

<h1>Hello, @value!</h1>

<input type="text" @bind-value="value"></input>

@code{
    private string value = "world";
}

Здесь мы привязали атрибут value элемента <input> к полю value компонента Razor. После запуска приложения вы увидите поле ввода:

введите какое-либо значение в это поле и нажмите Enter или Tab, чтобы элемент потерял фокус. Вы увидите, что значение поля value компонента Razor примет новое значение и это значение отобразится в заголовке:

Вообще, что касается элементов <input>, то для привязки к атрибуту value можно использовать атрибут @bind без указания value:

<input type="text" @bind="value"></input>

@bind:event

В предыдущем примере поле value компонента Razor привязывается к значению элемента <input> при срабатывании события onchange элемента, что предусмотрено по умолчанию. Именно поэтому мы видим изменение заголовка только тогда, когда html-элемент теряет фокус и срабатывает событие. С использованием атрибута @bind:event мы можем переопределить событие срабатывание которого будет приводить к привязке данных. Перепишем наш пример следующим образом:

@page "/"

<h1>Hello, @value!</h1>

<input type="text" @bind="value" @bind:event="oninput"></input>

@code{
    private string value = "world";
}

Здесь мы, используя атрибут @bind:event переопределили событие для привязки данных с onchange на oninput. Теперь запустите приложение и попробуйте ввести какое-либо значение в поле ввода. Вы увидите, что значение заголовка страницы будет изменяться сразу же по мере ввода текста в поле, а не после того, как поле потеряет фокус.

@bind:get и @bind:set

Компоненты поддерживают двустороннюю привязку данных, определяя пару атрибутов @bind с модификатором :get или :set. При этом:

• @bind:get/@bind-{ATTRIBUTE}:get — задает значение для привязки.
• @bind:set/@bind-{ATTRIBUTE}:set — Задает функцию обратного вызова при изменении значения

С привязкой :get/:set мы можем отреагировать на изменение значения до того, как оно будет применено к DOM, и при необходимости изменить применённое значение. Например,

@page "/"

<h1>Hello, @name!</h1>

<input type="text" @bind:set="Set" @bind:get="name" @bind:event="oninput"></input>

@code{
    private string name = "world";

    private void Set(string value)
    {
        name = value.ToUpper();
    }
}

здесь значение для привязки — поле name компонента, а функция обратного вызова — Set() в которой мы переводим строку в верхний регистр. Теперь, если запустить приложение и попытаться ввести любое значение, то вы увидите, что все символы переводятся в верхний регистр:

Так как мы уже изучили вопрос обработки событий в html-элементах, то стоит особо отметить, что:

@bind:after

Атрибут @bind:after используется для асинхронной обработки после привязки значения. Например,

@page "/"

<h1>Hello, @name!</h1>

<input type="text" @bind="name" @bind:after="After" @bind:event="oninput"/>

@code{
    private string name = "world";

    private async Task After()
    {
        await Task.Delay(1000);
        name = "world";
    }
}

Запустите приложение и убедитесь, что спустя 1 секунду заголовок страницы возвращается к первоначальному значению. Постобработку данных с использованием @bind:after удобно использовать, например, если вы хотите динамически выводить результаты поиска. Например,

@page "/"

<h1>Поиск</h1>

<input type="text" @bind="search" @bind:after="After" @bind:event="oninput"/>

<ul>
    @foreach (var s in found)
    {
        <li>@s</li>
    }
</ul>



@code{
    private static string[] strings = ["Android", "Apple", "Ant", "Blazor", "Blazor Hybrid"];
    private string[] found = strings;

    private string search = "world";

    private void After()
    {
        found = strings.Where(f => f.StartsWith(search)).ToArray();        
    }
}

здесь постобработка в @bind:after приводит к тому, что по мере ввода текста в <input> будет производиться поиск в массиве strings и результаты поиска будут динамически выводиться на странице.

@bind:format

Используя @bind:format, мы можем задать свой формат строки для привязки. Этот атрибут удобно использовать, например, для форматирования даты/времени:

@page "/"

 <input @bind="startDate" @bind:format="dd-MM-yyyy" />


@code {
    private DateTime startDate = new(2024, 12, 30);
}

Результат:

Итого

Для привязки данных в компонентах используется атрибут @bind, для которого могут применяться различные модификаторы. Двухсторонняя привязка должна осуществляться с помощью пары @bind:get/@bind:set, для постобработки данных используется @bind:after, а для форматирования строк — @bind:format.