Blazor是微软推出的使用C#来编写网页代码的技术，具有多种使用方式，可以部署在服务端，也可以安装WebAssembly的方式部署。

Get Started

创建一个Blazor项目：

dotnet new blazorserver -o BlazorApp --no-https

如果不想让dotnet-cli采集信息，可以设置DOTNET_CLI_TELEMETRY_OPTOUT为1

运行之：

dotnet watch run

就会在http://localhost:5000打开网页，对应的实现在Pages/Index.razor。

看看/counter的实现，还是挺简单易懂的：

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

可以把上面的Counter当成一个组件，嵌入到其他页面中：

<Counter />

定义一个参数：

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

设置一个参数：

<Counter IncrementAmount="10" />

ASP.NET 101

What is ASP.NET? | ASP.NET Core 101 [1 of 13]

General introduction.

Making an ASP.NET Core Website | ASP.NET Core 101 [2 of 13]

Visual Studio里面创建一个ASP.NET项目，然后加载如IIS Express中运行。

Adding Data to an ASP.NET Core Website | ASP.NET Core 101 [3 of 13]

似乎现在Visual Studio对ASP.NET的支持和以前有点出入了。竟然无法创建cs文件……

Build a web app with Blazor

What is Blazor?

Blazor应用由可复用的web UI组件构成。组件采用C#, HTML以及CSS编写。Blazor允许使用C#编写客户端和服务端代码。

可以使用Blazor来生成：

  • 用于处理UI交互的服务端代码，通过WebSocket通信
  • 编译成WebAssembly指令，可直接运行于客户端浏览器之中的

之前WebAssembly只能使用C, C++, Rust来编写，现在可以用C#了。WebAssembly程序运行于JavaScript沙箱之中。

Blazor WebAssembly 支持的浏览器

  • Edge
  • Firefox
  • Chrome
  • Safari

Blazor Server则可以将Blazor组件寄住在ASP.NET Core应用上。UI更新采用SignalR连接。处理逻辑存在于服务端，可以处理：

  • 执行应用的C#代码
  • 把UI事件从浏览器发送到服务器
  • 把UI更新从服务端发送到浏览器
  • JavaScript的交互调用也是按此处理

Exercise - Create and run a Blazor web app

先创建一个空目录BlazorApp然后在目录中执行：

dotnet new blazorserver

同样需要执行dotnet watch run。

http跑在端口5000，https跑在5001。

Blazor components

组件以.razor结尾。编译之后，组件被转化为一个.NET类，包含公共的UI元素，包括状态，渲染逻辑，生命周期方法，以及事件处理器。

Exercise - Add a component

跟tutorial中的类似

Data binding and events

可以有单独的cs文件作为code-behind。也可以将C#嵌入组件。

Razor指令（directives）是组件标签，可以用于定义单语句，方法或大的代码块。总的来说目的是在HTML中内嵌C#代码。

下列是代码相关指令：

  • @expression()嵌入表达式
  • @code嵌入多个语句
  • @functions可以用于添加方法和辖属。在生产的class中靠前定义，可以被后续的方法引用。

页面指令（@page）用于指示路由。

可以将HTML元素绑定到C#字段，辖属以及Razor表达式的量值。绑定采用@bind标签。

Exercise - Data binding and events

在Page目录创建一个名为Todo的组件：

dotnet new razorcomponent -n Todo -o Pages

将todo加到Shared/NavMenu.razor这个layout中去。

Summary

啊，竟然到这就完了……

其他

小结

目前看，Blazor就是将C#嵌入HTML（或许反过来说也行）。但这种做法并不新奇。亮点是它采用C#，基于.NET，生产力和运行效率应该都不错。然后它支持WebAssembly，性能上有可能超过一众基于JavaScript的框架。不知道你爱不爱，我有点动心了。自.NET Core以来，.NET进步还是不小的，大有超过Java的趋势。

Razor vs Blazor

What is the difference between Blazor vs. Razor?说到Razor基于.NET的模板语言，被Blazor所用。

Blazor有点类似于ASP.NET Core & ASP.NET MVC。

工具

  • Visual Studio中需要安装ASP.NET开发工具才能支持Razor项目
  • Visual Studio Code需要安装C#扩展才能支持Razor项目

参考

（本篇完）