ASP.NET Core Blazor

歡迎使用 Blazor!

Blazor 一個可使用 .NET 來建置互動式用戶端 Web UI 的架構:

  • 使用 C# 而不是 JavaScript 來建立豐富的互動式 UI。
  • 共用以 .NET 撰寫的伺服器端與用戶端應用程式邏輯。
  • 將 UI 轉譯為 HTML 和 CSS 以支援寬瀏覽器,包括行動裝置瀏覽器。
  • 與新式裝載平台整合,例如 Docker
  • 使用 .NET 和 Blazor 建置混合式桌面和行動應用程式。
  • 使用 C# 而不是 JavaScript 來建立豐富的互動式 UI。
  • 共用以 .NET 撰寫的伺服器端與用戶端應用程式邏輯。
  • 將 UI 轉譯為 HTML 和 CSS 以支援寬瀏覽器,包括行動裝置瀏覽器。
  • 與新式裝載平台整合,例如 Docker

使用 .NET 進行用戶端網頁程式開發可提供下列優點:

  • 以 C# 撰寫而不是 JavaScript。
  • 利用 .NET 程式庫的現有 .NET 生態系統。
  • 跨伺服器和用戶端共用應用程式邏輯。
  • 從 .NET 的效能、可靠性和安全性中獲益。
  • 在 Windows、Linux 或 macOS 上使用開發環境 (例如 Visual StudioVisual Studio Code) 保持生產力。
  • 以常用的語言、架構和工具建置,不僅穩定、功能豐富,而且容易使用。

注意

如需 Blazor 快速入門教學課程,請參閱建置您的第一個 Blazor 應用程式

單元

Blazor 應用程式的基礎為「元件」。 Blazor 中的元件為 UI 的元素,例如頁面、對話方塊或資料輸入表單。

元件是內建在 .NET 組件中且具有下列功能的 .NET C# 類別:

  • 定義彈性 UI 轉譯邏輯。
  • 處理使用者動作。
  • 可以為巢狀結構,且可重複使用。
  • 能以 Razor 類別庫NuGet 套件方式共用及散發。

該元件類別通常使用副檔名為 .razorRazor 標記頁面形式撰寫而成。 Blazor 中的元件正式名稱為 Razor 元件,而非正式名稱為 Blazor 元件。 Razor 是結合了 HTML 標記與 C# 程式碼的語法,專為開發人員的生產力而設計。 Razor 可讓您在 Visual Studio 中同一個具有 IntelliSense 程式設計支援的檔案中,於 HTML 標記和 C# 之間切換。 Razor Pages 和 MVC 也會使用 Razor。 不同於 Razor Pages 和 MVC 是圍繞著要求/回應模型而建置的,元件則是專門用來處理用戶端 UI 邏輯與組合。

Blazor 會針對 UI 組合使用自然的 HTML 標記。 下列 Razor 標記會示範元件 (Dialog.razor),這個元件在使用者選取按鈕時會顯示對話方塊並處理事件:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string? Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

在上述範例中,OnYes 是按鈕的 onclick 事件所觸發的 C# 方法。 對話方塊的文字 (ChildContent) 和標題 (Title) 均由要在 UI 中使用此元件的下列元件所提供。

Dialog 元件是使用 HTML 標籤在另一個元件內進行巢狀。 在下列範例中,Index 元件 (Pages/Index.razor) 會使用上述的 Dialog 元件。 標籤的 Title 屬性會將標題的值傳遞至 Dialog 元件的 Title 屬性。 元件的 Dialog 文字 (ChildContent) 是由 <Dialog> 元素的內容所設定。 將 Dialog 元件新增至 Index 元件時,Visual Studio 中的 IntelliSense 會藉由語法和參數完成加快開發速度。

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

當您於瀏覽器中存取 Index 時,即會轉譯此對話方塊。 當使用者選取按鈕時,瀏覽器的開發人員工具主控台會顯示 OnYes 方法所撰寫的訊息:

瀏覽器中轉譯的對話方塊元件巢狀在 [索引] 元件內。當使用者在 UI 中選取 [是!] 按鈕時,瀏覽器開發人員工具主控台會顯示 C# 程式碼所撰寫的訊息。

元件會轉譯為瀏覽器文件物件模型 (DOM) 的記憶體內部表示法 (稱為「轉譯樹」),可用來以彈性且有效率的方式更新 UI。

Blazor Server

Blazor Server 提供在 ASP.NET Core 應用程式中將 Razor 元件裝載在伺服器上的支援。 UI 更新會透過 SignalR 連線進行處理。

執行階段會保留在伺服器上,並處理:

  • 執行應用程式的 C# 程式碼。
  • 將瀏覽器的 UI 事件傳送到伺服器。
  • 將 UI 更新套用至已轉譯的元件,該元件會由伺服器傳回。

Blazor Server 用來與瀏覽器通訊的連線也會用來處理 JavaScript Interop 呼叫。

Blazor Server 在伺服器上執行 .NET 程式碼,並透過 SignalR 連線與用戶端上的文件物件模型互動

Blazor Server 應用程式會以不同於傳統模型 (在 ASP.NET Core 應用程式中使用 Razor 檢視或 Razor 頁面轉譯 UI) 的方式轉譯內容。 這兩個模型都使用 Razor 語言 來描述轉譯的 HTML 內容,但標記的轉譯「方式」明顯不同。

