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

В Blazor механизм привязки данных может применяться к любом атрибуту html-элемента. Для привязки данных используется директива @bind-. Привязка данных в Blazor позволяет связать свойства и поля компонента в программной части компонента с какими-либо атрибутами html-элементов в визуальной части.

Директива @bind-

Синтаксис директивы @bind- следующий:

@bind-[название_атрибута]

В качестве примера, ниже показана привязка свойства Message к значению элемента <input>:

<input @bind-value="Message" />

@code {
    public string Message { get; set; }
}

Привязанное свойство или поле компонента Blazor обновляется, когда элемент <input> теряет фокус, то есть, фактически, обновление происходит в момент срабатывания события onchange. Убедиться в этом можно, используя следующий код:

@page "/attributes"

<input value="@Message" @onchange="@((ChangeEventArgs e) => Message = e.Value.ToString())" />
    <p>Значение переменной: @Message</p>

@code {
    public string Message { get; set; }
}

Более того, если попытаться привязать значение value у input к переменной Message и, одновременно, определить обработчик события onchange, то Visual Studio выдаст следующее исключение:

Таким образом, директива @bind просто-напросто избавляет нас от написания лишней логики привязки данных. Также следует отметить, что при привязке данных с помощью @bind производится преобразование типов. Для демонстрации этой возможности рассмотрим следующий пример:

@page "/bind"

<input @bind-value="Number" />
    <p>Значение переменной: @Number</p>

@code {
    public int Number { get; set; } = 123;
}

Здесь мы связали value и целочисленной свойство Number. Такая привязка вполне допустима и в запущенном приложении мы увидим:

Когда пользователь попробует присвоить элементу значение отличное от int, то мы не получим ошибку или аварийное завершение работы программы — Blazor просто присвоит элементу предыдущее значение. В этом можно убедиться, записав в input, например, значение 12,2.

Директива @bind:event

По умолчанию, в Blazor обновление привязанного свойства происходит при срабатывании события onchange html-элемента. Если мы хотим переопределить событие по которому будет осуществляться обновление данных, то необходимо использовать директиву @bind:event, которая имеет следующий синтаксис:

@bind:event="[событие_html_элемента]"

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

@page "/bind"

<input @bind="Message" @bind:event="oninput" />
    <p>Значение переменной: @Message</p>


@code {
    public string Message { get; set; } = "Привет";
}

Теперь обновление будет происходить по мере ввода текста пользователем.

Форматирование строк при привязке данных (@bind:format)

Blazor поддерживает форматирование при привязке данных. Для этого используется директива @bind:format, имеющая следующий синтаксис:

@bind:format="[стока_формата]"

Например:

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

<p>
    startDate: @startDate
</p>

@code {
    private DateTime startDate = new(2020, 1, 1);
}

В запущенном приложении мы увидим следующее:

Итого

Сегодня мы рассмотрели механизм привязки данных в Blazor. Привязка данных в Blazor осуществляется с использованием директив @bind, @bind:event и @bind:format. Обновление данных свойства или поля компонента по умолчанию происходит при срабатывании события onchange html-элемента, однако это поведение можно изменить, указав в директиве @bind:event необходимое нам событие.