ASP.NET Core Blazor

歡迎使用 Blazor !

Blazor 是使用 .NET建置互動式用戶端 Web UI 的架構:

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

元件類別通常會以副檔名為的標記頁面 .razor 形式 Razor 撰寫。 中的 Blazor 元件正式稱為Razor 元件,非正式稱為Blazor 元件。 Razor 是結合 HTML 標籤與 C# 程式碼的語法,專為開發人員生產力而設計。 Razor 可讓您在相同的檔案中切換 HTML 標籤和 C#,以及 Visual Studio 中的 IntelliSense 程式設計支援。 Razor 頁面和 MVC 也會使用 Razor 。 不同于 Razor 以要求/回應模型為建置的 Pages 和 MVC,元件特別用於用戶端 UI 邏輯和組合。

Blazor 使用自然 HTML 標籤進行 UI 組合。 下列 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 訊息:

Dialog component rendered in the browser nested inside of the Index component. The browser developer tools console shows the message written by C# code when the user selects the Yes! button in the UI.

元件會轉譯成瀏覽器 檔物件模型 (DOM ) 的記憶體內部標記法,稱為 轉譯樹狀結構,以彈性且有效率的方式更新 UI。

Blazor Server

Blazor ServerRazor支援在 ASP.NET Core 應用程式中裝載伺服器上的元件。 UI 更新是透過 SignalR 連線處理。

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

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

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

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection

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

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

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

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

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

Blazor WebAssembly

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

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

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

Blazor WebAssembly runs .NET code in the browser with WebAssembly.

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:一種 UI 架構,可建立適用于 Windows 的豐富型桌面用戶端應用程式。 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

其他資源