Blazor 的運作方式
Blazor 提供許多功能,可協助您快速開始使用並傳遞下一個 Web 應用程式專案。 讓我們瀏覽 Blazor 的核心功能,以協助您決定是否應該將 Blazor 用於下一個絕佳的 Web 應用程式。
Blazor 元件
Blazor 應用程式是從元件建置的。 Blazor 元件是可重複使用的 Web UI 片段。 Blazor 元件會封裝其轉譯和 UI 事件處理邏輯。 Blazor 包含各種內建元件,可用於表單處理、使用者輸入驗證、顯示大型資料集、驗證和授權。 開發人員也可以建置及共用自己的自訂元件,且許多預先建置的 Blazor 元件可從 Blazor 生態系統中取得。
使用標準 Web 技術
您可以使用 Razor 語法撰寫 Blazor 元件,這是便利的 HTML、CSS 和 C# 混合使用。 Razor 檔案包含一般 HTML,然後包含 C# 來定義任何轉譯邏輯,例如條件式、控制流程和運算式評估。 然後,Razor 檔案會編譯為 C# 類別,以封裝元件的轉譯邏輯。 由於以 Razor 撰寫的 Blazor 元件只是 C# 類別,因此您可以從元件呼叫任意的 .NET 程式碼。
UI 事件處理和資料繫結
互動式 Blazor 元件可以使用 C# 事件處理常式來處理標準 Web UI 互動。 元件可以更新其狀態以回應UI事件,並據以調整其轉譯。 Blazor 也支援將雙向資料繫結至 UI 元素,以保持元件狀態與 UI 元素同步。
下列範例是在 Razor 中實作的簡單 Blazor 計數器元件。 大部分的內容都是 HTML,而 @code
區塊則包含 C#。 每次按下按鈕時,都會叫用 IncrementCount
C# 方法,這會遞增 currentCount
欄位,然後元件會轉譯更新的值:
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
伺服器和客戶端轉譯
Blazor 同時支援伺服器和用戶端轉譯元件,以處理各種 Web UI 架構。 從伺服器轉譯的元件可以存取伺服器資源,例如資料庫和後端服務。 根據預設,Blazor 元件會以靜態方式從伺服器轉譯,產生 HTML 以回應要求。
您也可以將伺服器元件設定為互動式,以便處理任意 UI 事件、維護互動之間的狀態,以及動態轉譯更新。 互動式伺服器元件會透過 WebSocket 連線與瀏覽器處理 UI 互動和更新。
或者,Blazor 元件也可以從用戶端以互動方式轉譯。 元件會下載至用戶端,並透過 WebAssembly 從瀏覽器執行。 互動式 WebAssembly 元件可以透過 Web 平台存取客戶端資源,例如本機儲存體和硬體,甚至可以在下載後離線運作。
您可以選擇從伺服器或相同應用程式內的用戶端轉譯不同的元件。 您應用程式中的許多頁面可能完全不需要任何互動功能,而且可以從伺服器以靜態方式轉譯。 雖然您可以從伺服器或用戶端處理應用程式的其他更互動式部分。 您可以決定要在設計階段或執行階段使用的元件轉譯模式。 使用 Blazor,您可以彈性地建置適合您案例的 Web 應用程式架構。
使用 Blazor 建置披薩店
披薩店應用程式的 UI 細分成許多可重複使用的元件:具有導覽列的頁面配置、個別頁面、披薩目錄和編輯器、訂單元件等等。 Blazor 提供許多這些元件的內建支援,例如表單和驗證的元件。 應用程式中的許多頁面都可以使用靜態伺服器端轉譯從伺服器處理,讓網站基本上處於無狀態且已準備好進行調整。 需要更多互動功能時,元件會藉由套用互動式轉譯模式來進行互動。 若要從伺服器卸載工作,互動式元件會透過 WebAssembly 在用戶端上轉譯。 藉由使用單一 Web 開發堆疊建置整個應用程式,應用程式可快速整合而披薩訂單將很快地流入。