快速了解 ASP.NET Core Blazor

2023-01-17 JavaScript渲染网站C#.NET

最近在几个微信 .net 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

面试官:“你刚说你喜欢研究新技术,那你有了解过 blazor 吗?”

作为一位专注于 .net 开发的软件工程师,你好意思说你对 blazor 一点也不解吗?.net 新技术也就是那么几个,连微软最近在逛推的 blazor 你都不了解,你好意思说你喜欢研究新技术?

讲真,确实有很多童鞋对 blazor 还不了解,平时埋头写代码改 bug,哪有时间去研究 blazor,再说这种玩意儿公司会不会采用还是个很大疑问呢。是这个理,但如果等你的公司(国内使用了.net 技术的公司)都开始使用 blazor 了,blazor 还能算是新技术吗?出于真正对技术的兴趣和热爱,对于新技术,有人会主动地去了解(不一定要研究得很深),而不是等到需要用的时候再去了解。至少他们会知道新技术有哪些优点,在公司技术选型上就可以给到自己的意见甚至推广新技术的使用,这可能就是他们和普通程序员拉开差距的原因之一。

不管你是真对 blazor 感兴趣,还是只是为了应付面试,作为 .net 开发者,没用过 blazor 很正常,但至少应该了解一下,哪怕是花个一两分钟看看这篇文章的介绍。

使用 c# 实现 web 交互式 ui

blazor 允许你使用 c# 来实现 web 交互式 ui,而不需要使用 javascript。尽管 javascript 的生态很强大,但这种弱类型语言在业务逻辑比较复杂的大型 web 开发上还是存在较大的缺陷。当然,经过几年的发展 javascript 的弱类型问题可以通过工程手段来解决,甚至使用 typescript 来替代,但在实现可重用组件上还是有诸多的不理想。

blazor 应用可以使用 c#、html 和 css 实现可重用 web ui 组件,客户端和服务器代码都用 c# 编写的,允许你共享代码和库。blazor 是 asp.net core 的一个新特性,所以可以很好的集成到 asp.net core mvc/razor pages 应用中。

下面是一段来自于模板的 blazor 代码:

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

在 webassembly 或服务器端运行

blazor 支持两种运行方式,一是在客户端使用 webassembly 运行,二是在服务器端运行直接渲染到浏览器。

blazor 可以使用 webassembly 直接在浏览器中运行客户端 c# 代码,正因为它是运行在 webassembly 上的 .net 程序,所以客户端也可以重用服务器端的代码和库。

即使不使用 webassembly,blazor 也可以在服务器端运行客户端的业务逻辑。客户端 ui 事件使用实时消息框架 signalr 发送回服务器,一旦执行完成,所需的 ui 更改将发送到客户端渲染到 dom 中。

目前主流开发单页应用(spa)使用 vue 或 react 的很多,但要实现服务器端渲染(ssr),还是挺麻烦的,尽管有现成的像 next.js 或 nuxt.js 这样的框架可以使用,但由于它们更新迭代比较快,依赖的 npm 包多而杂,后期维护和升级成本也很高。所以从 ssr 支持这一点来讲,blazor 应用还是有明显优势的。

基于开放的 web 标准

为了使用统一的编程语言或使用统一的标准,常见的做法是将一种编程语言编写的代码转换为另一种编程语言,比如将 typescript 编写代码转换成 javascript 以便在浏览器中运行。而 blazor 使用的是开放的 web 标准,不需要额外的插件或代码语言转换。blazor 可以在所有主流的 web 浏览器中工作,包括移动端浏览器。

在客户端运行 blazor 代码和 javascript 框架一样是在安全的沙箱中执行的,在基于开放的 web 标准基础上,blazor 具有服务器端代码的灵活性,比如直接连接数据库。

和 javascript 交互

在 blazor 应用中,你可以在 c# 代码中调用 javascript 代码,也可以在 javascript 代码中调用 c# 代码,两者可以很容易实现交互操作。好处是,在使用 c# 编写业务代码时,你依然可以继续使用现有庞大的 javascript 库生态系统。当使用服务器端运行代码时,blazor 会负责在客户端使用 javascript 无缝调用 c# 代码。

下面是一个 javascrit 调用 c# 的示例。

先使用 jsinvokable 特性标注一个 c# 方法为允许 javascript 调用:

<button type="button" class="btn btn-primary"
        onclick="examplejsfunctions.returnarrayasyncjs()">
    trigger .net static method returnarrayasync
</button>

@code {
    [jsinvokable]
    public static task<int[]> returnarrayasync()
    {
        return task.fromresult(new int[] { 1, 2, 3 });
    }
}

然后在 javascript 代码中调用 c# 代码:

window.examplejsfunctions = {
  ...
  returnarrayasyncjs: function () {
    dotnet.invokemethodasync('blazorsample', 'returnarrayasync')
      .then(data => {
        data.push(4);
          console.log(data);
      });
  },
  ...
};

其它

对我来说 blazor 最吸引的优点是前后端代码的共用以及组件的重用。通过 nuget 管理和引用共用组件和库不仅比 npm 包管理方便,而且体积也小很多。

blazor 的生态也正逐步发展起来了,虽然还没有听说哪个大公司在用,但 blazor 的理念是未来趋势,值得你花点时间了解和研究一下。

上一篇:配置文件中的数据库连接串加密了,你以为我就挖不出来吗?

下一篇:WPF MVVM 弹框之等待框