C#程序员的福音来啦，Blazor框架概览

其实这篇文章算是迟到了很长时间了，不过现在写出来还不算太晚。.NET Core 3.0已经出来一段时间了，随.NET Core 3.0出来的，还有一个名为Blazor的框架。今天我试用了一下，感觉很有意思。这个框架的潜力很大，而且因为基于.NET技术，对于C#程序员来说学习门槛很低，开发效率高的一笔。所以来给大家介绍一下。

blazor

官方介绍

首先来看看官方对于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项目，项目配置如图所示。稍等片刻，项目就创建好了。

创建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编程领域出现更多优质框架，让程序员们能享受到更美好的生活。