C#程序員的福音來啦，Blazor框架概覽

其實這篇文章算是遲到了很長時間了，不過現在寫出來還不算太晚。.NET Core 3.0已經出來一段時間了，隨.NET Core 3.0出來的，還有一個名爲Blazor的框架。今天我試用了一下，感覺很有意思。這個框架的潛力很大，而且因爲基於.NET技術，對於C#程序員來說學習門檻很低，開發效率高的一筆。所以來給大家介紹一下。

官方介紹

首先來看看官方對於blazor框架的一些介紹：

Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：

• 使用 C# 代替 JavaScript 來創建豐富的交互式 UI。
• 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
• 將 UI 呈現爲 HTML 和 CSS，以支持衆多瀏覽器，其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發可提供以下優勢：

• 使用 C# 代替 JavaScript 來編寫代碼。
• 利用現有的 .NET 庫生態系統。
• 在服務器和客戶端之間共享應用邏輯。
• 受益於 .NET 的性能、可靠性和安全性。
• 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 以一組穩定、功能豐富且易用的通用語言、框架和工具爲基礎來進行生成。

簡單來說，Blazor是一個開發客戶端網頁程序的框架。需要注意，根據官網的說明，如果你要開發網站類型的應用，還是應該用ASP.NET Core等框架。Blazor比較適合傳統企業，在內網中運行，用戶數量不多，基於瀏覽器的應用。

目前Blazor有兩個版本，Server版本利用HTML、CSS等網頁技術，項目運行的時候需要連接服務器。官網也就介紹了Server版的優缺點。

Blazor 服務器託管模型具有以下幾個優點：

• 下載大小明顯小於 Blazor WebAssembly 應用，且應用加載速度快得多。
• 應用充分利用服務器功能，包括使用任何與 .NET Core 兼容的 Api。
• 服務器上的 .NET Core 用於運行應用程序，因此現有的 .NET 工具（如調試）可按預期方式工作。
• 支持瘦客戶端。 例如，Blazor 服務器應用程序適用於不支持 WebAssembly 的瀏覽器以及資源受限設備上的瀏覽器。
• 應用程序的 .NET/C#代碼庫（包括應用程序的組件代碼）不會提供給客戶端。

Blazor 服務器託管有缺點：

• 通常存在較高的延遲。 每個用戶交互都涉及網絡躍點。
• 無脫機支持。 如果客戶端連接失敗，應用將停止工作。
• 對於包含多個用戶的應用而言，可伸縮性非常困難。 服務器必須管理多個客戶端連接並處理客戶端狀態。
• 爲應用提供服務需要 ASP.NET Core 服務器。 不可能的無服務器部署方案（例如，通過 CDN 爲應用提供服務）。

Blazor的另一個版本基於WebAssembly技術，可以支持離線運行，而且藉由WebAssembly的計算高性能特性，可以在瀏覽器中運行的更高效。官網也介紹了其優缺點。不過WebAssembly版目前還在測試當中，正式版將隨.NET Core 3.1一起推出。

Blazor WebAssembly 託管模型具有以下幾個優點：

• 沒有 .NET 服務器端依賴項。 應用在下載到客戶端之後完全正常運行。
• 完全利用客戶端資源和功能。
• 工作從服務器卸載到客戶端。
  – 不需要 ASP.NET Core web 服務器來託管應用程序。 無服務器部署方案可能（例如，通過 CDN 提供應用）。-

B- lazor WebAssembly 託管有缺點：-

• 應用程序限制爲瀏覽器的功能。-
• 需要支持的客戶端硬件和軟件（例如，WebAssembly 支持）。
• 下載大小較大，應用需要較長時間才能加載。
• .NET 運行時和工具支持不太成熟。 例如， .NET Standard支持和調試中存在限制。

Blazor示例項目

好了，不多說廢話了，讓我們直接來看看Blazor項目是什麼樣子的吧，這裏以Blazor Server爲例。它也是.NET Core項目，所以集成了.NET Core的所有好處，可以跨平臺，各種IDE和編輯器都支持。這裏以Visual Studio爲例來說明，當然你也可以使用Visual Studio Code等編輯器。

首先用VS創建一個Blazor項目，項目配置如圖所示。稍等片刻，項目就創建好了。

然後用調試功能，即可運行程序。程序運行結果如圖所示。

好了，讓我們來看看項目代碼吧。

首先來看看項目節奏，一個標準的ASP.NET Core 項目。wwwroot目錄存放項目用到的CSS、JS等文件；Data目錄存放數據庫相關的代碼；Pages目錄存放項目頁面對應的Razor模板代碼；Shared目錄存放項目頁面的公共模板。

主頁

主頁對應的代碼很簡單，如下所示。page指令指定了本頁面對應的URL。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

計數器

第二個頁面的功能是計數器，功能很簡單，點擊頁面上的按鈕，計數器數字加一。

對應的代碼如下。需要注意的是這裏onclick後面的不是通常意義的JS函數，而是code指令裏面的C#函數。相信對於C#程序員來說，這樣來編寫頁面確實更簡單方便。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

異步加載

最後一個功能很有意思，利用C#的異步功能實現了頁面異步加載數據的功能。當切換到這個頁面的時候，默認顯示加載中，當數據加載完畢的時候，切換顯示出數據表格。

這個頁面對應的功能如下。可以看到完成異步功能的代碼很簡單，就是一個C#異步方法。然後頁面裏用if-else指令來切換數據顯示，當獲取到數據之後就顯示。

@page "/fetchdata"

@using BlazorApp1.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

那麼這個ForecastService類是何方神聖呢？我們再來看看它的實現代碼。代碼實現實際上也很簡單，就是利用LINQ功能產生了一組隨機數據。

using System;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorApp1.Data
{
    public class WeatherForecastService
    {
        private static readonly string[] Summaries = new[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };

        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
        {
            var rng = new Random();
            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            }).ToArray());
        }
    }
}

可以看到利用Blazor框架來實現頁面異步加載這個功能，對於.NET程序員來說很簡單。假如利用React、Vue等前端技術來實現的話，需要學習大量額外的知識。這也正是Blazor框架的目的所在，讓C#程序員更加方便的實現同樣的功能。

將來Blazor WebAssembly還會提供離線Web程序的功能，爲.NET程序員們帶來更多功能。這些年來.NET Core開源的成果大家有目共睹，可以期待未來.NET編程領域出現更多優質框架，讓程序員們能享受到更美好的生活。