練習 - 在 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中有任何披薩，就會顯示出來。如果沒有訂單，系統會提示客戶新增一些訂單。

有一些錯誤，因為元件不知道訂單是什麼。

在 @code 的 List<PizzaSpecial> specials = new(); 區塊中，新增下列代碼：
```
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">中，在結尾<a>之前新增</div>標籤，以建立一個移除按鈕。
```
<a @onclick="@(() => OrderState.RemoveConfiguredPizza(configuredPizza))" class="delete-item">x</a>
```
此標籤會將 X 加到訂單側邊欄中的每個披薩上。當您選取它時，它會呼叫 RemoveConfiguredPizza 方法在 OrderState 服務中。
選取 F5 或選取 [ 執行]。然後選取 [開始偵錯]。
選取 Shift+F5 或選取 [停止偵錯]。

動態設定披薩大小

當大小滑桿變更時，披薩組態對話框不會更新。元件需要一種方法來更新披薩及其尺寸，然後重新計算價格。

在檔案總管中，展開 [共享] ，然後選取 [ConfigurePizzaDialog.razor]。

新增程式代碼，將 HTML 控件的值 input 系結至披薩大小：

<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 應用程式上取得了進展。如果您想要繼續加以改善，請完成此學習路徑中的下一個課程模組。

意見反應

此頁面對您有幫助嗎？