Blazor

4 分鐘

建置 Web 應用程式的方法有很多種。若要建置高度互動且快速的 Web 應用程式，您通常會使用大量的 JavaScript。

另一種方法是使用 Microsoft 的 Blazor 架構，這可讓您使用 C# 和 .NET 來處理所有 Web 開發考慮。

什麼是 Blazor？

Blazor 是使用 HTML、CSS 和 C# 建置網頁的架構。我們可以使用標準 HTML 和 CSS 來定義網站的版面配置和設計。然後，可以使用 C# 程式碼 (其使用名為 WebAssembly 的 Web 標準技術，在伺服器上或瀏覽器中執行) 來管理網頁的互動式元件。 Blazor 可讓我們使用 Razor 語法來定義網頁和元件，這是 HTML 和 C# 的便利混合體。您可以輕鬆地在其他頁面和元件內重複使用 Blazor 元件。這項功能表示我們可以輕鬆地建置及重複使用應用程式的元件。

什麼是 WebAssembly？

WebAssembly 是新式瀏覽器中可用的標準技術，它允許程式碼在瀏覽器中執行，類似於 JavaScript。我們可以使用工具來準備 C# 程式代碼，以在瀏覽器中作為 WebAssembly 應用程式使用，這些工具隨附於 .NET SDK 中。

使用熱重新載入立即更新您的應用程式

當您開發應用程式時，您想要確定開發人員流程很快，以便查看變更如何影響您的應用程式。在瀏覽器中進行變更、儲存它、重建所有資源和重新部署應用程式可能會很耗時。

您可以使用熱重新載入來改善此工作流程。透過熱重新載入，您可以將變更套用至執行中的應用程式，而不需要重新啟動它。

Blazor 元件

當您使用 Blazor 建立應用程式時，您的應用程式是由許多元件所組成，每個元件都有自己的責任領域。若要建立元件，請使用具有 .razor 擴展名的 Razor 檔案。那麼，什麼是Razor？

Razor 是一種程式設計語法，可混合 HTML 語法與 C# 程式代碼。以下是範例：

<div>@product.Name</div>

@code {
  Product product = new Product{ Name = "Blazor" }
}

在此範例中， @product.Name 會解析為字串「Blazor」，然後在標記內 div 轉譯。轉譯的輸出如下所示：

<div>Blazor</div>

Razor 範例的頂端是由元件在執行時呈現的 HTML 標記所組成。您可以使用字元來轉譯 C# 運算式 @ 的值。 Razor 會在之後 @ 繼續解譯 C# 程式代碼，直到它識別標記，然後繼續轉譯 HTML。您可以使用剖析來明確說明 C# 運算式何時開始和結束： @(...)。

內 @code {} 的所有專案都包含 C# 程式代碼，可定義所產生元件類別的成員。您可以將 Razor 檔案視為定義 HTML 轉譯邏輯之 C# 類別的便利方式。您可以使用 @code 區塊來定義元件類型的 C# 成員，例如字段、屬性和方法。

設定 Blazor 元件的樣式

Blazor 元件會轉譯 HTML，因此您可以使用一般 CSS 樣式表單來設定 Blazor 元件樣式。或者，Blazor 元件具有稱為 CSS 隔離的功能，可讓您建立只套用至該元件內容的樣式規則。藉由建立與元件同名的檔案，並新增 .css 擴展名，Blazor 會將此命名辨識為應該只套用至對應元件中 HTML 內容的樣式。

Blazor 元件也可以使用特殊 HeadContent 標記，定義要新增至頁面 HTML 標頭的內容：

<HeadContent>
    <style>
        ...my styles here
    </style>
</HeadContent>

這個 style 標記和內容會在頁面的標記內 head 轉譯。

可路由的元件

Home.razor 檔案是可從網頁瀏覽器巡覽至的元件。它包含 HTML、C# 和其他 Blazor 元件的參考。由於第一行存在 @page "/" 指示詞，我們可以將此檔案識別為頁面。這個指示詞會將「/」路由指派給元件，並指示 Blazor 在要求「/」位址的預設頁面時回應此檔案的內容。