Cvičení – sdílení dat v aplikacích Blazor

6 min

Teď, když je vaše aplikace připojená k databázi, je čas přidat zákazníkům možnost konfigurovat a objednat si pizzu.

Blazing Pizza chce, abyste vytvořili možnost, aby zákazníci změnili velikost svých speciálních pizz. Potřebujete uložit objednávku a chcete uložit stav aplikace ve službě kontejneru.

V tomto cvičení předáte data do nové součásti konfigurace objednávky a zjistíte, jak uložit stav aplikace ve službě s oborem OrderState.

Dialogové okno Pro přidání nové konfigurace objednávky

Pokud je aplikace pořád spuštěná, zastavte ji.
V editoru Visual Studio Code klikněte pravým tlačítkem na sdílenou složku a vyberte Nový soubor.
Jako název souboru zadejte ConfigurePizzaDialog.razor .

Zadejte tento kód pro uživatelské rozhraní nové objednávkové komponenty:

@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>

Tato komponenta je dialog, který zobrazuje vybranou speciální pizzu a umožňuje zákazníkovi vybrat velikost pizzy.

Komponenta potřebuje speciální typ pizzy z komponenty úvodní stránky pro přístup k hodnotám prvků pizzy.

Přidejte blok @code Blazor, který umožní předání parametrů do komponenty:
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Objednání pizzy

Když zákazník vybere pizzu, měl by mu dialog umožnit změnit velikost pizzy. Pojďme vylepšit ovládací prvek index.razor a přidat tuto interaktivitu.

V Průzkumníku souborů rozbalte stránky a pak vyberte Index.razor.
Přidejte tento kód do bloku @code pod proměnnou List<PizzaSpecial>:
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

Přidejte tento kód pro vytvoření pizzy pod metodu OnInitializedAsync():

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

    showingConfigureDialog = true;
}

Povolte webové stránce volat metodu ShowConfigurePizzaDialog na straně serveru tím, že zákazníci mohou vybrat značku pizzy <li>. Nahraďte řádek <li> tímto kódem:
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Když zákazník vybere pizzu, server spustí metodu ShowConfigurePizzaDialog, která vytvoří pizzu se speciálními daty pizzy a nastaví proměnnou showingConfigureDialog na true.

Stránka potřebuje způsob, jak zobrazit novou komponentu ConfigurePizzaDialog. Přidejte tento kód nad blok @code:

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

Celý soubor index.razor by teď měl vypadat jako v tomto příkladu:

@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;
    }
}

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.
Vyberte pizzu a podívejte se na nové dialogové okno.

Zpracování stavu objednávky

V tuto chvíli aplikace zobrazuje konfigurační dialogové okno, ale neumožňuje vám zrušit nebo přejít k objednání pizzy. Pokud chcete spravovat stav objednávky, přidejte novou službu kontejneru stavu objednávky.

Pokud je aplikace pořád spuštěná, zastavte ji.
Ve složce BlazingPizza vytvořte novou složku. Pojmenujte službu.
Ve složce Služby vytvořte nový soubor. Pojmenujte ho OrderState.cs.

Zadejte tento kód pro třídu:

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;
    }
}

Všimněte si, že v komponentě index.razor je aktuálně kód, který můžeme přesunout do nové třídy. Dalším krokem je zpřístupnění této služby v aplikaci.

V Průzkumníku souborů vyberte Program.cs.
Do části souboru s řádky začínajícími builder.Services.přidejte tento řádek:
```
builder.Services.AddScoped<OrderState>();
```
V předchozím cvičení jsme sem přidali kontext databáze. Tento kód přidá novou službu OrderState. S tímto kódem můžeme nyní použít ho v komponentě index.razor.
Na začátek souboru přidejte následující using direktivu. Tato direktiva řeší všechny odkazy na OrderState třídu:
```
using BlazingPizza.Services;
```
V Průzkumníku souborů rozbalte stránky a pak vyberte Index.razor.
V horní části souboru v části @inject NavigationManager NavigationManagerpřidejte tento kód:
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Odeberte configuringPizza, showingConfigureDialoga ShowConfigurePizzaDialog() z bloku @code. Teď by měl vypadat takto:

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

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

Když kód odkazuje na prvky, které jste odstranili, teď dochází k chybám.

Změňte volání na ShowConfigurePizzaDialog(special)) tak, aby používalo verzi OrderState:

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

Změňte odkaz na logickou proměnnou showingConfigureDialog:
```
@if (OrderState.ShowingConfigureDialog)
```

Změňte parametr pomocí configuringPizza:

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Pokud je všechno správné, neměli byste vidět žádný rozdíl. Dialogové okno se zobrazí stejně jako předtím.

Zrušení a objednávky pizzy

Možná si všimnete, že ve třídě OrderState existují dvě metody, které se ještě nepoužívají. Dialogové CancelConfigurePizzaDialog okno a ConfirmConfigurePizzaDialog metody zavřete a po potvrzení objednávky zákazníkem přidejte pizzu Order k objektu. Pojďme tyto metody připojit k tlačítkům dialogového okna konfigurace.

Pokud je aplikace pořád spuštěná, zastavte ji.
V Průzkumníku souborů rozbalte položku Sdílené. Pak vyberte ConfigurePizzaDialog.razor.

Do bloku @code přidejte dva nové parametry:

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

Tlačítka teď můžou mít přidané direktivy @onclick. Změňte aktuální kód tlačítek dialogového okna na tento kód:

<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>

Posledním krokem je zpřístupnit OrderState metody pro zrušení a potvrzení objednávek. V Průzkumníku souborů rozbalte stránky. Pak vyberte Index.razor.

Změňte kód volání komponenty ConfigurePizzaDialog:

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

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Aplikace by teď měla zákazníkům umožnit zrušit nebo přidat nakonfigurovanou pizzu do objednávky. Při změně velikosti pizzy nemáme způsob, jak zobrazit aktuální objednávku nebo aktualizovat ceny. Tyto funkce přidáme v dalším cvičení.

Váš názor

Byla tato stránka užitečná?