Zugreifen auf Daten über eine Blazor-Komponente
- 7 Minuten
Ansprechende Websites müssen dynamische Inhalte anzeigen, die sich möglicherweise immer wieder ändern. Das Abrufen von Daten aus einer dynamischen Quelle wie einer Datenbank oder einem Webdienst ist eine grundlegende Technik der Webentwicklung.
Angenommen, Sie arbeiten für einen Pizzalieferdienst an dessen aktualisierter Kundenwebsite. Sie verfügen über eine Reihe von Webseiten, die als Blazor-Komponenten angelegt und entworfen wurden. Nun möchten Sie diese Seiten mit Informationen zu Pizzas, Belägen und Bestellungen füllen, die aus einer Datenbank abgerufen werden sollen.
In dieser Lerneinheit erfahren Sie, wie Sie auf Daten zugreifen und sie zur Anzeige für den Benutzer im HTML-Markup rendern.
Erstellen eines registrierten Datendiensts
Wenn Sie eine dynamische Website erstellen möchten, auf der sich ändernde Informationen für Benutzer angezeigt werden, müssen Sie Code schreiben, um diese Daten von einem Ort abzurufen. Angenommen, Sie verfügen über eine Datenbank, in der alle von Ihrem Unternehmen verkauften Pizzas gespeichert sind. Da sich die Pizzas ständig ändern, ist es keine gute Idee, sie im HTML-Code der Website hart zu codieren. Verwenden Sie stattdessen C#-Code und Blazor, um die Datenbank abzufragen und dann die Details als HTML zu formatieren, damit der Benutzer seinen Favoriten auswählen kann.
In einer Blazor Server-App können Sie einen registrierten Dienst erstellen, um eine Datenquelle darzustellen und Daten daraus abzurufen.
Hinweis
Zu den Datenquellen, die Sie in einer Blazor-App verwenden können, gehören relationale Datenbanken, NoSQL-Datenbanken, Webdienste, verschiedene Azure-Dienste und viele andere Systeme. Sie können .NET-Technologien wie Entity Framework, HTTP-Clients, ODBC usw. verwenden, um diese Quellen abzufragen. Diese Techniken würden jedoch den Rahmen dieses Moduls sprengen. Hier erfahren Sie, wie Sie Daten, die Sie aus einer dieser Quellen und Technologien erhalten haben, formatieren und verwenden können.
Die Erstellung eines registrierten Diensts beginnt mit dem Schreiben einer Klasse, die seine Eigenschaften definiert. Hier sehen Sie ein Beispiel dafür, was Sie schreiben können, um eine Pizza darzustellen:
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; }
}
Die Klasse definiert die Eigenschaften und Datentypen der Pizza. Sie müssen sicherstellen, dass diese Eigenschaften mit dem Pizzaschema in der Datenquelle übereinstimmen. Es ist sinnvoll, diese Klasse im Ordner Data Ihres Projekts zu erstellen und einen Membernamespace namens Data zu verwenden. Wenn Sie möchten, können Sie andere Ordner und Namespaces auswählen.
Als Nächstes definieren Sie den Dienst:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Beachten Sie, dass der Dienst einen asynchronen Aufruf verwendet, um auf Daten zuzugreifen und eine Auflistung von Pizza-Objekten zurückzugeben. Die Datenquelle kann sich remote vom Server befinden, auf dem der Blazor-Code ausgeführt wird. Verwenden Sie in diesem Fall einen asynchronen Aufruf. Dann kann, sollte die Datenquelle nur langsam antworten, anderer Code weiterhin ausgeführt werden, während Sie auf die Antwort warten.
Zum Registrieren des Diensts müssen Sie außerdem in der Datei Program.cs dem Abschnitt Add Services to the container eine Zeile hinzufügen:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Abrufen von Daten mit einem Dienst
Jetzt müssen Sie den von Ihnen definierten Dienst verwenden, indem Sie ihn in einer Blazor-Komponente aufrufen und Daten abrufen. Angenommen, Sie verfügen über den folgenden Komponentencode und möchten Pizzas darin anzeigen:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Einfügen des Diensts
Bevor Sie den Dienst über die Komponente aufrufen können, müssen Sie die Abhängigkeitsinjektion verwenden, um den Dienst hinzuzufügen. Injizieren Sie diesen Dienst durch Hinzufügen des folgenden Codes nach der @page-Anweisung:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
In der Regel befinden sich die Komponente und der Dienst in unterschiedlichen Namespacemembern. Daher müssen Sie die @using-Anweisung hinzufügen. Diese Direktive funktioniert auf gleiche Weise wie eine using-Anweisung am Anfang einer C#-Codedatei. Die @inject-Direktive fügt den Dienst der aktuellen Komponente hinzu und initiiert eine Instanz davon. Geben Sie in der Anweisung den Namen der Dienstklasse an. Schließen Sie daran den Namen an, den Sie für die Dienstinstanz in dieser Komponente verwenden möchten.
Überschreiben der OnInitializedAsync-Methode
Ein guter Ort zum Aufrufen des Diensts und Abrufen von Daten ist die OnInitializedAsync-Methode. Dieses Ereignis wird ausgelöst, wenn die Initialisierung der Komponente abgeschlossen ist und erste Parameter empfangen wurden, jedoch bevor die Seite gerendert und dem Benutzer angezeigt wird. Das Ereignis wird in der Stammklasse der Blazor-Komponente definiert. Sie können es in einem Codeblock wie diesem Beispiel überschreiben:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Aufrufen des Diensts zum Abrufen von Daten
Denken Sie beim Aufrufen des Diensts daran, das Schlüsselwort await zu verwenden, da der Aufruf asynchron ist:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Anzeigen von Daten für den Benutzer
Nachdem Sie einige Daten aus dem Dienst abgerufen haben, zeigen Sie sie dem Benutzer an. Bei dem hier verwendeten Pizzabeispiel wird erwartet, dass der Dienst eine Liste von Pizzen zurückgibt, aus der die Benutzer auswählen können. Blazor umfasst eine Vielzahl von Direktiven, mit denen Sie diese Daten in die Seite einfügen können, die dem Benutzer angezeigt wird.
Prüfen auf Daten
Bestimmen Sie zunächst, was auf der Seite angezeigt wird, bevor die Pizzen geladen werden. Dazu können Sie überprüfen, ob die Auflistung todaysPizzas den Wert null aufweist. Zum Ausführen von Code für bedingtes Rendering in einer Blazor-Komponente verwenden Sie die @if-Direktive:
@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 -->
}
Die @if-Direktive rendert das Markup im ersten Codeblock nur, wenn der C#-Ausdruck den Wert true zurückgibt. Sie können auch einen else if-Codeblock verwenden, um weitere Tests durchzuführen und das Markup zu rendern, wenn die Tests bestanden werden. Außerdem können Sie einen else-Codeblock angeben, um Code zu rendern, wenn keine der vorherigen Bedingungen den Wert „true“ zurückgegeben hat. Indem Sie den @if-Codeblock auf den Wert null überprüfen, stellen Sie sicher, dass Blazor nicht versucht, Pizzadetails anzuzeigen, bevor Daten vom Dienst empfangen wurden.
Hinweis
Blazor enthält auch die @switch-Anweisung zum Rendern von Markup auf der Grundlage eines Tests, der mehrere Werte zurückgeben kann. Die @switch-Anweisung funktioniert auf ähnliche Weise wie die switch-Anweisung von C#.
Rendern einer Sammlung von Objekten
Wenn Blazor die else-Anweisung im vorstehenden Code ausführt, wissen Sie, dass einige Pizzen vom Dienst abgerufen wurden. Ihre nächste Aufgabe besteht darin, diese Pizzen dem Benutzer anzuzeigen. Sehen wir uns an, wie die Daten in einer einfachen HTML-Tabelle angezeigt werden.
Zum Zeitpunkt, da wir diese Seite programmieren, wissen wir nicht, wie viele Pizzen verfügbar sein werden. Wir können die @foreach-Anweisung verwenden, um alle Objekte in der todaysPizzas-Auflistung zu durchlaufen und für jedes Objekt eine Zeile zu rendern:
<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>
Natürlich möchten Sie eine ansprechendere Anzeige der Pizzen erreichen als die einfache Tabelle in diesem Beispiel. Es kann dazu sinnvoll sein, den Preis und andere Werte zu formatieren. Arbeiten Sie mit Ihren Grafikdesignern zusammen, um eine angenehmere Benutzeroberfläche zu entwickeln. Beispielsweise können Sie ein Bild jeder Pizza einschließen.
Hinweis
Blazor enthält weitere Schleifenanweisungen, darunter @for, @while und @do while. Diese Anweisungen geben wiederholte Markupblöcke zurück. Sie funktionieren ähnlich wie die entsprechenden for-, while- und do...while-Schleifen in C#.
In der nächsten Lektion registrieren Sie Ihren eigenen Datendienst!