Будучи инженером-программистом, вы, скорее всего, понимали, что приложения с учетом всех обстоятельств - это всего лишь способ сбора информации и ее идеального представления конечному клиенту, чтобы он мог сделать некоторый разумный выбор. Действительно, существующие приложения значительно больше, чем это, но я пытаюсь сказать, что до того, как информация будет обнаружена, она должна появиться в приложении в соответствии с предварительными условиями клиента. Какие бы успехи вы ни выбрали для создания своего приложения, они предоставляют богатую схему выделения, чтобы связать информацию с различными элементами управления, и Blazor - не особый случай. Поскольку Blazor представляет собой структуру SPA, она поддерживает такие основные моменты, как сегменты, односторонняя, двусторонняя привязка данных и т. Д. Приложение, работающее с Blazor, полностью запускается в программе. Blazor поддерживает 3 вида привязки данных.
Темы для обсуждения
- Односторонняя привязка данных
- Двусторонняя привязка данных
Предварительные условия
- Если вы новичок в Blazor, я настоятельно рекомендую вам прочитать центральную статью о Blazor, которая должна быть практически готова ответить на все ваши вопросы относительно того, что такое Blazor.
- Visual Studio или Visual Studio Code (VS Code) установлен на вашем компьютере.
- Шаблоны Blazor
- Языковые услуги Blazor
Односторонняя привязка данных
Проще говоря, односторонняя привязка данных - это данные, передаваемые от класса компонента к представлению компонента (страница Razor). В этом представлении мы связываем имена, которые мы уже определили в классе компонентов. В Blazor при изменении односторонней привязки приложение будет нести ответственность за внесение изменений. Это могло произойти в ответ на действие пользователя или события, такие как нажатие кнопки. Дело в том, что пользователь никогда не сможет изменить значение напрямую, отсюда и односторонняя привязка.
Давайте посмотрим на несколько примеров.
Создайте приложение Blazor Server в Visual Studio.
Выберите целевую структуру для этого проекта.
Теперь создадим класс внутри папки Data для определения свойства, чтобы односторонняя привязка данных происходила от класса компонента к представлению компонента.
DataBind.cs
Index.razor
давайте унаследуем класс из индекса. razor, чтобы вызвать свойства, которые находятся в классе Databind и будут назначены свойству HTML, которое выделено ниже. Так работает односторонняя привязка данных.
Вывод
Двусторонняя привязка данных
Теперь мы знаем все об односторонней привязке данных. Основной вариант использования двусторонней привязки данных в формах, который может быть реализован с помощью атрибута «@bind». Blazor имеет 3 разные формы, которые позволяют разработчикам очень точно определять, как они хотят, чтобы эта привязка происходила.
Index.razor
Атрибут bind будет искать присвоенное значение в компоненте класса и выполнять привязку соответственно.
Вывод
Попробуйте добавить имя в текстовое поле, и оно появится во всех местах, где мы использовали имя свойства.
Надеюсь, эта статья поможет вам понять такие концепции, как односторонняя и двусторонняя привязка данных.
Продолжай учиться ……!
