Acessar dados de um componente Blazor
Os sites envolvidos precisam exibir o conteúdo dinâmico que pode ser alterado o tempo todo. A obtenção de dados de uma fonte dinâmica, como um banco de dados ou serviço Web, é uma técnica fundamental no desenvolvimento para a Web.
Suponha que você esteja trabalhando no site atualizado voltado para o cliente de uma empresa de entrega de pizza. Você tem uma variedade de páginas da Web criadas e projetadas como componentes Blazor. Agora, você quer preencher essas páginas com informações sobre pizzas, recheios e pedidos que serão obtidas de um banco de dados.
Nesta unidade, você aprenderá a acessar dados e renderizá-los na marcação HTML para exibição ao usuário.
Como criar um serviço de dados registrado
Se você quiser criar um site dinâmico que mostra informações variadas para os usuários, escreva o código para obter esses dados de algum lugar. Por exemplo, suponha que você tenha um banco de dados que armazena todas as pizzas vendidas por sua empresa. Como as pizzas estão sempre mudando, é uma má ideia codificá-las no HTML do site. Em vez disso, use o código C# e o Blazor para consultar o banco de dados e, em seguida, formatar os detalhes como HTML, para que o usuário possa escolher a preferida.
Em um aplicativo Blazor Server, é possível criar um serviço registrado para representar uma fonte de dados e obter dados dele.
Observação
As fontes de dados que você pode usar em um aplicativo Blazor incluem bancos de dados relacionais, bancos de dados NoSQL, serviços Web, vários serviços do Azure e muitos outros sistemas. É possível usar tecnologias .NET para consultar essas fontes, como Entity Framework, clientes HTTP e ODBC. Essas técnicas estão além do escopo deste módulo. Aqui, você aprenderá a formatar e a usar dados obtidos de uma dessas fontes e tecnologias.
A criação de um serviço registrado começa escrevendo uma classe que define suas propriedades. Veja um exemplo que você pode escrever para representar uma pizza:
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; }
}
A classe define as propriedades e os tipos de dados da pizza. Você deve verificar se essas propriedades correspondem ao esquema de pizza na fonte de dados. Faz sentido criar essa classe na pasta Dados do seu projeto e usar um namespace de membro chamado Dados. Se preferir, você pode escolher outras pastas e namespaces.
Em seguida, você definiria o serviço:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Observe que o serviço usa uma chamada assíncrona para acessar dados e retornar uma coleção de objetos Pizza. A fonte de dados pode ser remota do servidor em que o código Blazor está em execução. Nesse caso, use uma chamada assíncrona. Se a fonte de dados responder lentamente, outro código poderá continuar a ser executado enquanto você aguarda a resposta.
Você também deve registrar o serviço adicionando uma linha à seção Add Services to the container no arquivo Program.cs:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Como usar um serviço para obter dados
Agora use o serviço que você definiu chamando-o em um componente Blazor e obtendo dados. Vamos supor que você tenha o seguinte código de componente e queira exibir pizzas nele:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Como injetar o serviço
Antes de chamar o serviço do componente, use a injeção de dependência para adicionar o serviço. Injete o serviço adicionando o seguinte código após a diretiva @page:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Normalmente, o componente e o serviço estão em membros diferentes do namespace. Portanto, você deve incluir a diretiva @using. Essa diretiva funciona da mesma maneira que uma instrução using na parte superior de um arquivo de código C#. A diretiva @inject adiciona o serviço ao componente atual e inicia uma instância dele. Na diretiva, especifique o nome da classe de serviço. Siga pelo nome que você deseja usar para a instância do serviço neste componente.
Substituir o método OnInitializedAsync
Um bom lugar para chamar o serviço e obter dados é no método OnInitializedAsync. Esse evento dispara após a conclusão da inicialização do componente e após ele ter recebido parâmetros iniciais, mas antes de a página ser renderizada e exibida para o usuário. O evento é definido na classe base do componente Blazor. Você pode substituí-lo em um bloco de código como neste exemplo:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Chamar o serviço para obter dados
Ao chamar o serviço, use a palavra-chave await, pois a chamada é assíncrona:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Como exibir dados para o usuário
Depois de obter alguns dados do serviço, convém exibi-los para o usuário. No exemplo de pizzas, esperamos que o serviço retorne uma lista de pizzas para escolha dos usuários. O Blazor inclui um conjunto avançado de diretivas que você pode usar para inserir esses dados na página visto pelo usuário.
Como verificar se há dados
Primeiro, determine o que a página exibe antes que as pizzas sejam carregadas. Podemos fazer isso verificando se a coleção todaysPizzas é null. Para executar o código de renderização condicional em um componente Blazor, use a diretiva @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 -->
}
A diretiva @if renderizará a marcação em seu primeiro bloco de código somente se a expressão C# retornar true. Você também poderá usar um bloco de código else if para executar outros testes e renderizar a marcação, se eles forem verdadeiros. Por fim, é possível especificar um bloco de código else para renderizar o código se nenhuma das condições anteriores tiver retornado true. Ao verificar se há null no bloco de código @if, você garantirá que o Blazor não tentará exibir detalhes da pizza antes que os dados sejam obtidos do serviço.
Observação
O Blazor também inclui a diretiva @switch para renderização de marcação com base em um teste que pode retornar vários valores. A diretiva @switch funciona de forma semelhante à instrução switch do C#.
Como renderizar uma coleção de objetos
Se o Blazor executar a instrução else no código anterior, você saberá que algumas pizzas foram obtidas do serviço. A próxima tarefa é exibir essas pizzas para o usuário. Vamos examinar como exibir os dados em uma tabela HTML simples.
Não sabemos quantas pizzas estarão disponíveis quando codificarmos esta página. Podemos usar a diretiva @foreach para executar um loop em todos os objetos da coleção todaysPizzas e renderizar uma linha para cada um:
<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>
É claro que você provavelmente desejará uma exibição mais rica de pizzas do que a tabela simples mostrada neste exemplo. Talvez você queira formatar o preço e outros valores. Trabalhe com seus designers gráficos para desenvolver uma interface do usuário mais atrativa. Por exemplo, inclua imagens de cada pizza.
Observação
O Blazor inclui outras diretivas de loop, como @for, @while e @do while. Essas diretivas retornam blocos de marcação repetidos. Eles funcionam de forma semelhante aos loops for, while e do...while equivalentes do C#.
Na próxima unidade, você registrará seu próprio serviço de dados!