Acessar dados de um componente Blazor
- 7 minutos
Sites atraentes 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 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 organizadas 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ê aprende como acessar dados e processá-los dentro da 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 variáveis aos 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 armazena 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 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 dela.
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 .NET, como Entity Framework, clientes HTTP e ODBC (Open Database Connectivity) para consultar essas fontes. Estas técnicas estão fora do âmbito deste módulo. Aqui, você aprende 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 certificar-se de que essas propriedades correspondem ao esquema pizza na fonte de dados. Faz sentido criar essa classe na pasta Data do seu projeto e usar um namespace membro chamado Data. 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 onde o código Blazor está sendo executado. Nesse caso, use uma chamada assíncrona. Em seguida, se a fonte de dados responder lentamente, outro código pode 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 que 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>
Injetar o serviço
Antes de poder 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 diretiva @page:
@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 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-o 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 é acionado quando a inicialização do componente é concluída e ele 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
}
Ligue para o serviço para obter dados
Ao chamar o serviço, use a palavra-chave await 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ê vai querer exibi-los para o usuário. No exemplo das pizzas, esperamos que o serviço retorne uma lista de pizzas que os usuários podem escolher. Blazor inclui um rico conjunto de diretivas que você pode usar para inserir esses dados na página que o usuário vê.
Verificação de dados
Primeiro, determinamos o que a página exibe antes das pizzas serem 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 diretiva @if 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 bloco de código else if para executar outros testes e renderizar marcações se forem verdadeiros. Finalmente, você pode especificar um bloco de código else para renderizar o código se nenhuma das condições anteriores retornou true. Ao verificar a presença de null no bloco de código @if, garante que o Blazor não tente exibir detalhes da pizza antes que os dados sejam obtidos do serviço.
Note
Blazor também inclui a diretiva @switch para renderizar markup com base num teste que possa retornar vários valores. A diretiva @switch funciona de forma semelhante à instrução C# switch.
Renderizando uma coleção de objetos
Se Blazor executa a instrução else no código anterior, você sabe que algumas pizzas foram obtidas do serviço. A próxima tarefa é exibir essas pizzas para o usuário. Vamos ver 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 diretiva @foreach para percorrer todos os objetos na 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>
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 fotos de cada pizza.
Note
Blazor inclui outras diretivas de looping, como @for, @whilee @do while. Essas diretivas retornam blocos repetidos de marcação. Eles funcionam de maneira semelhante aos ciclos equivalentes de C#: for, whilee do...while.
Na próxima unidade, você registrará seu próprio serviço de dados!