使用 Blazor 元件建立使用者介面

已完成

Blazor 元件可讓您使用 .NET 程式碼來定義包括動態內容的網頁或 HTML 部分。 在 Blazor 中，您可以使用 C# 來制定動態內容，而不是使用 JavaScript。

假設您為披薩外送公司工作，負責建立新式網站。 您從歡迎頁面著手，該頁面會成為大部分網站使用者的登陸頁面。 您想要在該頁面上顯示特價和熱賣披薩。

在此單元中，您將了解如何在 Blazor 中建立元件並撰寫程式碼，以在這些元件上呈現動態內容。

了解 Blazor 元件

Blazor 是一種架構，可供開發人員藉由撰寫 C# 程式碼來建立豐富的互動式使用者介面 (UI)。 使用 Blazor 時，您可以對伺服器端和用戶端的所有程式碼使用相同的語言，並加以轉譯，以顯示在許多不同的瀏覽器中，包括行動裝置上的瀏覽器。

注意

Blazor 應用程式中的程式碼有兩個裝載模型：

• Blazor Server：在此模型中，應用程式會在 ASP.NET Core 應用程式的網頁伺服器上執行。 用戶端上的 UI 更新、事件和 JavaScript 呼叫會透過用戶端與伺服器之間的 SignalR Service 連線傳送。 在此課程模組中，我們將討論此模型並撰寫程式碼。
• Blazor WebAssembly：在此模型中，會下載 Blazor 應用程式、其相依性和 .NET 執行時間，並在瀏覽器中執行。

在 Blazor 中，您會從稱為元件的程式碼獨立式部分建置 UI。 每個元件都可以包括混合 HTML 和 C# 的程式碼。 元件是使用 Razor 語法編寫，其中的程式碼會以 @code 指示詞標記。 其他指示詞可用來存取變數、繫結至值，以及達成其他轉譯工作。 編譯應用程式時，HTML 和程式碼會編譯成元件類別。 元件會寫入為副檔名為 .razor 的檔案。

注意

Razor 語法用於將 .NET 程式碼內嵌至網頁。 您可以在 ASP.NET MVC 應用程式中使用 Razor 語法，其中檔案具有 .cshtml 副檔名。 Razor 語法在 Blazor 中用於撰寫元件。 這些元件會改為具有 .razor 副檔名，而且控制器和檢視之間沒有嚴格的分隔。

以下是 Blazor 元件的簡單範例：

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

在此範例中，程式碼會設定名為 welcomeMessage 的字串變數值。 該變數會在 HTML 中的 <p> 標記內轉譯。 我們稍後會在此單元中檢驗更複雜的範例。

建立 Blazor 元件

當您在 dotnet 命令列介面 (CLI) 中使用 blazorserver 範本建立 Blazor 應用程式時，預設會包括數個元件：

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

預設元件包括 Index.razor 首頁和 Counter.razor 示範元件。 這兩個元件都位於 Pages 資料夾中。 您可以修改這些檢視以符合您的需求，或刪除這些檢視並將其取代為新的元件。

若要將新元件新增至現有的 Web 應用程式，請使用此命令：

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• -n 選項會指定要新增的元件名稱。 此範例會新增名為 PizzaBrowser.razor 的新檔案。
• -o 選項會指定將包括新元件的資料夾。
• -f 選項會強制使用架構版本 .NET 6 來建置應用程式。

重要

Blazor 元件的名稱必須以大寫字元開頭。

建立元件之後，您可加以開啟，以使用 Visual Studio Code 進行編輯：

code Pages/PizzaBrowser

在 Blazor 元件中撰寫程式碼

當您在 Blazor 中建置 UI 時，通常會在相同檔案中的靜態 HTML 和 CSS 標記中混用 C# 程式碼。 若要區分這些類型的程式碼，請使用 Razor 語法。 Razor 語法包括在前面加上 @ 符號的指示詞，用以分隔 C# 程式碼、路由參數、繫結資料、匯入的類別和其他功能。

讓我們再次考慮此範例元件：

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

您可以使用 <h1> 和 <p> 標記來辨識 HTML 標記。 此標記是頁面的靜態架構，您的程式碼會在其中插入動態內容。 Razor 標記包含：

• @page 指示詞：此指示詞會提供路由範本給 Blazor。 在執行階段，Blazor 會將此範本與使用者要求的 URL 進行比對，以找出要轉譯的頁面。 在此情況下，其可能符合 http://yourdomain.com/index 格式的 URL。
• @code 指示詞：此指示詞宣告下列區塊中的文字為 C# 程式碼。 您可以視需要在元件中放置許多程式碼區塊。 您可以在這些程式碼區塊中定義元件類別成員，並從計算、資料查閱作業或其他來源設定其值。 在此情況下，程式碼會定義名為 welcomeMessage 的單一元件成員，並設定其字串值。
• 成員存取指示詞：如果您想要在轉譯邏輯中包含成員的值，請使用 @ 符號後面接著 C# 運算式，例如成員的名稱。 在此情況下，@welcomeMessage 指示詞用於轉譯 <p> 標記中 welcomeMessage 成員的值。

繼續