Komma åt data från en Blazor-komponent
- 7 minuter
Engagerande webbplatser måste visa dynamiskt innehåll som kan ändras hela tiden. Att lära sig att hämta data från en dynamisk källa, till exempel en databas eller webbtjänst, är en grundläggande teknik inom webbutveckling.
Anta att du arbetar för ett pizzaleveransföretag på den uppdaterade kundinriktade webbplatsen. Du har en rad webbsidor som är utformade som Blazor-komponenter. Nu vill du fylla i dessa sidor med information om pizzor, toppings och beställningar som du vill hämta från en databas.
I den här lektionen lär du dig att komma åt data och återge dem i HTML-kod för visning till användaren.
Skapa en registrerad datatjänst
Om du vill skapa en dynamisk webbplats som visar ändrad information för användare måste du skriva kod för att hämta dessa data någonstans. Anta till exempel att du har en databas som lagrar alla pizzor som företaget säljer. Eftersom pizzorna alltid förändras är det en dålig idé att hårdkoda dem till webbplatsens HTML. Använd i stället C#-kod och Blazor för att köra frågor mot databasen och formatera sedan informationen som HTML så att användaren kan välja sin favorit.
I en Blazor Server-app kan du skapa en registrerad tjänst som representerar en datakälla och hämta data från den.
Note
Datakällorna som du kan använda i en Blazor-app är relationsdatabaser, NoSQL-databaser, webbtjänster, olika Azure-tjänster och många andra system. Du kan använda .NET-tekniker som Entity Framework, HTTP-klienter och ODBC (Open Database Connectivity) för att fråga dessa källor. Dessa tekniker ligger utanför omfånget för den här modulen. Här lär du dig hur du formaterar och använder data som du har fått från någon av dessa källor och tekniker.
Skapandet av en registrerad tjänst börjar med att skriva en klass som definierar dess egenskaper. Här är ett exempel som du kan skriva för att representera en 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; }
}
Klassen definierar pizzans egenskaper och datatyper. Du måste se till att dessa egenskaper matchar pizzaschemat i datakällan. Det är klokt att skapa den här klassen i datamappen i projektet och använda ett medlemsnamnområde med namnet Data. Om du vill kan du välja andra mappar och namnområden.
Därefter definierar du tjänsten:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Observera att tjänsten använder ett asynkront anrop för att komma åt data och returnera en samling Pizza objekt. Datakällan kan vara fjärransluten från servern där Blazor-koden körs. I så fall använder du ett asynkront anrop. Om datakällan sedan svarar långsamt kan annan kod fortsätta att köras i väntan på svaret.
Du registrerar tjänsten genom att lägga till en rad i avsnittet Add Services to the container i Program.cs-filen:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Använda en tjänst för att hämta data
Nu använder du den tjänst som du definierade genom att anropa den i en Blazor-komponent och hämta data. Anta att du har följande komponentkod och vill visa pizzor i den:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Att injicera tjänsten
Innan du kan anropa tjänsten från komponenten måste du använda beroendeinmatning för att lägga till tjänsten. Mata in tjänsten genom att lägga till följande kod efter @page-direktivet:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Vanligtvis finns komponenten och tjänsten i olika namnområdesmedlemmar, så du måste inkludera @using-direktivet. Det här direktivet fungerar på samma sätt som en using-instruktion överst i en C#-kodfil.
@inject-direktivet lägger till tjänsten i den aktuella komponenten och initierar en instans av den. I direktivet anger du namnet på tjänstklassen. Följ det med det namn som du vill använda för instansen av tjänsten i den här komponenten.
Åsidosätt metoden OnInitializedAsync
Ett bra ställe att anropa tjänsten och hämta data finns i metoden OnInitializedAsync. Den här händelsen utlöses när komponentens initiering är klar och den tar emot sina inledande parametrar, men innan sidan återges och visas för användaren. Händelsen definieras i Blazor-komponentens basklass. Du kan åsidosätta det i ett kodblock som i det här exemplet:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Anropa tjänsten för att hämta data
När du anropar tjänsten använder du nyckelordet await eftersom anropet är asynkront:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Visa data för användaren
När du har hämtat data från tjänsten vill du visa dem för användaren. I pizzaexemplet förväntar vi oss att tjänsten returnerar en lista över pizzor som användarna kan välja mellan. Blazor innehåller en omfattande uppsättning direktiv som du kan använda för att infoga dessa data på sidan som användaren ser.
Söka efter data
Först avgör vi vad sidan visar innan pizzorna läses in genom att kontrollera om todaysPizzas samlingen är null. Om du vill köra kod för villkorsstyrd återgivning i en Blazor-komponent använder du @if-direktivet:
@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 -->
}
@if-direktivet renderar markeringen endast i det första kodblocket om C#-uttrycket returnerar true. Du kan också använda ett else if-kodblock för att utföra andra tester och rendera markering om testvillkoren är sanna. Slutligen kan du ange ett else kodblock för att återge kod om inget av de tidigare villkoren returnerade true. Genom att söka efter null i kodblocket @if ser du till att Blazor inte försöker visa pizzainformation innan data hämtas från tjänsten.
Note
Blazor innehåller också @switch-direktivet för återgivning av markering baserat på ett test som kan returnera flera värden.
@switch-direktivet fungerar på ett liknande sätt som C#-switch-instruktionen.
Återge en samling objekt
Om Blazor kör else-instruktionen i föregående kod vet du att vissa pizzor hämtades från tjänsten. Nästa uppgift är att visa dessa pizzor för användaren. Nu ska vi titta på hur du visar data i en enkel HTML-tabell.
Vi vet inte hur många pizzor som är tillgängliga när vi kodar den här sidan. Vi kan använda @foreach-direktivet för att loopa igenom alla objekt i todaysPizzas-samlingen och återge en rad för var och en:
<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>
Du vill förmodligen ha en rikare visning av pizzor än den vanliga tabellen som visas i det här exemplet. Du kanske vill formatera priset och andra värden. Arbeta med dina grafiska designers för att utveckla ett mer engagerande användargränssnitt. Ta till exempel med bilder på varje pizza.
Note
Blazor innehåller andra loopningsdirektiv, till exempel @for, @whileoch @do while. Dessa direktiv returnerar upprepade markeringsblock. De fungerar på ett liknande sätt som motsvarande C# for, whileoch do...while-loopar.
I nästa enhet registrerar du din egen datatjänst!