Accedere ai dati da un componente Blazor
- 7 minuti
I siti Web coinvolgenti devono visualizzare contenuti dinamici che potrebbero cambiare sempre. Imparare a ottenere dati da un'origine dinamica, ad esempio un database o un servizio Web, è una tecnica fondamentale per lo sviluppo Web.
Supponiamo che tu lavori per un'azienda di consegna di pizze sul suo sito Web aggiornato rivolto ai clienti. Hai una gamma di pagine Web disposte e progettate come componenti Blazor. A questo scopo, è possibile popolare tali pagine con informazioni su pizze, condimenti e ordini che si desidera ottenere da un database.
In questa unità si apprenderà come accedere ai dati ed eseguirne il rendering all'interno del markup HTML per la visualizzazione all'utente.
Creazione di un servizio dati registrato
Se si vuole creare un sito Web dinamico che mostra la modifica delle informazioni agli utenti, è necessario scrivere codice per ottenere tali dati da un punto qualsiasi. Si supponga, ad esempio, di avere un database che archivia tutte le pizze vendute dall'azienda. Poiché le pizze cambiano sempre, è una cattiva idea inserirle direttamente nel codice HTML del sito. Usare invece il codice C# e Blazor per eseguire query sul database e quindi formattare i dettagli come HTML in modo che l'utente possa selezionare i preferiti.
In un'app Blazor Server è possibile creare un servizio registrato per rappresentare un'origine dati e ottenere dati da esso.
Note
Le origini dei dati che è possibile usare in un'app Blazor includono database relazionali, database NoSQL, servizi Web, vari servizi di Azure e molti altri sistemi. È possibile usare tecnologie .NET come Entity Framework, client HTTP e ODBC (Open Database Connectivity) per eseguire query su tali origini. Queste tecniche non rientrano nell'ambito di questo modulo. In questa sezione viene illustrato come formattare e usare i dati ottenuti da una di queste origini e tecnologie.
La creazione di un servizio registrato inizia scrivendo una classe che ne definisce le proprietà. Ecco un esempio che è possibile scrivere per rappresentare una 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; }
}
La classe definisce le proprietà e i tipi di dati della pizza. È necessario assicurarsi che queste proprietà corrispondano allo schema della pizza nell'origine dati. È opportuno creare questa classe nella cartella Dati del progetto e usare uno spazio dei nomi membro denominato Data. Se si preferisce, è possibile scegliere altre cartelle e spazi dei nomi.
Successivamente, si definirà il servizio:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Si noti che il servizio usa una chiamata asincrona per accedere ai dati e restituire una raccolta di Pizza oggetti. L'origine dati potrebbe essere remota dal server in cui è in esecuzione il codice Blazor. In tal caso, usare una chiamata asincrona. Se l'origine dati risponde lentamente, altri codici possono continuare a essere eseguiti mentre si attende la risposta.
È possibile registrare il servizio aggiungendo una riga alla Add Services to the container sezione nel file Program.cs :
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Uso di un servizio per ottenere i dati
Ora utilizzi il servizio che hai definito, chiamandolo in un componente Blazor e ottenendo i dati. Si supponga di avere il codice componente seguente e di voler visualizzare le pizze:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Inserimento del servizio
Prima di poter chiamare il servizio dal componente, è necessario usare l'iniezione delle dipendenze per aggiungere il servizio. Inserire il servizio aggiungendo il codice seguente dopo la @page direttiva :
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
In genere, il componente e il servizio si trovano in membri dello spazio dei nomi diversi, pertanto è necessario includere la direttiva @using. Questa direttiva funziona allo stesso modo di un'istruzione using all'inizio di un file di codice C#. La @inject direttiva aggiunge il servizio al componente corrente e ne avvia un'istanza. Nella direttiva specificare il nome della classe del servizio. Farlo seguire dal nome che si vuole usare per l'istanza del servizio in questo componente.
Eseguire l'override del metodo OnInitializedAsync
Un buon posto per chiamare il servizio e ottenere i dati è il metodo OnInitializedAsync. Questo evento viene generato quando l'inizializzazione del componente è completa e riceve i relativi parametri iniziali, ma prima che venga eseguito il rendering e la visualizzazione della pagina all'utente. L'evento viene definito nella classe base del componente Blazor. È possibile eseguirne l'override in un blocco di codice come in questo esempio:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Chiamare il servizio per ottenere i dati
Quando si chiama il servizio, usare la await parola chiave perché la chiamata è asincrona:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Visualizzazione dei dati all'utente
Dopo aver ottenuto alcuni dati dal servizio, è necessario visualizzarli all'utente. Nell'esempio delle pizze si prevede che il servizio restituisca un elenco di pizze tra cui gli utenti possono scegliere. Blazor include un set completo di direttive che è possibile usare per inserire questi dati nella pagina visualizzata dall'utente.
Verifica della presenza di dati
Determiniamo cosa viene visualizzato nella pagina prima del caricamento delle pizze controllando se la todaysPizzas raccolta è null. Per eseguire il codice di rendering condizionale in un componente Blazor, usare la @if direttiva :
@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 -->
}
La @if direttiva esegue il rendering del markup nel primo blocco di codice solo se l'espressione C# restituisce true. È possibile utilizzare un blocco di codice else if per eseguire altri test e generare il markup se sono validi. Infine, è possibile specificare un else blocco di codice per il rendering del codice se nessuna delle condizioni precedenti ha restituito true. Verificando la presenza di null nel blocco di codice @if, si assicura che Blazor non tenti di visualizzare i dettagli della pizza prima che i dati siano ottenuti dal servizio.
Note
Blazor include anche la direttiva @switch per eseguire il rendering del markup in base a un test che può restituire più valori. La @switch direttiva funziona in modo analogo all'istruzione C# switch .
Renderizzazione di una raccolta di oggetti
Se Blazor esegue l'istruzione else nel codice precedente, si sa che alcune pizze sono state ottenute dal servizio. L'attività successiva consiste nel visualizzare queste pizze all'utente. Si esaminerà ora come visualizzare i dati in una semplice tabella HTML.
Non sappiamo quanti pizze sono disponibili quando codiciamo questa pagina. È possibile usare la @foreach direttiva per scorrere tutti gli oggetti nell'insieme todaysPizzas ed eseguire il rendering di una riga per ognuno di essi:
<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>
Probabilmente si vuole una visualizzazione più ricca di pizze rispetto alla tabella normale illustrata in questo esempio. È possibile formattare il prezzo e altri valori. Collaborare con i progettisti grafici per sviluppare un'interfaccia utente più coinvolgente. Ad esempio, includere immagini di ogni pizza.
Note
Blazor include altre direttive di ciclo, ad esempio @for, @whilee @do while. Queste direttive restituiscono blocchi di markup ripetuti. Funzionano in modo analogo ai cicli C# forwhile, e do...while equivalenti.
Nell'unità successiva si registrerà un servizio dati personalizzato.