Zugreifen auf Daten aus einer Blazor-Komponente
- 7 Minuten
Ansprechende Websites müssen dynamische Inhalte anzeigen, die sich jederzeit ändern können. Das Erlernen von Daten aus einer dynamischen Quelle, z. B. einer Datenbank oder eines Webdiensts, ist eine grundlegende Technik in der Webentwicklung.
Angenommen, Sie arbeiten für eine Pizza-Lieferfirma auf der aktualisierten kundenorientierten Website. Sie verfügen über eine Reihe von Webseiten, die als Blazor-Komponenten ausgelegt und entworfen wurden. Jetzt möchten Sie diese Seiten mit Informationen zu Pizzas, Toppings und Bestellungen füllen, die Sie aus einer Datenbank abrufen möchten.
In dieser Lektion erfahren Sie, wie Sie auf Daten zugreifen und sie im HTML-Markup für die Anzeige für den Benutzer rendern.
Erstellen eines registrierten Datendiensts
Wenn Sie eine dynamische Website erstellen möchten, die Änderungen von Informationen für Benutzer anzeigt, müssen Sie Code schreiben, um diese Daten von überall abzurufen. Angenommen, Sie haben eine Datenbank, in der alle Pizzas gespeichert werden, die Ihr Unternehmen verkauft. Da sich die Pizzen immer ändern, ist es eine schlechte Idee, sie in den HTML-Code der Website zu hardcoden. Verwenden Sie stattdessen C#-Code und Blazor, um die Datenbank abzufragen, und formatieren Sie dann die Details als HTML, 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.
Note
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 und ODBC (Open Database Connectivity) verwenden, um diese Quellen abzufragen. Diese Techniken liegen außerhalb des Umfangs dieses Moduls. Hier erfahren Sie, wie Sie Daten formatieren und verwenden, die Sie aus einer dieser Quellen und Technologien abgerufen haben.
Die Erstellung eines registrierten Diensts beginnt mit dem Schreiben einer Klasse, die seine Eigenschaften definiert. Hier ist ein Beispiel, das 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 dem Pizzaschema in der Datenquelle entsprechen. Es ist sinnvoll, diese Klasse im Datenordner Ihres Projekts zu erstellen und einen Membernamespace namens "Data" zu verwenden. Wenn Es Ihnen lieber ist, können Sie andere Ordner und Namespaces auswählen.
Als Nächstes würden Sie den Dienst definieren:
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 Sammlung von Pizza Objekten zurückzugeben. Die Datenquelle kann vom Server entfernt sein, auf dem der Blazor-Code ausgeführt wird. Verwenden Sie in diesem Fall einen asynchronen Aufruf. Wenn die Datenquelle dann langsam reagiert, kann der andere Code weiterhin ausgeführt werden, während Sie auf die Antwort warten.
Sie würden den Dienst registrieren, indem Sie dem Abschnitt in der Add Services to the containerdatei Program.cs eine Zeile hinzufügen:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Verwenden eines Diensts zum Abrufen von Daten
Jetzt verwenden Sie den von Ihnen definierten Dienst, indem Sie ihn in einer Blazor-Komponente aufrufen und Daten abrufen. Angenommen, Sie haben den folgenden Komponentencode, und Sie 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 aus der Komponente aufrufen können, müssen Sie die Abhängigkeitsinjektion verwenden, um den Dienst hinzuzufügen. Fügen Sie den Dienst ein, indem Sie den folgenden Code nach der @page Direktive hinzufügen:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
In der Regel befinden sich die Komponente und der Dienst in verschiedenen Namespace-Membern, daher müssen Sie die @using Direktive einschließen. Diese Direktive funktioniert auf die gleiche Weise wie eine using Anweisung oben in einer C#-Codedatei. Die @inject-Direktive fügt den Dienst der aktuellen Komponente hinzu und initiiert eine Instanz davon. Geben Sie in der Direktive den Namen der Dienstklasse an. Geben Sie anschließend den Namen an, den Sie für die Instanz des Dienstes in dieser Komponente verwenden möchten.
Überschreiben der OnInitializedAsync-Methode
Ein guter Ort, um den Dienst aufzurufen und Daten abzurufen, befindet sich in der OnInitializedAsync Methode. Dieses Ereignis wird ausgelöst, wenn die Initialisierung der Komponente abgeschlossen ist und seine anfänglichen Parameter empfängt, aber bevor die Seite gerendert und dem Benutzer angezeigt wird. Das Ereignis wird in der Stammklasse der Blazor-Komponente definiert. Sie können ihn in einem Codeblock außer Kraft setzen, wie in diesem Beispiel:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Rufen Sie den Dienst auf, um Daten abzurufen.
Verwenden Sie beim Aufrufen des Diensts das await Schlüsselwort, 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, sollten Sie sie dem Benutzer anzeigen. Im Pizzabeispiel erwarten wir, dass der Dienst eine Liste von Pizzas zurückgibt, aus denen die Benutzer wählen können. Blazor enthält eine vielzahl von Direktiven, die Sie verwenden können, um diese Daten auf der Seite einzufügen, die der Benutzer sieht.
Überprüfung von Daten
Zunächst bestimmen wir, was die Seite anzeigt, bevor die Pizza geladen wird, indem wir überprüfen, ob die todaysPizzas Kollektion null ist. Verwenden Sie die @if Direktive, um bedingten Renderingcode in einer Blazor-Komponente auszuführen:
@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 andere Tests auszuführen und Markup zu rendern, wenn sie wahr sind. Schließlich können Sie einen else Codeblock angeben, um Code zu rendern, wenn keine der vorherigen Bedingungen "true" zurückgegeben wurde. Beim Überprüfen von null im @if Codeblock stellen Sie sicher, dass Blazor nicht versucht, Pizzadetails anzuzeigen, bevor Daten vom Dienst abgerufen werden.
Note
Blazor enthält auch die @switch Direktive zum Rendern von Markup basierend auf einem Test, der möglicherweise mehrere Werte zurückgibt. Die @switch Direktive funktioniert ähnlich wie die C# switch -Anweisung.
Rendern einer Auflistung von Objekten
Wenn Blazor die else Anweisung im vorherigen Code ausführt, wissen Sie, dass einige Pizzas aus dem Dienst abgerufen wurden. Die nächste Aufgabe besteht darin, diese Pizza dem Benutzer anzuzeigen. Sehen wir uns an, wie die Daten in einer einfachen HTML-Tabelle angezeigt werden.
Wir wissen nicht, wie viele Pizzas verfügbar sind, wenn wir diese Seite codieren. Wir können die @foreach Direktive verwenden, um alle Objekte in der todaysPizzas Auflistung zu durchlaufen und jeweils 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>
Wahrscheinlich möchten Sie eine umfangreichere Anzeige von Pizzas als die einfache Tabelle in diesem Beispiel. Möglicherweise möchten Sie den Preis und andere Werte formatieren. Arbeiten Sie mit Ihren Grafikdesignern zusammen, um eine ansprechendere Benutzeroberfläche zu entwickeln. Fügen Sie beispielsweise Bilder jeder Pizza ein.
Note
Blazor enthält weitere Schleifenanweisungen, darunter @for, @while und @do while. Diese Anweisungen geben wiederholte Markupblöcke zurück. Sie funktionieren auf ähnliche Weise wie die entsprechenden C#for-, while- und do...while-Schleifen.
Im nächsten Modul werden Sie Ihren eigenen Datendienst registrieren!