练习 - 在 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 服务，以便它能够提供从订单中删除披萨的方法。

在文件资源管理器中，选择“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 应用程序中将控件绑定到数据

显示客户的披萨订单

从客户订单中删除披萨

动态配置披萨大小

反馈