轉譯 Razor 頁面或檢視時,每一行 Razor 程式碼都會以文字形式發出 HTML。 轉譯之後,伺服器會處置頁面或檢視執行個體,包括所產生的任何狀態。 發生頁面的另一個要求時,整個頁面會再次重新呈現為 HTML,並傳送至用戶端。

Blazor Server 會產生元件圖形,以顯示類似於 HTML 或 XML 文件物件模型 (DOM)。 元件圖形包含屬性和欄位中保留的狀態。 Blazor 會評估元件圖形以產生標記的二進位表示法,其會傳送至用戶端以進行轉譯。 在用戶端與伺服器之間建立連線之後,元件的靜態預先轉譯元素會取代為互動式元素。 在伺服器上預先轉譯內容可使應用程式在用戶端上更具回應性。

元件在用戶端上成為互動式之後,使用者互動和應用程式事件就會觸發 UI 更新。 發生更新時,會重新轉譯元件圖形,並計算 UI diff (差異)。 此 diff 是更新用戶端 UI 所需的最小 DOM 編輯集。 diff 會以二進位格式傳送至用戶端,並由瀏覽器套用。

使用者瀏覽離開元件之後,就會處置元件。

Blazor WebAssembly

Blazor WebAssembly 是單一頁面應用程式 (SPA) 架構,適用於建置使用 .NET 的互動式用戶端 Web 應用程式。 Blazor WebAssembly 會使用開放式 Web 標準,而不會外掛程式或將程式碼重新編譯成其他語言。 Blazor WebAssembly 適用於所有現代化網頁瀏覽器,包括行動瀏覽器。

在網頁瀏覽器內執行 .NET 程式碼已可藉由 WebAssembly (縮寫為 wasm) 達成。 WebAssembly 是一種精簡的位元組程式碼格式,針對快速下載和最快執行速度而最佳化。 WebAssembly 是開放式的 Web 標準,在不含外掛程式的網頁瀏覽器中支援。

WebAssembly 程式碼可以透過 JavaScript 存取瀏覽器的完整功能,稱為 「JavaScript 互通性」,通常簡稱為 JavaScript interopJS interop。 在瀏覽器中透過 WebAssembly 執行的 .NET 程式碼會在瀏覽器的 JavaScript 沙箱執行,且受沙箱所提供對用戶端電腦之惡意動作的保護。

Blazor WebAssembly 在具有 WebAssembly 的瀏覽器中執行 .NET 程式碼。

當建置 Blazor WebAssembly 應用程式並在瀏覽器中執行時:

  • C# 程式碼檔案和 Razor 檔案會編譯成 .NET 組件。
  • 組件和 .NET 執行階段會下載至瀏覽器中。
  • Blazor WebAssembly 啟動 .NET 執行階段,並設定執行階段以載入應用程式的組件。 Blazor WebAssembly 執行階段會使用 JavaScript Interop 來處理 DOM 操作和瀏覽器 API 呼叫。

發佈的應用程式大小 (其「承載大小」) 是應用程式使用性的重要效能因素。 大型應用程式需要相對較長的時間才能下載至瀏覽器,這點會對使用者體驗造成傷害。 Blazor WebAssembly 對承載大小進行最佳化,以縮短下載時間:

  • 若應用程式是透過中繼語言 (IL) 修剪器所發佈的,則會移除未使用的程式碼。
  • HTTP 回應會進行壓縮。
  • .NET 執行階段與組件會在瀏覽器中進行快取。

Blazor Hybrid

混合式應用程式會使用原生與 Web 技術的混合。 Blazor Hybrid 應用程式會在原生用戶端應用程式中使用 Blazor。 Razor 元件會在 .NET 程序中以原生方式執行,並使用本機 Interop 通道將 Web UI 轉譯至內嵌 Web View 控制項。 混合式應用程式中不會使用 WebAssembly。 混合式應用程式包含下列技術:

  • .NET Multi-platform App UI (.NET MAUI):使用 C# 和 XAML 建立原生行動和桌面應用程式的跨平台架構。
  • Windows Presentation Foundation (WPF):與解析度無關的 UI 架構,並使用以向量為基礎的轉譯引擎,建置可利用新式圖形硬體。
  • Windows Forms:建立適用於 Windows 豐富型桌面用戶端應用程式的 UI 架構。 Windows Forms 開發平台支援一組廣泛的應用程式開發功能,包括控制項、圖形、資料繫結和使用者輸入。

如需使用上述架構來建立 Blazor Hybrid 應用程式的詳細資訊,請參閱下列文章:

JavaScript Interop

對於需要協力廠商 JavaScript 程式庫和瀏覽器 API 存取的應用程式,元件能夠和 JavaScript 交互操作。 元件可以使用 JavaScript 可以使用的任何程式庫或 API。 C# 程式碼可以呼叫進入 JavaScript 程式碼,而 JavaScript 程式碼可以呼叫進入 C# 程式碼

程式碼共用和 .NET Standard

Blazor 會實作 .NET Standard,使 Blazor 專案參考符合 .NET Standard 規格的程式庫。 .NET Standard 是所有 .NET 實作都具備的 .NET API 正式規格。 .NET Standard 類別庫可跨不同的 .NET 平台 (例如 Blazor、.NET Framework、.NET Core、Xamarin、Mono 和 Unity) 進行共用。

網頁瀏覽器內不適用的 API (例如,存取檔案系統、開啟通訊端與執行緒) 均會擲回 PlatformNotSupportedException

其他資源