Esercizio - Condividere i dati nelle applicazioni Blazor

6 minuti

Ora che l'app è connessa a un database, è possibile aggiungere ai clienti la possibilità di configurare e ordinare una pizza.

Blazing Pizza vuole che tu crei la capacità per i clienti di cambiare le dimensioni delle loro pizze speciali. È necessario archiviare l'ordine e archiviare lo stato dell'applicazione in un servizio contenitore.

In questo esercizio si passano i dati a un nuovo componente di configurazione dell'ordine e si vedrà come archiviare lo stato dell'app in un servizio con ambito OrderState.

Aggiungi una nuova finestra di dialogo per la configurazione dell'ordine

Arrestare l'app se è ancora in esecuzione.
In Visual Studio Code fare clic con il pulsante destro del mouse sulla cartella Condivisa e scegliere Nuovo file.
Immettere ConfigurePizzaDialog.razor come nome file.

Immettere questo codice per l'interfaccia utente del nuovo componente di ordinamento:

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

Questo componente è una finestra di dialogo che mostra la pizza speciale selezionata e consente al cliente di selezionare le dimensioni della pizza.

Il componente richiede una pizza speciale ottenuta dal componente della pagina dell'indice per accedere ai valori membro di una pizza.

Aggiungere il blocco Blazor @code per consentire il passaggio dei parametri nel componente:
```
@code {
    [Parameter] public Pizza Pizza { get; set; }
}
```

Ordinare una pizza

Quando un cliente seleziona una pizza, la finestra di dialogo deve consentire loro di modificare le dimensioni della pizza. Verrà ora migliorato il controllo index.razor per aggiungere questa interattività.

In Esplora file espandere Pagine e quindi selezionare Index.razor.
Aggiungere questo codice nel @code blocco sotto la List<PizzaSpecial> variabile :
```
Pizza configuringPizza;
bool showingConfigureDialog;
```

Aggiungere questo codice per creare una pizza nel OnInitializedAsync() metodo :

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

    showingConfigureDialog = true;
}

Consentire alla pagina Web di chiamare il metodo lato server ShowConfigurePizzaDialog consentendo ai clienti di selezionare il tag <li> di una pizza. Sostituire la <li> riga con questo codice:
```
<li @onclick="@(() => ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
```
Quando un cliente seleziona una pizza, il server esegue il ShowConfigurePizzaDialog metodo che crea una pizza con i dati speciali della pizza e imposta la showingConfigureDialog variabile su true.

La pagina richiede un modo per visualizzare il nuovo ConfigurePizzaDialog componente. Aggiungere questo codice sopra il @code blocco:

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

L'intero index.razor file dovrebbe ora essere simile all'esempio seguente:

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

Selezionare F5 o Esegui. Selezionare quindi Avvia debug.
Selezionare una pizza e visualizzare la nuova finestra di dialogo.

Gestire lo stato di un ordine

Al momento, l'app visualizza la finestra di dialogo di configurazione, ma non consente di annullare o passare all'ordinamento della pizza. Per gestire lo stato dell'ordine, è necessario aggiungere un nuovo servizio contenitore per lo stato dell'ordine.

Arrestare l'app se è ancora in esecuzione.
Creare una nuova cartella nella cartella BlazingPizza . Denominarlo Services.
Creare un nuovo file nella cartella Servizi . Denominarlo OrderState.cs.

Immettere questo codice per la classe :

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

Si noti che nel componente index.razor è presente codice che è possibile spostare nella nuova classe. Il passaggio successivo consiste nel rendere disponibile questo servizio nell'app.

In Esplora file selezionare Program.cs.
Nella parte del file con le righe che iniziano con builder.Services.aggiungere questa riga:
```
builder.Services.AddScoped<OrderState>();
```
Nell'esercizio precedente, abbiamo aggiunto il nostro contesto del database qui. Questo codice aggiunge il nuovo OrderState servizio. Con questo codice sul posto, è ora possibile usarlo nel index.razor componente .
Aggiungere la direttiva seguente using all'inizio del file. Questa direttiva risolve tutti i riferimenti alla OrderState classe :
```
using BlazingPizza.Services;
```
In Esplora file espandere Pagine e quindi selezionare Index.razor.
Nella parte superiore del file, in @inject NavigationManager NavigationManageraggiungere questo codice:
```
@using BlazingPizza.Services
@inject OrderState OrderState
```

Rimuovere configuringPizza, showingConfigureDialoge ShowConfigurePizzaDialog() dal @code blocco . L'aspetto dovrebbe risultare simile al seguente:

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

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

Sono ora presenti errori ovunque il codice faccia riferimento agli elementi eliminati.

Modificare la chiamata a ShowConfigurePizzaDialog(special)) per utilizzare la versione OrderState:

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

Modificare il riferimento al valore booleano showingConfigureDialog:
```
@if (OrderState.ShowingConfigureDialog)
```

Modificare il parametro usando configuringPizza:

<ConfigurePizzaDialog Pizza="OrderState.ConfiguringPizza" />

Selezionare F5 o Esegui. Selezionare quindi Avvia debug.

Se tutto è corretto, non dovresti vedere alcuna differenza. La finestra di dialogo viene visualizzata come in precedenza.

Annullare e fare ordini di pizza

È possibile notare che nella classe OrderState sono presenti due metodi che non vengono ancora usati. I CancelConfigurePizzaDialog metodi e ConfirmConfigurePizzaDialog chiudono la finestra di dialogo e aggiungono la pizza a un Order oggetto dopo che il cliente conferma l'ordine. Ora si connettono questi metodi ai pulsanti della finestra di dialogo di configurazione.

Arrestare l'app se è ancora in esecuzione.
In Esplora file espandere Shared. Selezionare quindi ConfigurePizzaDialog.razor.

@code Nel blocco aggiungere due nuovi parametri:

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

I pulsanti possono ora avere @onclick direttive aggiunte. Modifica il codice attuale per i pulsanti della finestra di dialogo con questo markup.

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

L'ultimo passaggio consiste nel passare i OrderState metodi per annullare e confermare gli ordini. Nel file explorer, espandi Pagine. Quindi selezionare Index.razor.

Modificare il codice per la chiamata al ConfigurePizzaDialog componente:

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

Selezionare F5 o Esegui. Selezionare quindi Avvia debug.

L'app dovrebbe ora consentire ai clienti di annullare o aggiungere una pizza configurata a un ordine. Non abbiamo modo di mostrare l'ordine corrente o aggiornare i prezzi quando viene modificata la dimensione della pizza. Queste funzionalità verranno aggiunte nell'esercizio successivo.

Commenti e suggerimenti

Questa pagina è stata utile?