Oefening: gegevens delen in Blazor-toepassingen

6 minuten

Nu uw app is verbonden met een database, is het tijd om klanten de mogelijkheid te bieden om een pizza te configureren en te bestellen.

Blazing Pizza wil dat je klanten de mogelijkheid biedt om de grootte van hun speciale pizza's te wijzigen. U moet de bestelling opslaan en u wilt de toepassingsstatus opslaan in een containerservice.

In deze oefening geeft u gegevens door aan een nieuw configuratieonderdeel voor bestellingen en ziet u hoe u de status van de app opslaat in een orderstate-scoped service.

Een nieuw orderconfiguratie dialoogvenster toevoegen

Stop de app als deze nog steeds draait.
Klik in Visual Studio Code met de rechtermuisknop op de map Gedeelde en selecteer Nieuw bestand.
Voer ConfigurePizzaDialog.razor- in als bestandsnaam.

Voer deze code in voor de gebruikersinterface van het nieuwe bestelonderdeel:

@inject HttpClient HttpClient

<div class="dialog-container">
    <div class="dialog">
        <div class="dialog-title">
            <h2>@Pizza.Special.Name</h2>
            @Pizza.Special.Description
        </div>
        <form class="dialog-body">
            <div>
                <label>Size:</label>
                <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" />
                <span class="size-label">
                    @(Pizza.Size)" (£@(Pizza.GetFormattedTotalPrice()))
                </span>
            </div>
        </form>

        <div class="dialog-buttons">
            <button class="btn btn-secondary mr-auto" >Cancel</button>
            <span class="mr-center">
                Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
            </span>
            <button class="btn btn-success ml-auto" >Order ></button>
        </div>
    </div>
</div>

Dit onderdeel is een dialoogvenster waarin de geselecteerde speciale pizza wordt weergegeven en waarmee de klant de pizzagrootte kan selecteren.

Het onderdeel heeft een speciale pizza van het indexpaginaonderdeel nodig om toegang te krijgen tot de ledenwaarden van een pizza.

Voeg het blazor-@code blok toe om toe te staan dat parameters worden doorgegeven aan het onderdeel:
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Een pizza bestellen

Wanneer een klant een pizza selecteert, moet het dialoogvenster hen toestaan om de grootte van hun pizza te wijzigen. Laten we het besturingselement index.razor verbeteren om deze interactiviteit toe te voegen.

Vouw in de verkenner Pagina's uit, en selecteer vervolgens Index.razor.
Voeg deze code toe aan het @code blok onder de variabele List<PizzaSpecial>:
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

Voeg deze code toe om een pizza te maken onder de methode OnInitializedAsync():

void ShowConfigurePizzaDialog(PizzaSpecial special)
{
    configuringPizza = new Pizza()
    {
        Special = special,
        SpecialId = special.Id,
        Size = Pizza.DefaultSize
    };

    showingConfigureDialog = true;
}

Sta toe dat de webpagina de ShowConfigurePizzaDialog-methode aan de serverzijde aanroept door klanten de <li> tag van een pizza te laten selecteren. Vervang de <li> regel door deze code:
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Wanneer een klant een pizza selecteert, voert de server de ShowConfigurePizzaDialog methode uit waarmee een pizza wordt gemaakt met de speciale pizzagegevens en wordt de showingConfigureDialog variabele ingesteld op true.

De pagina heeft een manier nodig om het nieuwe ConfigurePizzaDialog-onderdeel weer te geven. Voeg deze code toe boven het @code blok:

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

Het hele bestand index.razor moet er nu uitzien zoals in dit voorbeeld:

@page "/"
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager

<div class="main">
    <h1>Blazing Pizzas</h1>
    <ul class="pizza-cards">
    @if (specials != null)
    {
        @foreach (var special in specials)
        {
          <li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
            <div class="pizza-info">
            <span class="title">@special.Name</span>
            @special.Description
            <span class="price">@special.GetFormattedBasePrice()</span>
            </div>
          </li>
        }
    }
    </ul>
</div>

@if (showingConfigureDialog)
{
    <ConfigurePizzaDialog Pizza="configuringPizza" />
}

@code {
    List<PizzaSpecial> specials = new();
    Pizza configuringPizza;
    bool showingConfigureDialog;

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }

    void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        configuringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize
        };

        showingConfigureDialog = true;
    }
}

Selecteer F5- of selecteer uitvoeren. Selecteer vervolgens Foutopsporing starten.
Selecteer een pizza en bekijk hoe het nieuwe dialoogvenster wordt weergegeven.

De status van een order afhandelen

Op dit moment wordt in de app het configuratiedialoogvenster weergegeven, maar kunt u niet annuleren of doorgaan met het bestellen van de pizza. Als u de status van de order wilt beheren, voegt u een nieuwe containerservice voor orderstatus toe.

Stop de app als deze nog steeds draait.
Maak een nieuwe map in de map BlazingPizza. Noem het Services.
Maak een nieuw bestand in de map Services. Geef het de naam OrderState.cs.

