演習 - Blazor アプリケーションでデータにコントロールをバインドする - Training

5 分

お客様がピザを修正し、それらを注文に追加したら、Blazing Pizza アプリでインターフェイスを更新する必要があります。 Blazor を使用すると、HTML コントロールを C# プロパティにバインドして、値が変更されたときに更新できます。

お客様は、どんなピザを注文しているか、および選択したサイズがどのように支払う価格に影響するのかを確認する必要があります。

この演習では、Blazing Pizza アプリで、注文を更新および編集できるようにします。ピザのプロパティにコントロールをバインドして、これらの変更で価格を再計算する方法について説明します。

お客様のピザの注文を表示する

お客様が注文に追加したすべてのピザが表示されるサイドバーを追加します。

アプリがまだ実行中の場合は、停止します。
Visual Studio Code のエクスプローラーで、[ページ] を展開し、Index.razor を選びます。

@if ブロックと @code ブロックの間に、次のコードを追加します。

<div class="sidebar">
    @if (order.Pizzas.Any())
    {
        <div class="order-contents">
            <h2>Your order</h2>

            @foreach (var configuredPizza in order.Pizzas)
            {
              <div class="cart-item">
                  <div class="title">@(configuredPizza.Size)" @configuredPizza.Special.Name</div>
                  <div class="item-price">
                      @configuredPizza.GetFormattedTotalPrice()
                  </div>
              </div>
            }
        </div>
    }
    else
    {
        <div class="empty-cart">Choose a pizza<br>to get started</div>
    }

    <div class="order-total @(order.Pizzas.Any() ? "" : "hidden")">
        Total:
        <span class="total-price">@order.GetFormattedTotalPrice()</span>
        <a href="checkout" class="@(OrderState.Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
            Order >
        </a>
    </div>
</div>

この HTML により、ページにサイドバーが追加されます。 OrderState.Order にピザがある場合は、それらが表示されます。注文がない場合は、お客様に追加するように求めるメッセージが表示されます。

コンポーネントで注文内容が認識されないため、いくつかのエラーが表示されます。

List<PizzaSpecial> specials = new(); の下の @code ブロック内に、次のコードを追加します。
```
Order order => OrderState.Order;
```
F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。

いくつかのピザを注文して、いくつかキャンセルしてみてください。それらがカートに追加され、注文総数が更新されるのを確認できます。
Shift+F5 キーを押すか、[デバッグの停止] を選びます。

お客様の注文からピザを削除する

お客様のショッピングカートから、構成されたピザを削除する方法がないことにお気づきかもしれません。その機能を追加してみましょう。

最初の手順は、OrderState サービスを更新して、注文からピザを削除する方法を提供できるようにすることです。

エクスプローラーで、Services/OrderState.cs を選びます。

クラスの下部に、次のメソッドを追加します。

public void RemoveConfiguredPizza(Pizza pizza)
{
    Order.Pizzas.Remove(pizza);
}

エクスプローラーで [ページ] を展開し、Index.razor を選びます。
<div class="cart-item"> の閉じる </div> の前に <a> タグを追加して、削除ボタンを作成します。
```
<a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
```
このタグにより、注文サイドバーの各ピザに X が追加されます。それを選ぶと、OrderState サービスの RemoveConfiguredPizza メソッドが呼び出されます。
F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。
Shift+F5 キーを押すか、[デバッグの停止] を選びます。

ピザのサイズを動的に構成する

サイズスライダーを変更しても、ピザの構成ダイアログは更新されません。このコンポーネントには、ピザとサイズを更新してから、価格を再計算する方法が必要です。

エクスプローラーで、[共有] を展開し、ConfigurePizzaDialog.razor を選びます。
input HTML コントロールに、その値をピザのサイズにバインドするコードを追加します。
```
<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size"/>
```
F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。

更新されたダイアログを使用して、いくつかのサイズが異なるピザを注文に追加します。スライダーバーをドラッグするのではなくクリックします。コントロール上のマウスアップイベントでピザのサイズが更新されることを観察します。

スライダーをドラッグした場合、マウスを離すまでサイズが変更されません。これを修正してみましょう。
Shift+F5 キーを押すか、[デバッグの停止] を選びます。

コントロールをバインドするイベントを追加します。

<input type="range" min="@Pizza.MinimumSize" max="@Pizza.MaximumSize" step="1" @bind="Pizza.Size" @bind:event="oninput" />

F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。

@bind="Pizza.Size" コードの追加によって、どうしてこれほど多くの機能が提供されたのでしょうか。 ConfigurePizzaDialog.razor コード全体を調べると、チームでは既に他の要素をピザのプロパティに接続していることがわかります。

たとえば、次のコードによって価格が更新されます。

Price: <span class="price">@(Pizza.GetFormattedTotalPrice())</span>

ピザの GetFormattedTotalPrice() メソッドではピザのサイズを使用して合計価格が計算されるため、ピザのサイズが変更されると、価格が更新されます。

Blazing Pizza アプリを進歩させました。引き続き改善する場合は、このラーニングパスの次のモジュールを完了してください。

続行

演習 - Blazor アプリケーションでデータにコントロールをバインドする

お客様のピザの注文を表示する

お客様の注文からピザを削除する

ピザのサイズを動的に構成する

フィードバック