練習 - 使用生命週期事件改善應用程式互動性

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 Family Size] \(瑪格麗塔家庭號\) 披薩。
請注意，在訂單表單中，您仍然可以變更披薩尺吋 (大小)。
按下 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 Interop，則將無法使用 OnInitialized 方法。相反地，您必須使用 OnAfterRenderAsync 方法來確保 JavaScript Interop 可供使用。

在 <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 或選取 [執行]>[停止偵錯] 以停止應用程式。

練習 - 使用生命週期事件改善應用程式互動性

建立新的家庭號尺吋 (大小) 披薩

停用尺吋滑杆

意見反應