演習 - ライフサイクルイベントを使用してアプリの対話機能を改善する - Training

5 分

このピザ会社は、注文できるサイズが 24 インチだけのスペシャルなファミリサイズのピザを販売することにしました。現在のピザアプリのサイズスライダーは、サイズが 1 つのピザには対応していません。あなたは、新しいファミリサイズピザを追加し、そのピザについてはサイズオプションを無効にするよう求められました。

この演習では、ピザデータベースを変更してファミリサイズのピザを追加し、新しいピザに対応するようにピザモデルを変更します。 Blazor コンポーネントのライフサイクルイベントを処理するため、固定サイズのケースを処理するようにピザ構成ダイアログを変更します。

新しいファミリサイズのピザを作成する

最初に、新しい FixedSize 機能をピザモデルに追加し、ピザデータベースに新しいファミリサイズピザを作成します。

Visual Studio Code のエクスプローラーで、[モデル] を展開して PizzaSpecial.cs を選びます。
PizzaSpecial.cs ファイルで、ImageUrl プロパティの後に、次の新しいプロパティを追加します。
```
public int? FixedSize { get; set; }
```
Pizza.cs ファイルを開き、GetBasePrice メソッドを次のコードに置き換えます。
```
public decimal GetBasePrice() =>
    Special is { FixedSize: not null }
        ? Special.BasePrice
        : (decimal)Size / DefaultSize * Special?.BasePrice ?? 1;
```
このコードでは、BasePrice を返すときに、FixedSize であるスペシャルが考慮されるようになります。
[データ] を展開して、SeedData.cs を選びます。

SeedData.cs ファイルで、InitializeAsync メソッドの specials 配列宣言の最後に、新しいファミリサイズピザのための次のコードを追加します。

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

SeedData クラスは、スペシャルピザをピザデータベースに事前に設定します。新しい PizzaSpecial を作成するには、既存のデータベースを削除する必要があります。 エクスプローラーで、pizza.db、pizza.db-shm、pizza.db-wal の各ファイルを選んで削除します。
Visual Studio Code で、F5 キーを押すか、[実行]>[デバッグの開始] を選びます。
アプリで、新しい Margherita Family Size ピザを選びます。
注文フォームで、まだピザのサイズを変更できることに注意してください。
Shift+F5 キーを押すか、[実行]>[デバッグの停止] を選んで、アプリを停止します。

サイズスライダーを削除する

ConfigurePizzaDialog コンポーネントでは、HTML の range 要素を使って、顧客がピザのサイズを選択できるようにしています。ユーザー入力を無効にする方法の 1 つは、条件に応じてサイズユーザーコントロールのレンダリングをそっくり省略することです。

Visual Studio Code のエクスプローラーで、[共有] を展開して、ConfigurePizzaDialog.razor を選びます。
@code ディレクティブで、既存のプロパティの後に、次のメンバーを追加します。
```
bool supportSizing = true;

protected override void OnInitialized()
{
    if (Pizza is { Special.FixedSize: not null })
    {
        Pizza.Size = Pizza.Special.FixedSize.Value;
        supportSizing = false;
    }
}
```
supportSizing フィールドの既定値は true ですが、ピザが固定サイズの場合は、そのフィールドを false に設定します。 OnInitialized ライフサイクルメソッドのオーバーライドにより、ピザのサイズが固定サイズに設定されて、サイズ変更のサポートが無効になります。

Note

コードが JavaScript の相互運用に依存していた場合、OnInitialized メソッドは動作しなくなります。代わりに、OnAfterRenderAsync メソッドを使って、JavaScript の相互運用を確実に使用できるようにする必要があります。

ファイルの先頭近くにある <form class="dialog-body"> で、既存の label と input の行を次のコードに置き換えます。

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

F5 キーを押すか、[実行]>[デバッグの開始] を選びます。
ファミリサイズのピザを追加し、レンダリングから省略されているため、サイズスライダーが無効になることを確認します。
別のピザを注文し、そのピザでは前と同じようにサイズスライダーを使用できることを確認します。
Shift+F5 キーを押すか、[実行]>[デバッグの停止] を選んで、アプリを停止します。

続行

演習 - ライフサイクル イベントを使用してアプリの対話機能を改善する

新しいファミリ サイズのピザを作成する

サイズ スライダーを削除する

フィードバック

演習 - ライフサイクルイベントを使用してアプリの対話機能を改善する

新しいファミリサイズのピザを作成する

サイズスライダーを削除する