Blazor 初探

探索Blazor：C#构建Web应用的新框架

最新推荐文章于 2025-10-16 08:04:20 发布

原创最新推荐文章于 2025-10-16 08:04:20 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c# #.netcore

Blazor 专栏收录该内容

1 篇文章

订阅专栏

Blazor是一个开源框架，用C#编写客户端代码并在浏览器中运行，无需JavaScript。它有两种模型：BlazorServer适合服务器交互，BlazorWebAssembly可在浏览器本地运行，支持离线。文章讨论了两种模型的差异、优缺点，并介绍了结合AntDesign和LiteDB的开发建议。

早前发布 Blazor 时，在Microsoft 官方文档里看过 Blazor 的教程。当时，只是做个了解。而今，想起来网上搜索下有关 Blazor 在国内的情况及评价，其中有一个网友建议（Blazor Server +AntDesign+LiteDB），对开发效率很大，就产生好奇，要去一探究竟。

首先我们先介绍下 Blazor 是什么，有什么特点。这些有利于我们对 Blazor 有一个大概的了解。

Blazor 是一个用于构建 Web 应用程序的开源框架。与传统的 Web 应用程序框架不同的是，Blazor 使用 C# 编写客户端代码，并在浏览器中运行，不需要 JavaScript 进行交互，意味着 .NET 开发人员可以完全使用 C# 来实现前端业务逻辑。

Blazor 提供了两个不同的模型：

Blazor Server：在此模型下，应用程序的代码运行在服务器上，客户端浏览器通过 SignalR 实时通信协议与服务器进行通信，客户端只是在浏览器中渲染用户界面。因此，Blazor Server 应用程序具有快速启动、高安全性和良好的可扩展性等优点。这个模型类似于 ASP.NET Web Forms 的模型。
Blazor WebAssembly：此模型将 Blazor 应用程序作为 WASM（Web Assembly）二进制文件在浏览器中运行，不需要经过服务器进行交互。因此，Blazor WebAssembly 应用程序可以脱机运行，而不需要与服务器进行通信。这个模型类似于 React、Angular 或 Vue 等 JavaScript 框架。这种模式下的应用程序具有更快的响应速度和更好的离线支持等特点。

我通过网上找了下这两种模型的区别及优缺点，供大家在技术选型的时候参考。

区别：

应用程序架构

Blazor Server 的应用程序代码是运行在服务器上的，客户端浏览器只是在当前会话中向服务器发送请求，并实时接收由服务器提供的 HTML/CSS/JavaScript 代码进行渲染。而 Blazor WebAssembly 的应用程序代码是直接运行在客户端浏览器中的，不需要服务器的支持。

性能

Blazor Server 比 Blazor WebAssembly 更省带宽，因为仅在客户端与服务器之间传输更新的 UI 组件状态，而不是整个组件。但是，Blazor Server 应用程序可能会面临延迟和网络问题等挑战，因为必须将请求发送到服务器并等待响应。而 Blazor WebAssembly 则具有更快的启动速度和更好的响应能力，因为应用程序完全在客户端本地运行，更像是一个桌面应用程序。

功能支持

Blazor Server 可以访问所有 .NET 运行时中可用的功能和库，这意味着它可以轻松地访问文件系统、数据库和其他基于 .NET 的服务。而 Blazor WebAssembly 则受到浏览器沙箱的限制，只能访问浏览器所提供的 API，对外部资源的访问需要通过 JavaScript 进行封装和代理。

开发体验

Blazor Server 的开发体验与传统的 Web 应用程序类似，客户端浏览器只是负责渲染接收到的 HTML/CSS/JavaScript 代码，并与服务器进行通信。而 Blazor WebAssembly 可以像桌面应用程序一样进行本地调试和开发。

优缺点：

Blazor Server 的优点：

运行在服务器上，可以充分利用服务器的计算和内存资源；
具有更好的安全性和易于扩展性；
可以访问所有 .NET 运行时中可用的功能和库；
与传统 Web 应用程序类似，开发体验较为熟悉。

Blazor Server 缺点：

可能面临延迟和网络问题等挑战；
不支持离线运行；
有更高的带宽和服务器负载。

Blazor WebAssembly 的优点：

具有更好的响应能力，更像桌面应用程序；
具有离线支持；
跨平台的解决方案。

Blazor WebAssembly 缺点：

受到浏览器沙箱的限制，不支持所有 .NET 功能，例如对本地文件系统和数据库的直接访问等；
需要引入更多的 JS 框架和库作为补充，这会增加项目的复杂度；
文件大小问题。Blazor WebAssembly 应用程序需要将 .NET 和 Mono 运行时、DLL、静态文件等全部打包到客户端上，并且需要在浏览器上运行，因此应用程序的大小往往比较大，并且首次加载时间往往也较长。

综合来看，如果需要充分利用服务器的计算和内存资源，并且对性能和带宽要求不高，可以选择 Blazor Server；如果需要具有更好的响应能力、离线支持和跨平台解决方案，则可以选择 Blazor WebAssembly。但是，这两种模型都不适合性能要求极高（高并发、秒杀）、内容变化频繁（数据实时更新）等场景。

接下来我们创建一个简单的 Blazor Server 项目来体检。

打开 visual studio 2022，选择“创建新项目”；
在“创建新项目”对话框中，在左侧选择“Blazor Server 应用空”；
在右下角点击“下一步”；
在“配置新项目”对话框中，输入项目名称（BlazorApp），选择存储位置；
在右下角点击“下一步”；
在“其它信息”对话框中，使用默认；
在右下角点击“创建”；
等待项目创建完成后，可以看到一个默认的 Blazor Server 项目；
进入应用的项目文件，安装 NuGet 包引用；

Install-Package AntDesign
更新 Program ；

builder.Services.AddAntDesign();
然后在 Pages/_Host.cshtml 中引入静态文件；

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />

<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
在 _Imports.razor 中加入命名空间;

@using AntDesign
在 App.razor 最后一行添加一个 <AntContainer /> 组件

切换到Pages/Index.razor 这里可以使用 antdesign 组件啦。

@page "/"
//注入通知组件
@inject INotificationService _notice

<h1>哩厚 Blazor</h1>
<Button type="primary" OnClick="@OnClick">click me</Button>
@code {
private async Task OnClick()
  {
      var config = new NotificationConfig()
          {
               Message = "问候",
               Description = "哩厚 Blazor",
               Placement = NotificationPlacement.Top,
               Duration = 0
          };
      await _notice.Open(config);
  }
}

Button 里的 OnClick 事件有没有很像 ASP.NET WebForms 写法。

如果您还没看过 Blazor 相关教程，就不要纠结代码是什么意思了。就当提前体验下。

最后，祝大家学习愉快！