Uzyskiwanie dostępu do danych ze składnika Blazor
Angażujące witryny internetowe muszą wyświetlać zawartość dynamiczną, która może się zmieniać przez cały czas. Uzyskiwanie danych ze źródła dynamicznego, takiego jak baza danych lub usługa internetowa, jest podstawową techniką tworzenia aplikacji internetowych.
Załóżmy, że pracujesz dla firmy dostarczającej pizzę w zaktualizowanej witrynie internetowej dla klientów. Masz szereg stron internetowych rozmieszczonych i zaprojektowanych jako składniki platformy Blazor. Teraz chcesz wypełnić te strony informacjami o pizzach, toppingach i zamówieniach, które chcesz uzyskać z bazy danych.
W tej lekcji dowiesz się, jak uzyskać dostęp do danych i renderować je w znacznikach HTML, aby wyświetlić je użytkownikowi.
Tworzenie zarejestrowanej usługi danych
Jeśli chcesz utworzyć dynamiczną witrynę internetową, która pokazuje zmiany informacji dla użytkowników, musisz napisać kod, aby pobrać te dane z jakiegoś miejsca. Załóżmy na przykład, że masz bazę danych, która przechowuje wszystkie pizze, które sprzedaje Twoja firma. Ponieważ pizze są zawsze zmieniane, to zły pomysł, aby zakodować je w kodzie HTML witryny internetowej. Zamiast tego użyj kodu C# i platformy Blazor, aby wykonać zapytanie względem bazy danych, a następnie sformatować szczegóły jako kod HTML, aby użytkownik mógł wybrać swój ulubiony kod.
W aplikacji serwera Blazor można utworzyć zarejestrowaną usługę reprezentującą źródło danych i uzyskać z niej dane.
Uwaga
Źródła danych, których można używać w aplikacji Blazor, obejmują relacyjne bazy danych, bazy danych NoSQL, usługi internetowe, różne usługi platformy Azure i wiele innych systemów. Do wykonywania zapytań dotyczących tych źródeł można użyć technologii .NET, takich jak Entity Framework, klienci HTTP i ODBC. Te techniki wykraczają poza zakres tego modułu. W tym miejscu dowiesz się, jak formatować i używać danych uzyskanych z jednego z tych źródeł i technologii.
Tworzenie zarejestrowanej usługi rozpoczyna się od zapisania klasy definiującej jej właściwości. Oto przykład, który możesz napisać, aby reprezentować pizzę:
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; }
}
Klasa definiuje właściwości i typy danych pizzy. Upewnij się, że te właściwości są zgodne ze schematem pizzy w źródle danych. Warto utworzyć tę klasę w folderze Dane projektu i użyć przestrzeni nazw składowej o nazwie Dane. Jeśli wolisz, możesz wybrać inne foldery i przestrzenie nazw.
Następnie zdefiniujesz usługę:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Zwróć uwagę, że usługa używa asynchronicznego wywołania w celu uzyskania dostępu do danych i zwrócenia kolekcji Pizza obiektów. Źródło danych może być zdalne z serwera, na którym działa kod Blazor. W takim przypadku należy użyć wywołania asynchronicznego. Następnie, jeśli źródło danych reaguje powoli, inny kod może nadal działać zgodnie z oczekiwaniami na odpowiedź.
Należy zarejestrować usługę, dodając wiersz do Add Services to the container sekcji w pliku Program.cs :
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Uzyskiwanie danych przy użyciu usługi
Teraz użyjesz zdefiniowanej usługi, wywołując ją w składniku Blazor i uzyskując dane. Załóżmy, że masz następujący kod składnika i chcesz wyświetlić w nim pizze:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Wstrzykiwanie usługi
Aby można było wywołać usługę ze składnika, należy użyć iniekcji zależności, aby dodać usługę. Wstrzyknąć usługę, dodając następujący kod po @page dyrektywie:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Zazwyczaj składnik i usługa znajdują się w różnych elementach członkowskich przestrzeni nazw, dlatego należy uwzględnić dyrektywę @using . Ta dyrektywa działa w taki sam sposób jak using instrukcja w górnej części pliku kodu języka C#. Dyrektywa @inject dodaje usługę do bieżącego składnika i inicjuje wystąpienie. W dyrektywie określ nazwę klasy usługi. Następnie podaj nazwę, której chcesz użyć dla wystąpienia usługi w tym składniku.
Zastąpij metodę OnInitializedAsync
Dobrym miejscem do wywołania usługi i uzyskania danych jest OnInitializedAsync metoda . To zdarzenie jest uruchamiane po zakończeniu inicjowania składnika i otrzymał początkowe parametry, ale przed renderowaniem i wyświetleniem strony dla użytkownika. Zdarzenie jest definiowane w klasie bazowej składnika Blazor. Możesz zastąpić go w bloku kodu, tak jak w tym przykładzie:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Wywoływanie usługi w celu uzyskania danych
Podczas wywoływania usługi użyj słowa kluczowego await , ponieważ wywołanie jest asynchroniczne:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Wyświetlanie danych użytkownikowi
Po uzyskaniu danych z usługi należy wyświetlić je użytkownikowi. W przykładzie pizzy oczekujemy, że usługa zwróci listę pizz, które użytkownicy mogą wybrać. Platforma Blazor zawiera bogaty zestaw dyrektyw, których można użyć do wstawienia tych danych do strony widocznej przez użytkownika.
Sprawdzanie danych
Najpierw określ, jaka strona jest wyświetlana przed załadowaniem pizzy. Możemy to zrobić, sprawdzając, czy todaysPizzas kolekcja to null. Aby uruchomić kod renderowania warunkowego w składniku Blazor, użyj @if dyrektywy :
@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 -->
}
Dyrektywa @if renderuje znaczniki w pierwszym bloku kodu tylko wtedy, gdy wyrażenie języka C# zwraca wartość true. Możesz również użyć else if bloku kodu, aby uruchomić inne testy i renderować znaczniki, jeśli są prawdziwe. Na koniec możesz określić else blok kodu do renderowania kodu, jeśli żaden z poprzednich warunków nie zwrócił wartości true. null Sprawdzając w @if bloku kodu, upewnij się, że platforma Blazor nie spróbuje wyświetlić szczegółów pizzy przed uzyskaniem danych z usługi.
Uwaga
Platforma Blazor zawiera również dyrektywę @switch renderowania znaczników na podstawie testu, który może zwracać wiele wartości. Dyrektywa @switch działa w podobny sposób do instrukcji języka C# switch .
Renderowanie kolekcji obiektów
Jeśli blazor wykonuje instrukcję else w poprzednim kodzie, wiesz, że niektóre pizze zostały uzyskane z usługi. Następnym zadaniem jest wyświetlenie tych pizz do użytkownika. Przyjrzyjmy się, jak wyświetlić dane w prostej tabeli HTML.
Nie wiemy, ile pizzy będzie dostępnych, gdy kodujemy tę stronę. Możemy użyć @foreach dyrektywy , aby wykonać pętlę dla wszystkich obiektów w todaysPizzas kolekcji i renderować wiersz dla każdego z nich:
<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>
Oczywiście prawdopodobnie chcesz bogatszy wyświetlacz pizzy niż zwykła tabela pokazana w tym przykładzie. Możesz sformatować cenę i inne wartości. Współpracuj z projektantami graficznymi, aby opracować bardziej wciągający interfejs użytkownika. Na przykład dołącz zdjęcia każdej pizzy.
Uwaga
Platforma Blazor zawiera inne dyrektywy pętli, takie jak @for, @whilei @do while. Te dyrektywy zwracają powtarzające się bloki znaczników. Działają one podobnie do równoważnych pętli języka C# for, whilei do...while .
W następnej lekcji zarejestrujesz własną usługę danych!