.NET Разработчик

День 2018. #BlazorBasics
Основы Blazor. Привязка Данных
Привязка данных используется для синхронизации данных между пользовательским интерфейсом и моделью данных C#. Также она позволяет реагировать на события, которые запускает пользователь или браузер.

1. Одностороннее связывание — связывание свойств
Это самый базовый подход, используемый для вывода содержимого свойства или переменной C# на экран:

<h1>@Title</h1>

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

В этом компоненте в элемент <h1> выводятся данные с помощью символа @, за которым следует имя свойства или переменной. Всякий раз, когда содержимое свойства Title изменяется, UI автоматически обновляется, чтобы отразить новое значение.
Тот же подход можно использовать, чтобы предоставить значение свойства в качестве аргумента для параметра компонента.

@page "/MyPage"
<MyComponent Title="@Name" />
…

Здесь мы отображаем дочерний компонент MyComponent, задавая его параметру Title значение параметра Name страницы MyPage.

2. Двусторонняя привязка
При использовании двусторонней привязки данных данные передаются из модели данных в UI и обратно:

<input @bind="Username" />

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

В этом компоненте мы привязываем свойство Username к свойству value текстового поля. Синтаксис @bind — это сокращение. Каждый компонент имеет свойство по умолчанию, привязываемое при использовании сокращённого синтаксиса. Мы также могли бы использовать более длинную форму и явно привязаться к свойству value:

<input @bind-value="Username" />
…

Заметьте, что важно использовать правильный синтаксис. Например, при использовании компонента InputText, Value нужно писать с заглавной буквы, потому что компонент имеет свойство Value:

<InputText @bind-Value="Username" />

Обычно используйте нижний регистр для стандартных HTML-элементов и заглавные буквы для свойств компонентов Blazor.

3. Привязка событий
В дополнение к односторонней и двусторонней привязке данных мы можем привязать метод C# к событию:

<h3>User</h3>

<EditForm Model="@Model" OnSubmit="@Save">
  <InputText @bind-Value="Model.Username" />
  <input type="submit" value="Submit" />
</EditForm>

@code {
  public User Model { get; set; } = new User();
  public void Save()
  {
    // Сохраняем пользователя
  }
  
  public class User
  {
    public string Username { get; set; }
  }
}

Здесь мы привязываем:
- свойство Model к параметру Model компонента EditForm,
- свойство Value компонента InputText к свойству Username класса User,
- метод Save к событию OnSubmit компонента EditForm.
Когда пользователь отправляет форму с помощью кнопки отправки, срабатывает событие OnSubmit и вызывается метод Save. В методе Save мы можем получить доступ к имени пользователя с помощью свойства Model и, например, сохранить его в базе данных.

Событие можно связать и с отдельным HTML-элементом:

<input type="button" @onclick="Save" />

Источник: https://www.telerik.com/blogs/blazor-basics-data-binding

👍13

2.26K views05:01