Acessar dados de um componente Blazor
- 7 minutos
Sites envolventes precisam exibir conteúdo dinâmico que pode mudar o tempo todo. Aprender a obter dados de uma fonte dinâmica, como um banco de dados ou serviço Web, é uma técnica fundamental no desenvolvimento da Web.
Suponha que você esteja trabalhando para uma empresa de entrega de pizza em seu site atualizado voltado para o cliente. Você tem uma variedade de páginas da Web criadas e projetadas como componentes Blazor. Agora, você deseja preencher essas páginas com informações sobre pizzas, coberturas e pedidos que deseja obter 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.
Criando um serviço de dados registrado
Se você quiser criar um site dinâmico que mostre informações de alteração para os usuários, você deve escrever código para obter esses dados de algum lugar. Por exemplo, suponha que você tenha um banco de dados que armazene todas as pizzas que sua empresa vende. 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, formate os detalhes como HTML para que o usuário possa escolher seu favorito.
Em um aplicativo Blazor Server, você pode criar um serviço registrado para representar uma fonte de dados e obter dados dele.
Note
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. Você pode usar tecnologias do .NET, como Entity Framework, clientes HTTP e ODBC (Open Database Connectivity) para consultar essas fontes. Essas técnicas estão além do escopo deste módulo. Aqui, você aprenderá a formatar e 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. Aqui está 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ê definirá 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 Pizza objetos. 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. Em seguida, se a fonte de dados responder lentamente, outro código poderá continuar a ser executado enquanto você aguarda a resposta.
Você registraria o serviço adicionando uma linha à Add Services to the container seção no arquivo Program.cs :
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Usando um serviço para obter dados
Agora você usa o serviço definido chamando-o em um componente Blazor e obtendo dados. Vamos supor que você tenha o seguinte código de componente e deseja 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, você deve usar a injeção de dependência para adicionar o serviço. Injete o serviço adicionando o seguinte código após a @page diretiva:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Normalmente, o componente e o serviço estão em membros de namespace diferentes, portanto, você deve incluir a diretiva @using. Essa diretiva funciona da mesma forma que uma using instrução na parte superior de um arquivo de código C#. A @inject diretiva 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 está no OnInitializedAsync método. Esse evento é acionado quando a inicialização do componente é concluída e recebe seus parâmetros iniciais, mas antes que a página seja 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 await palavra-chave porque a chamada é assíncrona:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Exibindo dados para o usuário
Depois de obter alguns dados do serviço, você desejará exibi-los para o usuário. No exemplo de pizzas, esperamos que o serviço retorne uma lista de pizzas que os usuários podem escolher. O Blazor inclui um conjunto avançado de diretivas que você pode usar para inserir esses dados na página que o usuário vê.
Verificando se há dados
Primeiro, determinamos o que a página exibe antes que as pizzas sejam carregadas verificando se a todaysPizzas coleção é 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 @if diretiva renderiza a marcação em seu primeiro bloco de código somente se a expressão C# retornar true. Você também pode usar um else if bloco de código para executar outros testes e renderizar a marcação se eles forem verdadeiros. Por fim, você pode especificar um else bloco de código para renderizar o código se nenhuma das condições anteriores retornar true. Ao verificar a presença de null no bloco de código @if, você garante que o Blazor não tentará exibir detalhes da pizza antes que os dados sejam obtidos do serviço.
Note
Blazor também inclui a diretiva @switch para renderizar marcações com base em um teste que pode retornar vários valores. A @switch diretiva funciona de maneira semelhante à instrução C# switch .
Renderizando uma coleção de objetos
Se Blazor executar a else instrução 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 estão disponíveis quando codificamos esta página. Podemos usar a @foreach diretiva para percorrer todos os objetos da todaysPizzas coleção e renderizar uma linha para cada um deles:
<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>
Você provavelmente quer 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 envolvente. Por exemplo, inclua imagens de cada pizza.
Note
Blazor inclui outras diretivas de looping, como @for, @whilee @do while. Essas diretivas retornam blocos de marcação repetidos. Eles funcionam de maneira semelhante aos loops equivalentes de C# for, while e do...while.
Na próxima unidade, você registrará seu próprio serviço de dados!