练习 - 利用生命周期事件提高应用交互性

5 分钟

披萨公司已经决定，他们想出售一种特殊的家庭装披萨，只有 24 英寸大小可供选择。当前披萨应用的大小滑块不支持单一尺寸披萨。系统会要求你添加新的家庭装披萨，并禁用该披萨的大小选项。

在本练习中，你将更改披萨数据库以添加家庭装披萨，并更改披萨模型以支持新的披萨。若要处理 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;

代码现在会在返回 BasePrice 时考虑具有 FixedSize 的特殊披萨。

展开“数据”，然后选择“SeedData.cs”。

在 SeedData.cs 文件中，将新的家庭装披萨的以下代码添加到 InitializeAsync 方法中的 specials 数组声明的末尾。

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 或选择“运行”>“开始调试”。
在应用中，选择新的 Margherita 家庭装披萨。
在订单窗体中，请注意，仍然可以更改披萨大小。
按 Shift+F5 或选择“运行”>“停止调试”以停止应用。

删除大小滑块

ConfigurePizzaDialog 组件使用 HTML range 元素来允许客户选择披萨大小。禁用用户输入的一种方法是有条件地省略大小用户控件的全部呈现。

在 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 生命周期方法替代将披萨大小设置为固定大小并禁用大小调整支持。

注意

如果代码依赖 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 或选择“运行”>“停止调试”以停止应用。

继续

练习 - 利用生命周期事件提高应用交互性

创建新的家庭装披萨

删除大小滑块

反馈