Доступ к данным из компонента Blazor
- 7 мин
Привлекаемые веб-сайты должны отображать динамическое содержимое, которое может меняться все время. Изучение того, как получать данные из динамического источника, такого как база данных или веб-сервис, — это основной метод в веб-разработке.
Предположим, вы работаете в фирме по доставке пиццы над обновленным сайтом, ориентированным на клиентов. У вас есть ряд веб-страниц, макетированных и разработанных как компоненты Blazor. Теперь вы хотите заполнить эти страницы сведениями о пиццах, начинках и заказах, которые вы хотите получить из базы данных.
В этом уроке вы узнаете, как получить доступ к данным и отобразить его в разметке HTML для отображения пользователю.
Создание зарегистрированной службы данных
Если вы хотите создать динамический веб-сайт, показывающий изменение сведений для пользователей, необходимо написать код, чтобы получить эти данные откуда-то. Например, предположим, что у вас есть база данных, в которой хранятся все пиццы вашей компании. Поскольку пиццы постоянно меняются, это плохая идея жестко закодировать их в HTML-разметку веб-сайта. Вместо этого используйте код C# и Blazor для запроса к базе данных, а затем отформатируйте сведения в формате HTML, чтобы пользователь смог выбрать избранное.
В приложении Blazor Server можно создать зарегистрированную службу для представления источника данных и получения данных из него.
Note
Источники данных, которые можно использовать в приложении Blazor, включают реляционные базы данных, базы данных NoSQL, веб-службы, различные службы Azure и многие другие системы. Для запроса этих источников можно использовать такие технологии .NET, как Entity Framework, HTTP-клиенты и ODBC (Open Database Connectivity). Эти методы выходят за рамки этого модуля. Здесь вы узнаете, как форматировать и использовать данные, полученные из одного из этих источников и технологий.
Создание зарегистрированной службы начинается с написания класса, который определяет его свойства. Ниже приведен пример, который можно написать, чтобы представить пиццу:
namespace BlazingPizza.Data;
public class Pizza
{
public int PizzaId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public bool Vegetarian { get; set; }
public bool Vegan { get; set; }
}
Класс определяет свойства пиццы и типы данных. Вы должны удостовериться, что эти свойства соответствуют схеме пиццы в источнике данных. Этот класс имеет смысл создать в папке Data проекта и использовать пространство имен членов с именем Data. Если вы предпочитаете, можно выбрать другие папки и пространства имен.
Затем вы определите службу:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Обратите внимание, что служба использует асинхронный вызов для доступа к данным и возвращает коллекцию Pizza объектов. Источник данных может быть удален с сервера, на котором выполняется код Blazor. В этом случае используйте асинхронный вызов. Затем, если источник данных реагирует медленно, другой код может продолжать выполняться по мере ожидания ответа.
Чтобы зарегистрировать службу, добавьте строку в раздел Add Services to the container в файле Program.cs:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Использование службы для получения данных
Теперь вы используете службу, определенную путем вызова ее в компоненте Blazor и получения данных. Предположим, у вас есть следующий код компонента, и вы хотите отобразить в нем пиццы:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Внедрение службы
Прежде чем вызывать сервис из компонента, необходимо использовать внедрение зависимостей, чтобы добавить этот сервис. Интегрируйте службу, добавив следующий код после директивы @page:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Обычно компонент и служба находятся в разных членах пространства имен, поэтому необходимо включить директиву @using. Эта директива работает так же, как оператор using в верхней части файла кода C#. Директива @inject добавляет службу в текущий компонент и создает ее экземпляр. В директиве укажите имя класса службы. Укажите имя, которое хотите использовать для экземпляра службы в этом компоненте.
Переопределите метод OnInitializedAsync
Хорошее место для вызова службы и получения данных находится в методе OnInitializedAsync. Это событие запускается после завершения инициализации компонента и получает свои начальные параметры, но перед отображением страницы пользователю. Событие определяется базовым классом компонента Blazor. Его можно переопределить в блоке кода, как в следующем примере:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Вызов службы для получения данных
При вызове службы используйте ключевое слово await, так как вызов является асинхронным:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Отображение данных пользователю
После получения некоторых данных из службы вы хотите отобразить его пользователю. В примере пиццы мы ожидаем, что служба вернет список пицц, которые пользователи могут выбрать. Blazor включает широкий набор директив, которые можно использовать для вставки этих данных на страницу, которую видит пользователь.
Проверка данных
Во-первых, мы определяем, какие страницы отображаются перед загрузкой пиццы, проверяя, является todaysPizzasли null коллекция. Чтобы запустить код условной отрисовки в компоненте Blazor, используйте директиву @if:
@if (todaysPizzas == null)
{
<p>We're finding out what pizzas are available today...</p>
}
else
{
<!-- This markup will be rendered once the pizzas are loaded -->
}
Директива @if отображает разметку в первом блоке кода, только если выражение C# возвращает true. Вы также можете использовать блок кода else if для выполнения других тестов и отрисовки разметки, если они верны. Наконец, можно указать блок кода else для отрисовки кода, если ни одно из предыдущих условий не возвращалось true. Проверяя null в блоке кода @if, убедитесь, что Blazor не пытается отобразить сведения о пицце до получения данных из службы.
Note
Blazor также включает директиву @switch для отрисовки разметки в зависимости от теста, который может возвращать несколько значений. Директива @switch работает аналогично инструкции switch C#.
Отрисовка коллекции объектов
Если Blazor выполняет инструкцию else в предыдущем коде, вы знаете, что некоторые пиццы были получены из сервиса. Следующая задача — отобразить эти пиццы пользователю. Давайте рассмотрим, как отобразить данные в простой HTML-таблице.
Мы не знаем, сколько пицц доступно при разработке этой страницы. Директиву @foreach можно использовать для циклического перебора всех объектов в коллекции todaysPizzas и отрисовки строки для каждого из них:
<table>
<thead>
<tr>
<th>Pizza Name</th>
<th>Description</th>
<th>Vegetarian?</th>
<th>Vegan?</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var pizza in todaysPizzas)
{
<tr>
<td>@pizza.Name</td>
<td>@pizza.Description</td>
<td>@pizza.Vegetarian</td>
<td>@pizza.Vegan</td>
<td>@pizza.Price</td>
</tr>
}
</tbody>
</table>
Скорее всего, вы хотите более богатое отображение ассортимента пицц, чем простая таблица, показанная в этом примере. Может потребоваться отформатировать цену и другие значения. Обратитесь к графическим конструкторам для разработки более привлекательного пользовательского интерфейса. Например, включите фотографии каждой пиццы.
Note
Blazor включает другие директивы цикла, такие как @for, @whileи @do while. Эти директивы возвращают повторяющиеся блоки разметки. Они работают аналогично эквивалентным циклам C# for, whileи do...while.
В следующем уроке вы зарегистрируете собственную службу данных!