Uzyskiwanie dostępu do danych ze składnika Blazor
- 7 min
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 zapytać bazę danych, a następnie sformatuj szczegóły jako HTML, aby użytkownik mógł wybrać swoje ulubione.
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 parametry 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 korzysta z asynchronicznego wywołania do uzyskania dostępu do danych i zwrócenia kolekcji obiektów Pizza. Ź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ź.
Aby zarejestrować usługę, dodaj 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ę. Wstrzyknij usługę, dodając następujący kod po dyrektywie @page.
@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 instrukcja using w górnej części pliku kodu języka C#. Dyrektywa @inject dodaje usługę do bieżącego składnika i inicjuje jej instancję. 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 metoda OnInitializedAsync. To zdarzenie jest uruchamiane, gdy zakończy się inicjowanie składnika i składnik otrzyma początkowe parametry, ale zanim strona zostanie wyrenderowana i wyświetlona użytkownikowi. 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 kolekcja todaysPizzas jest null. Aby uruchomić kod renderowania warunkowego w składniku blazor, użyj dyrektywy @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 -->
}
Dyrektywa @if renderuje znaczniki w pierwszym bloku kodu tylko wtedy, gdy wyrażenie języka C# zwraca true. Możesz również użyć bloku kodu else if, aby uruchomić inne testy i generować znaczniki, jeśli testy te są prawdziwe. Na koniec można określić blok kodu else do renderowania kodu, jeśli żaden z poprzednich warunków nie zwrócił wartości true. Sprawdzając null w bloku kodu @if, zapewniasz, ż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 do renderowania znaczników na podstawie testu, którego wyniki mogą zwracać wiele wartości. Dyrektywa @switch działa w podobny sposób do instrukcji switch języka C#.
Renderowanie kolekcji obiektów
Jeśli Blazor wykonuje instrukcję else w poprzednim kodzie, wiesz, że niektóre pizze zostały uzyskane z serwisu. Następnym zadaniem jest przedstawienie tych pizz użytkownikowi. 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ć dyrektywy @foreach, aby iterować przez obiekty w kolekcji todaysPizzas i wyrenderować wiersz dla każdego z jednego:
<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 chciałbyś bardziej urozmaiconą prezentację pizz 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 jednostce zarejestrujesz własną usługę danych!