練習 - 使用 Blazor 元件建立使用者介面

  • 5 分鐘

在此練習中，您將為披薩外送公司建立新的 Blazing Pizza 應用程式。 該公司為您提供其舊網站的目前 CSS、影像和 HTML 以供使用。

Note

本課程模組使用 .NET CLI 與 Visual Studio Code 進行本機開發。 完成本課程模組之後，您可以使用 Visual Studio for Windows 與適用於 macOS 的 Visual Studio for Mac 來套用概念。 若要繼續開發，您可以使用適用於 Windows、Linux 與 macOS 的 Visual Studio Code。

本課程模組使用 .NET 9.0 SDK。 確認您已在慣用的命令終端中執行下列命令來安裝 .NET 9.0：

dotnet --list-sdks

類似下列範例的輸出隨即出現：

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

確定已列出開頭為 9 的版本。 如果未列出或找不到命令， 請安裝最新的 .NET 9.0 SDK。

如果您要建立第一個 Blazor 應用程式，請遵循 Blazor 的安裝指示 來安裝正確的 .NET 版本，並檢查您的電腦是否已正確設定。 在建立您的應用程式步驟停下。

建立新的 Blazor 應用程式

.NET 可讓您使用任何版本的 Visual Studio 或終端命令來建立新專案。 下列練習示範使用終端與 Visual Studio Code 的步驟。

  1. 開啟 Visual Studio Code。

  2. 選取 [檢視]，從 Visual Studio Code 開啟整合式終端。 然後在主功能表上，選取 [終端]。

  3. 在終端中，前往您要建立專案的位置。

  4. 執行 dotnet 終端命令：

    dotnet new blazor -o BlazingPizza

    此命令會在名為 BlazingPizza 的資料夾中建立新的 Blazor 伺服器專案。

  5. 依序選取 [檔案] > [開啟資料夾]。

  6. 在 [開啟] 對話方塊中，移至 BlazingPizza 資料夾，然後選擇 [選取資料夾]。

這些檔案可讓您使用 Visual Studio Code 的偵錯工具來執行及偵錯 Blazor 應用程式。

測試您的設定

您可以選擇使用終端或 Visual Studio Code 來執行您的應用程式。

  1. 在終端視窗中，使用下列方式啟動 Blazor 應用程式：

    dotnet watch

    此命令會建置並啟動應用程式。 watch 命令會告知 dotnet 監視所有專案檔案。 您對專案檔案所做的任何變更都會自動觸發重建，然後重新啟動您的應用程式。

    電腦的預設瀏覽器應該會在 http://localhost:5000 中開啟新的頁面。

  2. 若要停止應用程式，請在終端視窗中選取 Ctrl + C。

您也可以使用 Visual Studio Code 來執行及偵錯專案。

  1. 在 Visual Studio Code 中，選取 F5。 或在 [執行] 功能表上，選取 [開始偵錯]。

    應用程式應該會建置並開啟新的瀏覽器頁面。

  2. Visual Studio Code 也會切換至 [執行及偵錯] 視窗，讓您可以重新啟動或停止應用程式。

    Screenshot showing the debugging window in Visual Studio Code.螢幕擷取畫面，其中顯示 Visual Studio Code 中的偵錯視窗。

  3. 若要停止該應用程式，請選取 Shift + F5。

下載 Blazing Pizza 資產與入門檔案

從 GitHub 存放庫複製小組現有的 Blazor 應用程式項目檔。

  1. 使用檔案總管或在 Visual Studio Code 中，刪除您的 BlazingPizza 資料夾。

  2. 在終端中，將目前的工作檔案複製到新的 BlazingPizza 資料夾中。

    git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

  3. 執行應用程式的目前版本。 選取 F5。

    Screenshot showing the starter Blazing Pizza app.顯示入門 Blazing Pizza 應用程式的螢幕擷取畫面。

製作一些披薩

Pages/Index.razor 元件可讓客戶選取並設定其想要訂購的披薩。 元件會回應應用程式的根 URL。

小組也建立了類別來代表應用程式中的模型。 檢視目前的 PizzaSpecial 模型。

  1. 在 Visual Studio Code 的檔案總管中，展開 [模型] 資料夾。 然後選取 [PizzaSpecial]。

    namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

    請注意，披薩訂單有 Name、BasePrice、Description 與 ImageUrl。

  2. 在檔案總管中展開 [頁面]，然後選取 [Index.razor]。

    @page "/"

<h1>Blazing Pizzas</h1>

    目前，標題只有單一 H1 標籤。 您將新增程式碼來建立特製披薩。

  3. 在 <h1> 標籤下方，新增此 C# 程式碼：

    @code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

    @code 區塊會建立陣列來保存特製披薩。 將頁面初始化時，會將六種披薩新增至陣列。

  4. 選取 F5 或選取 [執行]。 然後選取 [開始偵錯]。

    當應用程式編譯並執行時，您看不到任何內容。 用戶端 HTML 完全不使用此程式碼。 讓我們來修正此問題。

  5. 選取 Shift + F5，或選取 [停止偵錯]。

  6. 在 Index.razor 中，以下列程式碼取代 <h1>Blazing Pizzas</h1>：

    <div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

    此程式碼合併純 HTML，以及迴圈與成員存取指示詞。 @foreach 迴圈會為 <li> 陣列中的每一種披薩建立一個 specials 標籤。

    在此迴圈中，每個特製披薩都會配合成員指示詞顯示其名稱、描述、價格與影像。

  7. 選取 F5 或選取 [執行]。 然後選取 [開始偵錯]。

    Screenshot showing a list of blazing pizzas.螢幕擷取畫面，顯示 blazing pizzas 的清單。

您現在有披薩基礎元件，可讓客戶訂購披薩。 在接下來的練習中，您將提升此元件的使用熟練度。