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

5 分

ピザ会社は、1つの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;
```
このコードでは、FixedSize を返すときに、BasePrice であるスペシャルが考慮されるようになります。
データ を展開し、SeedData.cs を選択します。

SeedData.cs ファイルで、新しいファミリサイズピザの次のコードを、specials メソッドの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
}

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

フィードバック

このページはお役に立ちましたか?

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

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

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

フィードバック

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

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

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