Привязка данных и событий

  • 6 мин

Давайте рассмотрим, как определить логику отрисовки компонентов и обрабатывать события пользовательского интерфейса.

Отображение значений выражений C#

Если вы хотите отобразить значение выражения C# в Razor, используйте ведущий @ символ. Например, Counter компонент может отобразить значение своего currentCount поля следующим образом:

<p role="status">Current count: @currentCount</p>

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

<p role="status">Current count: @(currentCount)</p>

Добавление потока управления

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

@if (currentCount > 3)
{
    <p>You win!</p>
}

Можно также использовать C# для циклического перебора данных и отрисовки списка элементов:

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Обработка событий

Компоненты Blazor часто обрабатывают события пользовательского интерфейса. Чтобы указать обратный вызов события для события из элемента пользовательского интерфейса, используйте атрибут, который начинается с @on и заканчивается именем события. Например, можно указать IncrementCount метод в качестве обработчика события нажатия кнопки с помощью атрибута @onclick , как показано ниже.

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Вы также можете указать обработчики событий C# для других событий HTML, например @onchange, @oninputи т. д. Методы обработки событий могут быть синхронными или асинхронными. Можно также определить встроенные обработчики событий с помощью лямбда-выражений C#:

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

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

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

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

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

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

Элемент пользовательского интерфейса привязывается к определенному значению в коде с помощью атрибута @bind . Например:

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

При изменении значения входных данных text поле обновляется новым значением. И при изменении значения text поля, нажав кнопку "Очистить", значение входных данных также очищается.

Директивы Razor

Директивы Razor — это зарезервированные ключевые слова в синтаксисе Razor, влияющие на компиляцию файла Razor. Директивы Razor всегда начинаются с символа @ . Некоторые директивы Razor отображаются в начале новой строки, например @page и @code, а другие — атрибуты, которые можно применять к элементам как атрибуты.@bind Полный список директив Razor можно найти в справочнике по синтаксису Razor.

Включение интерактивности

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

Директиву @rendermode можно применить к определению компонента:

@rendermode InteractiveServer

Или экземпляр компонента:

<Counter @rendermode="InteractiveServer" />

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

Схема интерактивной отрисовки сервера Blazor.

Кроме того, компоненты Blazor могут использовать InteractiveWebAssembly режим отрисовки для интерактивной отрисовки от клиента. В этом режиме код компонента загружается в браузер и запускается на стороне клиента с помощью среды выполнения .NET на основе WebAssembly.

Схема интерактивной отрисовки WebAssembly Blazor.

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