ASP.NET Core Blazor

歡迎使用 Blazor！

Blazor 是 .NET 前端 Web 架構，支援單一程式設計模型中的伺服器端轉譯和用戶端互動性：

• 使用 C# 建立豐富的互動式 UI。
• 共用以 .NET 撰寫的伺服器端與用戶端應用程式邏輯。
• 將 UI 轉譯為 HTML 和 CSS 以支援寬瀏覽器，包括行動裝置瀏覽器。
• 使用 .NET 和 Blazor 建置混合式桌面和行動應用程式。

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

• 以 C# 撰寫程式碼，其可提升應用程式開發和維護的生產力。
• 利用 .NET 程式庫的現有 .NET 生態系統。
• 從 .NET 的效能、可靠性和安全性中獲益。
• 在 Windows、Linux 或 macOS 上使用開發環境 (例如 Visual Studio 或 Visual Studio Code) 保持生產力。 與新式裝載平台整合，例如 Docker。
• 以常用的語言、架構和工具建置，不僅穩定、功能豐富，而且容易使用。

注意

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

元件

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

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

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

該元件類別通常使用副檔名為 .razor 的 Razor 標記頁面形式撰寫而成。 Blazor 中的元件正式名稱為 Razor 元件，而非正式名稱為 Blazor 元件。 Razor 是結合了 HTML 標記與 C# 程式碼的語法，專為開發人員的生產力而設計。 Razor 可讓您在 Visual Studio 中同一個具有 IntelliSense 程式設計支援的檔案中，於 HTML 標記和 C# 之間切換。

Blazor 會針對 UI 組合使用自然的 HTML 標記。 下列 Razor 標記示範當使用者選取按鈕時遞增計數器的元件。

<PageTitle>Counter</PageTitle>

<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++;
    }
}

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

使用 Blazor 建置完整堆疊 Web 應用程式

Blazor Web App 在單一解決方案中會提供元件型架構，具備伺服器端轉譯和完整用戶端互動功能，您可以在伺服器端與用戶端轉譯模式之間切換，甚至可以在同一個頁面中，混合使用以上模式。

Blazor Web App 可以透過靜態轉譯來自伺服器端的 HTML 內容，即可回應要求，以便快速將 UI 傳遞至瀏覽器。 頁面的載入速度很快，因為 UI 轉譯會在伺服器上快速執行，而不需要下載大型 JavaScript 套件組合。 Blazor 還可以透過伺服器轉譯的各種漸進式增強功能進一步改善使用者體驗，例如使用表單貼文的增強式導覽，以及非同步產生內容的串流轉譯。

Blazor 支援互動式伺服器端轉譯 (互動式 SSR)，UI 互動會透過與瀏覽器的即時連線從伺服器處理。 互動式 SSR 可提供豐富的使用者體驗，就像使用者預期從用戶端應用程式獲得的體驗一樣，但無需建立 API 端點來存取伺服器資源。 互動式頁面的頁面內容會預先呈現，會在一開始產生伺服器上的內容並將其傳送至用戶端，而無需啟用轉譯控制項的事件處理常式。 伺服器會盡快輸出頁面的 HTML UI，以回應初始要求，如此可改善應用程式對使用者的回應速度。

Blazor Web App 有支援用戶端轉譯 (CSR) 的互動功能，此功能仰賴以 WebAssembly 建立的 .NET 執行階段，您可以使用應用程式，即可完成下載。 在 WebAssembly 上執行 Blazor 時，.NET 程式碼可以存取瀏覽器的完整功能，並使用 JavaScript 進行交互操作。 .NET 程式碼會在瀏覽器的安全性沙箱中執行，且受沙箱保護以防止用戶端電腦的惡意動作。

Blazor 應用程式可以完全以在瀏覽器的 WebAssembly 上執行為目標，而不需要伺服器參與。 對於獨立 Blazor WebAssembly 應用程式，資產會作為靜態檔案部署至能夠將靜態內容提供給用戶端的網頁伺服器或服務。 下載之後，獨立 Blazor WebAssembly 應用程式可以作為漸進式 Web 應用程式 (PWA) 進行快取並離線執行。

使用 Blazor Hybrid 建置原生用戶端應用程式

Blazor Hybrid 可讓您在原生用戶端應用程式中使用 Razor 元件，並混合使用 Web、行動及桌面平台的原生和 Web 技術。 程式碼會在 .NET 處理序中以原生方式執行，並使用本機交互操作通道將 Web UI 轉譯至內嵌的 Web View 控制項。 混合式應用程式中不會使用 WebAssembly。 混合式應用程式以 .NET Multi-platform App UI (.NET MAUI) 建置，這是一種跨平台架構，可使用 C# 和 XAML 建立原生行動和桌面應用程式。

Blazor Hybrid 支援 Windows Presentation Foundation (WPF) 和 Windows Forms，可將應用程式從舊版技術轉換到 .NET MAUI。

下一步

Blazor 教學課程：建置第一個 Blazor 應用程式ASP.NET Core Blazor 支援的平台