随着前后端分离模式的流行，目前前端开发三大主流框架React、Vue、Angular占据了WEB开发的主要份额，jQuery在新项目上使用的几乎很少了。今天我们要介绍的是Blazor，一种使用 .NET 生成交互式客户端 Web UI 的框架。

什么是Blazor

Blazor 是一个开放源代码和跨平台的Web UI框架，使用 .NET 代替 JavaScript 来创建丰富的交互式 UI。Blazor支持2种运行模式：
Blazor Server模式：应用在ASP.NET Core应用服务器上运行，并且通过SignalR（双向通讯）进行用户交互处理；Blazor WebAssembly 模式：Razor和HTML最终会编译成WebAssembly 运行在支WebAssembly 的浏览器上。

Blazor的优势

1. 使用 WebAssembly 技术提供更优的性能
2. 使用 C# 代替 JavaScript 来编写代码，可以利用现有的 .NET 库生态系统，对.net开发者比较友好不需要重新学习React、Vue、Angular等框架。
3. Blazor WebAssembly使用SignalR可以很方便的在浏览器和服务器之间实现双向通讯，服务端可以端直接向客户端推送数据，避免了传统前后端分离的Web应用中大量使用ajax轮询请求。

现有Blazor组件

和React、Vue、Angula三大框架相比，Blazor今年才发布3.2.0正式版，Blazor UI组件还不是很多，目前有传统的.net控件厂商提供的商业组件，如大名鼎鼎的Telerik、DevExpress估计很多.net的小伙伴们都用过。另外开源的组件有：Ant Design Blazor（Ant Design大家应该很熟悉蚂蚁金服UI）、BlazorStrap（基于Bootstrap 4）、Blazui（基于Element UI CSS）、Blazor Extensions、bUnit、MatBlazor、Blazorise、Blazored。

Blazor起步

在VS2019新建一个Blazor应用，首先我们我们在新建项目模板中选择Blazor应用，然后选择Blazor WebAssembly App客户端

项目新建成功后，我们打开工程看到代码结构如下:

我们看到Pages目录放的是视图，入口页面index.html，看着这些是不是跟VUE工程的目录很相似，包括路由双向绑定等功能。

@page "/counter"

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

上面示例里面的Current count绑定了@currentCount ，点击“Click me”按钮将自动加1，这些跟VUE还是非常相似的。不过code跟视图放一起看着有点不爽，有点像React的风格，不像VUE将模板单独抽离成.vue文件。最后我们运行看下默认示例的效果，效果有点丑当然我们可以使用Ant Design Blazor、BlazorStrap、Blazui等开源Blazor组件后效果会很好多。