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

Вы определили пользовательский интерфейс для веб-приложения. Теперь давайте рассмотрим, как добавить логику в приложение. В приложении Blazor можно добавить код C# в отдельные .cs файлы или встроенные компоненты Razor.

Встроенные компоненты C#

Обычно рекомендуется смешивать HTML и C# в одном файле компонента Razor. Для простых компонентов с более легкими требованиями к коду этот подход хорошо работает. Чтобы добавить код в файл Razor, вы будете использовать синтаксис Razor.

Что такое директивы Razor?

Директивы Razor — это разметка компонентов, используемая для добавления встроенного кода C# в HTML. С помощью директив разработчики могут определять отдельные операторы, методы или более крупные блоки кода.

Директивы кода

Директивы кода должны быть знакомы разработчикам, которые использовали Razor в MVC или Pages.

Вы можете использовать @expression() для добавления инструкции C#, встроенной в HTML. Если требуется больше кода, используйте директиву @code для добавления нескольких выражений, заключенных в скобки.

Вы также можете добавить раздел @functions в шаблон для методов и свойств. Они добавляются в верхнюю часть созданного класса, где документ может ссылаться на них.

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

В компонентах Razor можно привязать HTML-элементы к данным в полях C#, свойствах и значениях выражений Razor. Привязка данных позволяет двусторонней синхронизации между HTML и кодом.

Данные отправляются из HTML в .NET при отрисовке компонента. Компоненты отрисовываются после завершения выполнения кода обработчика события, поэтому обновления свойств отражаются в пользовательском интерфейсе сразу после запуска обработчика события.

Используйте разметку @bind для привязки переменной C# к входным данным HTML. В следующем упражнении вы увидите пример привязки данных.