Gegevens delen in Blazor-toepassingen

Blazor bevat verschillende manieren om informatie te delen tussen onderdelen. U kunt componentparameters of cascaderende parameters gebruiken om waarden van een bovenliggend onderdeel naar een onderliggend onderdeel te verzenden. Het AppState-patroon is een andere benadering die u kunt gebruiken om waarden op te slaan en te openen vanuit elk onderdeel in de toepassing.

Stel dat u werkt aan de nieuwe website voor het bezorgen van pizza's. Meerdere pizza's moeten op dezelfde manier op de startpagina worden weergegeven. U wilt de pizza's weergeven door voor elke pizza een subcomponent te renderen. U wilt nu een ID doorgeven aan die subcomponent die bepaalt welke pizza wordt weergegeven. U wilt ook een waarde opslaan en weergeven op meerdere onderdelen met het totale aantal pizza's dat u vandaag hebt verkocht.

In deze les leert u drie verschillende technieken die u kunt gebruiken om waarden te delen tussen twee of meer Blazor-onderdelen.

Informatie delen met andere onderdelen met behulp van onderdeelparameters

In een Blazor-web-app geeft elk onderdeel een deel van HTML weer. Sommige onderdelen geven een volledige pagina weer, maar andere maken kleinere fragmenten van markeringen, zoals een tabel, een formulier of één besturingselement. Als uw onderdeel slechts een sectie met markeringen weergeeft, moet u dit als onderliggend onderdeel in een bovenliggend onderdeel gebruiken. Uw kindcomponent kan ook een oudercomponent zijn voor andere kleinere componenten die erin worden weergegeven. Subcomponenten worden ook wel geneste componenten genoemd.

In deze hiërarchie van bovenliggende en onderliggende onderdelen kunt u informatie tussen deze onderdelen delen met behulp van onderdeelparameters. Definieer deze parameters op kindcomponenten en stel vervolgens hun waarden in het oudercomponent in. Als u bijvoorbeeld een onderliggend onderdeel hebt dat pizzafoto's weergeeft, kunt u een onderdeelparameter gebruiken om de pizza-id door te geven. Het kindonderdeel zoekt de pizza op op basis van de ID en verkrijgt foto's en andere gegevens. Als u veel verschillende pizza's wilt weergeven, kunt u dit subcomponent meerdere keren op dezelfde bovenliggende pagina gebruiken en een andere ID doorgeven aan elk subcomponent.

Begin door de componentparameter in het kindcomponent te definiëren. U definieert deze als een openbare C#-eigenschap en verfraaid met het [Parameter] kenmerk:

<h2>New Pizza: @PizzaName</h2>

<p>@PizzaDescription</p>

@code {
    [Parameter]
    public string PizzaName { get; set; }
    
    [Parameter]
    public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}

Omdat de onderdeelparameters lid zijn van het onderliggende onderdeel, kunt u deze weergeven in uw HTML met behulp van het gereserveerde @ symbool van Blazor, gevolgd door hun naam. De voorgaande code geeft ook een standaardwaarde op voor de parameter PizzaDescription. Deze waarde wordt weergegeven als het bovenliggende onderdeel geen waarde doorgeeft. Anders overschrijft de waarde die door de bovenliggende instantie is doorgegeven.

U kunt ook aangepaste klassen in uw project gebruiken als onderdeelparameters. Houd rekening met deze klasse die een topping beschrijft:

public class PizzaTopping
{
    public string Name { get; set; }
    public string Ingredients { get; set; }
}

U kunt deze als onderdeelparameter op dezelfde manier gebruiken als een parameterwaarde voor toegang tot afzonderlijke eigenschappen van de klasse met behulp van de syntaxis van punt:

<h2>New Topping: @Topping.Name</h2>

<p>Ingredients: @Topping.Ingredients</p>

@code {
    [Parameter]
    public PizzaTopping Topping { get; set; }
}

In het oudercomponent stelt u parameterwaarden in met behulp van kenmerken van de tags van het kindcomponent. U stelt eenvoudige onderdelen rechtstreeks in. Met een parameter op basis van een aangepaste klasse gebruikt u inline C#-code om een nieuw exemplaar van die klasse te maken en de bijbehorende waarden in te stellen:

