使用 Blazor 元件建立使用者介面
Blazor 元件可讓您使用 .NET 程式代碼定義包含動態內容的網頁或 HTML 部分。 在 Blazor 中，您可以使用 C# 來制定動態內容，而不是使用 JavaScript。
假設您正在為披薩遞送公司工作，以建立新的新式網站。 您將從歡迎頁面開始，該頁面將成為大多數網站使用者的登錄頁面。 您想要在該頁面上顯示特殊優惠和熱門披薩。
在本單元中，您將瞭解如何在 Blazor 中建立元件，並撰寫程式代碼，以在這些元件上呈現動態內容。
了解 Blazor 元件
Blazor 是一種架構，開發人員可藉由撰寫 C# 程式代碼來建立豐富的互動式使用者介面（UI）。 透過 Blazor，您可以針對伺服器端和用戶端的所有程式代碼使用相同的語言。 您可以轉譯它以顯示許多不同的瀏覽器，包括行動裝置上的瀏覽器。
Note
Blazor 應用程式中的程式代碼有兩個裝載模型：
- Blazor 伺服器：在此模型中，應用程式會在 ASP.NET Core 應用程式內的網頁伺服器上執行。 在用戶端上，UI 更新、事件和 JavaScript 呼叫會透過客戶端與伺服器之間的 SignalR 連線來傳送。 在此模組中，我們會討論和編寫此模型的程式碼。
- Blazor WebAssembly：在此模型中，Blazor 應用程式、其相依性和 .NET 運行時間會下載並在瀏覽器中執行。
在 Blazor 中，您會從稱為 元件之程式代碼的自封部分建置 UI。 每個元件都可以包含 HTML 和 C# 程式代碼的混合。 元件是使用 Razor語法撰寫，其中程式代碼會以 @code 指示詞標記。 其他指令可用來存取變數、綁定值，以及達成其他渲染工作。 編譯應用程式時，HTML 和程式碼會編譯成元件類別。 元件會寫入為擴展名為 .razor 檔案。
Note
Razor 語法用於將 .NET 程式代碼內嵌至網頁。 您可以在 ASP.NET MVC （Model-View-Controller） 應用程式中使用它，其中檔案具有 .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 元件
當您使用 blazordotnet 命令行介面 （CLI） 中的範本建立 Blazor 應用程式時，預設會包含數個元件：
dotnet new blazor -o BlazingPizzaSite
默認元件包括 Index.razor 首頁和 Counter.razor 示範元件。 這兩個元件都放在 Pages 資料夾中。 您可以修改這些檢視以符合您的需求，或刪除這些檢視，並將其取代為新的元件。
若要將新的元件新增至現有的 Web 應用程式，請使用下列命令：
dotnet new razorcomponent -n PizzaBrowser -o Pages
- 選項
-n會指定要加入的元件名稱。 此範例會新增名為 PizzaBrowser.razor 的新檔案。 - 選項
-o會指定您要包含新元件的資料夾。
Important
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指令用來呈現welcomeMessage標記中的<p>成員的值。
