再學Blazor——概述 - tw511教學網

簡介

Blazor 是一種 .NET 前端 Web 框架，同時支援伺服器端呈現和使用者端互動性。

使用 C# 語言建立豐富的互動式 UI
共用前後端應用邏輯
可以生成混合桌面和移動應用
受益於 .NET 的效能、可靠性和安全性
需要有 HTML、CSS、JS 相關基礎（開發 UI 框架的話）
元件化設計，類似 React、Vue 等前端框架

元件

Blazor 應用基於元件。 Blazor 中的元件是指 UI 元素，例如頁面、對話方塊或資料輸入表單，甚至小到一個輸入框。

定義靈活的 UI 呈現邏輯
處理使用者事件
可以巢狀和重用（大大提高開發效率和維護成本）
可作為 Razor 類庫或 NuGet 包共用和分發
有 Razor 標記頁（.razor檔案）和純 C# 高階寫法兩種編寫形式

1. Razor 常用寫法

此寫法為 HTML 和 C# 混合開發，HTML 結構清晰，範例如下：

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

2. C# 高階寫法

如下程式碼為純 C# 高階寫法，這段程式碼也是 .razor 檔案編譯後生成的格式。如果你反編譯 Razor 語法寫的元件dll，發現上述 HTML 和 C# 混合開發的元件程式碼與下面類似。

class Counter : ComponentBase
{
    private int currentCount = 0;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //構建 h1 標籤
        builder.OpenElement(0, "h1");
        builder.AddMarkupContent(1, "Counter");
        builder.CloseElement();

        //構建 P 標籤
        builder.OpenElement(0, "p");
        builder.AddMarkupContent(1, $"Current count: {currentCount}");
        builder.CloseElement();

        //構建按鈕
        builder.OpenElement(0, "button");
        builder.AddAttribute(1, "class", "btn btn-primary");
        builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, IncrementCount));
        builder.AddMarkupContent(3, "Click me");
        builder.CloseElement();
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

上述 BuildRenderTree 方法程式碼較長，我們可以將 UI 元素封裝成擴充套件方法，button封裝成元件，這樣構建元件既方便又可讀。使用擴充套件方法後元件程式碼改進如下：

class Counter : ComponentBase
{
    private int currentCount = 0;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //構建 h1 標籤
        builder.H1("Counter");
        //構建 P 標籤
        builder.P($"Current count: {currentCount}");
        //構建按鈕
        builder.Component<Button>()
               .Set(c => c.Style, "btn btn-primary")
               .Set(c => c.Text, "Click me")
               .Set(c => c.OnClick, IncrementCount)
               .Build();
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

Web 應用

Blazor Web應用提供了一種基於元件的體系結構，該體系結構具有在單個解決方案中實現伺服器端呈現和完整的使用者端互動性的能力。在這種體系結構中，你可以在伺服器端和使用者端呈現模式之間進行切換，甚至可以在同一頁面中混合使用這兩種模式。

Blazor Web應用可以通過靜態呈現來自伺服器的HTML內容來響應，這種方式的優點是能夠快速將UI傳送到瀏覽器。由於UI呈現在伺服器上快速執行，所以無需下載大型JavaScript捆綁包，從而大大加快了頁面載入速度。

Blazor Web應用還支援互動式伺服器呈現，這種方式通過與瀏覽器的實時連線在伺服器上處理UI互動。這種呈現方式可以實現豐富的使用者體驗，就像使用者端應用所提供的那樣，不過無需建立API終結點就能存取伺服器資源。

此外，Blazor Web應用也支援通過使用者端呈現來處理互動。這種呈現方式依賴於使用可隨附應用下載的WebAssembly構建的.NET執行時。在WebAssembly上執行Blazor時，.NET程式碼可以存取瀏覽器的完整功能，並可與JavaScript互操作。 .NET 程式碼在瀏覽器的安全性沙盒中執行，沙盒提供的保護可防禦使用者端計算機上的惡意操作。

對於獨立Blazor WebAssembly應用，該應用可以完全在瀏覽器中直接執行，無需伺服器參與。對於這種應用，資產可作為靜態檔案部署到可為使用者端提供靜態內容的Web伺服器或服務中。下載後，可以將獨立Blazor WebAssembly應用作為漸進式Web應用（PWA）進行快取並離線執行。

混合應用

Blazor Hybrid 允許在本地使用者端應用中將 Razor 元件與適用於 Web、移動和桌面平臺的本機及 Web 技術進行混合使用。其實現方式是，程式碼在 .NET 程序中以本地形式執行，並使用本地互操作通道將 Web UI 呈現在嵌入式 Web View 控制元件中。

混合應用採用 .NET Multi-platform App UI （.NET MAUI）來構建，這是一個跨平臺框架，利用 C# 和 XAML 來建立本機移動應用和桌面應用。