C#的Blazor是什么？如何使用C#构建交互式Web UI？

来源：这里教程网时间：2026-02-21 17:30:04 作者：

Blazor 是微软推出的基于 C# 构建交互式 Web 用户界面的框架，它允许开发者使用 C#、Razor 语法和 HTML 来开发前端 UI，而无需编写 JavaScript。Blazor 的核心优势在于可以让 .NET 开发者用熟悉的语言和工具构建现代 Web 应用。

Blazor 是什么？

Blazor 支持两种主要运行模式：

Blazor Server：UI 逻辑在服务器端执行，通过 SignalR 实时连接将 UI 更新推送到浏览器。响应快，适合内网或低延迟场景，但依赖持续网络连接。 Blazor WebAssembly：C# 代码在浏览器中通过 WebAssembly 执行，完全在客户端运行，独立于服务器，适合需要离线能力或部署到静态主机的场景，但首次加载稍慢。

两者都使用 Razor 组件（.razor 文件）来定义 UI，支持数据绑定、事件处理、依赖注入等特性。

如何使用 C# 构建交互式 Web UI？

通过 Blazor，你可以像写桌面应用一样构建 Web 界面。以下是基本步骤：

创建项目：使用 .NET CLI 或 Visual Studio 创建 Blazor 项目。
示例命令：
dotnet new blazorserver -n MyBlazorApp
或
dotnet new blazorwasm -n MyBlazorApp 编写组件：在 .razor 文件中组合 C# 和 HTML。
例如，Counter 组件：
@page "/counter" <h3>Counter</h3><p>Current count: @currentCount</p><button class="btn btn-primary">Click me</button><p>@code { private int currentCount = 0;</p><pre class="brush:php;toolbar:false;">private void IncrementCount() { currentCount++; }
}
处理事件与绑定数据：使用 @on{event} 绑定事件，如 @onclick、@oninput。双向绑定可用 @bind。
<input><p>Hello, @name!</p><p>@code { private string name = ""; }</p>
组件通信：父组件可通过参数传递数据（[Parameter] 属性），子组件可触发事件回调（EventCallback）通知父级。 使用服务与依赖注入：在 Program.cs 中注册服务，组件中通过 [Inject] 获取实例，适用于数据访问、状态管理等。