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

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 サービスを更新します。

エクスプローラーで、[ サービス]/[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 アプリケーションのデータにコントロールをバインドする

顧客のピザの注文を表示する

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

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

フィードバック

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