Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

23 Jul 2021

ASP.NET以及Blazor试玩

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项目

参考

(本篇完)

Categories