Esercizio: Migliorare l'interattività delle app con gli eventi del ciclo di vita

  • 5 minuti

L'azienda produttrice di pizze ha deciso di lanciare una pizza speciale per famiglie, disponibile solo in formato 24 pollici. L'app corrente per ordinare le pizze ha un dispositivo di scorrimento per le dimensioni il quale non supporta l'opzione per una pizza di dimensione unica. L'utente dovrà aggiungere la nuova pizza formato famiglia e disattivare l'opzione di dimensione per quella pizza.

In questo esercizio, si modificherà il database delle pizze per aggiungere le pizze formato famiglia e si cambierà il modello di pizza per adattarlo alle nuove pizze. Per gestire gli eventi del ciclo di vita dei componenti Blazor, apportare modifiche alla finestra di dialogo di configurazione della pizza per gestire il caso a dimensione fissa.

Creare la nuova pizza formato famiglia

Per prima cosa, aggiungere la nuova funzionalità FixedSize al modello della pizza e creare la nuova pizza formato famiglia nel database delle pizze.

  1. In Esplora risorse di Visual Studio Code, espandere Modelli e selezionare PizzaSpecial.cs.

  2. Nel file PizzaSpecial.cs, dopo la proprietà ImageUrl, aggiungere la seguente nuova proprietà:

    public int? FixedSize { get; set; }

  3. Aprire il file Pizza.cs e sostituite il metodo GetBasePrice con il codice seguente:

    public decimal GetBasePrice() =>
    Special is { FixedSize: not null }
        ? Special.BasePrice
        : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;

    Il codice ora tiene conto delle offerte speciali con FixedSize quando restituisce BasePrice.

  4. Espandere Dati e selezionare SeedData.cs.

  5. Nel file SeedData.cs, aggiungere il seguente codice per la nuova pizza formato famiglia alla fine della dichiarazione dell'array specials nel metodo InitializeAsync.

    new()
{
    Id = 9,
    Name = "Margherita Family Size",
    Description = "24\" of pure tomatoes and basil",
    BasePrice = 14.99m,
    ImageUrl = "img/pizzas/margherita.jpg",
    FixedSize = 24
}

  6. La classe SeedData prepopola il database delle pizze con le pizze speciali. Per creare la nuovo PizzaSpecial, è necessario eliminare il database esistente. In Esplora risorse, selezionare ed eliminare i file pizza.db, pizza.db-shm e pizza.db-wal.

  7. In Visual Studio Code, premere F5o selezionare Esegui>Avvia debug.

  8. Nell'app, selezionare la nuova pizza Margherita formato famiglia.

    Screenshot of the new family size pizza.

  9. È ancora possibile modificare le dimensioni della pizza nel modulo dell’ordine.

  10. Premere MAIUSC+F5 o selezionare Esegui>Arresta debug per arrestare l'app.

Rimuovere il dispositivo di scorrimento per la dimensione

Il componente ConfigurePizzaDialog utilizza un elemento HTML range per consentire al cliente di selezionare le dimensioni della pizza. Un modo per disabilitare l'input dell'utente consiste nell'omettere in modo condizionale il rendering del controllo utente delle dimensioni.

  1. In Esplora risorse di Visual Studio Code, espandere Condiviso e selezionare ConfigurePizzaDialog.razor.

  2. Nella direttiva @code, dopo le proprietà esistenti, aggiungere i seguenti membri:

    bool supportSizing = true;

protected override void OnInitialized()
{
    if (Pizza is { Special.FixedSize: not null })
    {
        Pizza.Size = Pizza.Special.FixedSize.Value;
        supportSizing = false;
    }
}

    Il campo supportSizing ha come impostazione predefinita true, ma se la pizza ha una dimensione fissa, il campo è impostato a false. L'override del metodo del ciclo di vita OnInitialized imposta la dimensione della pizza a una dimensione fissa e disabilita il ridimensionamento.

    Nota

    Se il codice si basa sull'interoperabilità JavaScript, l'uso del metodo OnInitialized non funziona. Invece, è necessario usare il metodo OnAfterRenderAsync per assicurarsi che l'interoperabilità JavaScript sia disponibile.

  3. Nella parte superiore del file, nella sezione <form class="dialog-body">, sostituite le righe label e input esistenti con il codice seguente:

    @if (supportSizing)
{
    <label>Size:</label>
    <input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize"
        step="1" @bind="Pizza.Size" @bind:event="oninput" />
}

  4. Premere F5 o selezionare Esegui>Avvia Debug.

  5. Aggiungere la pizza formato famiglia e verificare che il dispositivo di scorrimento delle dimensioni sia disabilitato perché omesso dal rendering.

    Screenshot of the new family size pizza with the size range omitted from rendering.

  6. Ordinare una pizza di tipo diverso e assicurarsi che sia ancora possibile usare il dispositivo di scorrimento per le dimensioni di quella pizza.

  7. Premere MAIUSC+F5 o selezionare Esegui>Arresta debug per arrestare l'app.