@page "/pizzas-toppings"

<h1>Our Latest Pizzas and Topping</h1>

<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />

<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli." })" />

Informatie delen met behulp van trapsgewijze parameters

Onderdeelparameters werken goed wanneer u een waarde wilt doorgeven aan het directe onderliggende element van een onderdeel. Dingen worden onhandig wanneer u een diepe hiërarchie hebt met kinderen van kinderen, enzovoort. Onderdeelparameters worden niet automatisch doorgegeven aan kleinkindonderdelen van bovenliggende onderdelen of verderop in de hiërarchie. Blazor bevat trapsgewijze parameters om dit probleem op elegante wijze af te handelen. Wanneer u de waarde van een trapsgewijze parameter in een onderdeel instelt, is de waarde automatisch beschikbaar voor alle onderliggende onderdelen voor elke diepte.

In het bovenliggende onderdeel geeft u met behulp van de <CascadingValue>-tag de informatie op die trapsgewijs naar alle onderliggende onderdelen wordt weergegeven. Deze tag wordt geïmplementeerd als een ingebouwd Blazor-onderdeel. Elk onderdeel dat in die tag wordt weergegeven, heeft toegang tot de waarde.

@page "/specialoffers"

<h1>Special Offers</h1>

<CascadingValue Name="DealName" Value="Throwback Thursday">
    <!-- Any descendant component rendered here will be able to access the cascading value. -->
</CascadingValue>

In de onderliggende onderdelen kunt u toegang krijgen tot de trapsgewijze waarde door leden van het onderdeel te gebruiken en deze te voorzien van het kenmerk [CascadingParameter].

<h2>Deal: @DealName</h2>

@code {
    [CascadingParameter(Name="DealName")]
    private string DealName { get; set; }
}

In dit voorbeeld heeft de <h2> tag dus de inhoud Deal: Throwback Thursday omdat een bovenliggende component die trapsgewijze waarde instelt.

In het voorgaande voorbeeld identificeert het Name kenmerk in het bovenliggende kenmerk de trapsgewijze waarde, die overeenkomt met de Name waarde in het [CascadingParameter] kenmerk. U kunt deze namen desgewenst weglaten, in welk geval de kenmerken overeenkomen met het type. Het weglaten van de naam werkt goed wanneer u slechts één parameter van dat type hebt. Als u twee verschillende tekenreekswaarden trapsgewijs wilt toepassen, moet u parameternamen gebruiken om dubbelzinnigheid te voorkomen.

Informatie delen met behulp van AppState

Een andere benadering voor het delen van informatie tussen verschillende onderdelen is het gebruik van het AppState-patroon. U maakt een klasse die de eigenschappen definieert die u wilt opslaan en registreert deze als een scoped service. In elk onderdeel waar u de AppState-waarden wilt instellen of gebruiken, injecteert u de service en hebt u vervolgens toegang tot de eigenschappen ervan. In tegenstelling tot onderdeelparameters en trapsgewijze parameters zijn waarden in AppState beschikbaar voor alle onderdelen in de toepassing, zelfs onderdelen die geen onderliggende onderdelen zijn van het onderdeel dat de waarde heeft opgeslagen.

Bekijk bijvoorbeeld deze klasse waarin een waarde over verkoop wordt opgeslagen:

public class PizzaSalesState
{
    public int PizzasSoldToday { get; set; }
}

U voegt de klasse toe als een scoped service in het Program.cs-bestand :

...
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// Add the AppState class
builder.Services.AddScoped<PizzaSalesState>();
...

In elk onderdeel waar u AppState-waarden wilt instellen of ophalen, kunt u de klasse injecteren en vervolgens toegangseigenschappen krijgen:

@page "/"
@inject PizzaSalesState SalesState

<h1>Welcome to Blazing Pizzas</h1>

<p>Today, we've sold this many pizzas: @SalesState.PizzasSoldToday</p>

<button @onclick="IncrementSales">Buy a Pizza</button>

@code {
    private void IncrementSales()
    {
        SalesState.PizzasSoldToday++;
    }
}

In de volgende les probeert u het zelf!