Voer deze code in voor de klasse:

namespace BlazingPizza.Services;

public class OrderState
{
    public bool ShowingConfigureDialog { get; private set; }
    public Pizza ConfiguringPizza { get; private set; }
    public Order Order { get; private set; } = new Order();

    public void ShowConfigurePizzaDialog(PizzaSpecial special)
    {
        ConfiguringPizza = new Pizza()
        {
            Special = special,
            SpecialId = special.Id,
            Size = Pizza.DefaultSize,
            Toppings = new List<PizzaTopping>(),
        };

        ShowingConfigureDialog = true;
    }

    public void CancelConfigurePizzaDialog()
    {
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }

    public void ConfirmConfigurePizzaDialog()
    {
        Order.Pizzas.Add(ConfiguringPizza);
        ConfiguringPizza = null;

        ShowingConfigureDialog = false;
    }
}

U ziet dat er momenteel code in het index.razor-onderdeel staat dat we naar de nieuwe klasse kunnen gaan. De volgende stap bestaat uit het beschikbaar maken van deze service in de app.

Selecteer Program.csin de Bestandsverkenner.
Voeg in het deel van het bestand met de regels die beginnen met builder.Services.deze regel toe:
```
builder.Services.AddScoped<OrderState>();
```
In de vorige oefening hebben we hier onze databasecontext toegevoegd. Met deze code wordt de nieuwe OrderState-service toegevoegd. Nu deze code is geïmplementeerd, kunnen we deze nu gebruiken in het index.razor-onderdeel.
Voeg de volgende using instructie toe aan het begin van het bestand. Deze richtlijn lost alle verwijzingen naar de OrderState klasse op:
```
using BlazingPizza.Services;
```
Vouw in de verkenner Pagina's uit, en selecteer vervolgens Index.razor.
Voeg boven aan het bestand, onder @inject NavigationManager NavigationManager, deze code toe:
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Verwijder configuringPizza, showingConfigureDialogen ShowConfigurePizzaDialog() uit het @code blok. Deze ziet er nu als volgt uit:

@code {
    List<PizzaSpecial> specials = new List<PizzaSpecial>();

    protected override async Task OnInitializedAsync()
    {
        specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
    }
}

Er zijn nu fouten waar de code verwijst naar de elementen die u hebt verwijderd.

Wijzig de aanroep naar ShowConfigurePizzaDialog(special)) om de OrderState-versie te gebruiken:

<li @onclick="@(() => OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">

Wijzig de verwijzing naar de Booleaanse showingConfigureDialog:
```
@if (OrderState.ShowingConfigureDialog)
```

Wijzig de parameter met behulp van configuringPizza:

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

Selecteer F5- of selecteer uitvoeren. Selecteer vervolgens Foutopsporing starten.

Als alles klopt, ziet u geen verschil. Het dialoogvenster wordt weergegeven zoals eerder is gedaan.

Pizzabestellingen annuleren en maken

Mogelijk ziet u dat er twee methoden zijn in de klasse OrderState die nog niet worden gebruikt. De CancelConfigurePizzaDialog en ConfirmConfigurePizzaDialog methoden sluiten het dialoogvenster en voegen de pizza toe aan een Order object zodra de klant de bestelling bevestigt. We gaan deze methoden verbinden met de configuratiedialoogvensterknoppen.

Stop de app als deze nog steeds draait.
Vouw in de Verkenner Gedeeldeuit. Selecteer vervolgens ConfigurePizzaDialog.razor.

Voeg in het @code blok twee nieuwe parameters toe:

@code {
   [Parameter] public Pizza Pizza { get; set; }
   [Parameter] public EventCallback OnCancel { get; set; }
   [Parameter] public EventCallback OnConfirm { get; set; }
}
`` `

Aan de knoppen kunnen nu @onclick richtlijnen worden toegevoegd. Wijzig de huidige code voor de knoppen van het dialoogvenster naar de volgende opmaaktaal:

<div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">Cancel</button>
    <span class="mr-center">
        Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>
    </span>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">Order ></button>
</div>

De laatste stap is het doorgeven van de OrderState methoden voor het annuleren en bevestigen van orders. Vouw in de verkenner Pagina'suit. Selecteer vervolgens Index.razor.

Wijzig de code voor de aanroep naar het ConfigurePizzaDialog-onderdeel:

<ConfigurePizzaDialog
    Pizza="OrderState.ConfiguringPizza"
    OnCancel="OrderState.CancelConfigurePizzaDialog"
    OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />

Selecteer F5- of selecteer uitvoeren. Selecteer vervolgens Foutopsporing starten.

Met de app kunnen klanten nu een geconfigureerde pizza annuleren of toevoegen aan een bestelling. We hebben geen manier om de huidige bestelling weer te geven of de prijzen bij te werken wanneer de pizzagrootte wordt gewijzigd. In de volgende oefening voegen we deze functies toe.

Feedback

Is deze pagina nuttig?