Blazor 是一个基于 C# 构建交互式 Web UI 的框架，支持 WebAssembly（客户端运行）和 Server（SignalR 服务端交互）两种托管模式，均使用 Razor 组件模型。

Blazor 是一个基于 C# 构建交互式 Web 用户界面的框架，它允许你使用 C#、Razor 和 HTML 来开发前端 UI，而无需编写 JavaScript。它运行在浏览器中通过 WebAssembly 或在服务器端通过 SignalR 实现响应式交互。如果你熟悉 C# 和 ASP.NET Core，Blazor 将非常容易上手。

Blazor 是什么？

Blazor 支持两种托管模式：

• Blazor WebAssembly：C# 代码直接在浏览器中通过 WebAssembly 运行，完全客户端化，适合构建独立的单页应用（SPA）。
• Blazor Server：UI 更新和事件处理通过 SignalR 连接与服务器通信，逻辑在服务器执行，适合需要快速响应且对网络依赖可接受的应用。

两者都使用 Razor 组件模型，组件以 .razor 文件编写，结合 C# 逻辑与 HTML 标记。

创建你的第一个 Blazor 应用

确保已安装 .NET SDK（6.0 或更高版本）。打开终端并运行：

dotnet new blazor -o MyFirstBlazorApp
cd MyFirstBlazorApp
dotnet run

然后在浏览器访问 https://localhost:5001，你会看到默认模板页面。

Razor 组件基础

每个 .razor 文件是一个组件。例如，创建 HelloWorld.razor：

Hello, @Name!

    输入你的名字：
    

@code {
private string Name { get; set; } = "World";
}

这个组件包含 HTML 和内嵌 C# 代码块。@bind 实现双向绑定，当输入框内容变化时，Name 属性自动更新。

处理事件和状态更新

Blazor 组件可以响应用户操作。例如添加一个按钮来更新消息：

打招呼
@code {
private void UpdateGreeting()
{
Name = $"用户 {DateTime.Now:HH:mm:ss}";
}
}

@onclick 绑定点击事件，调用 C# 方法触发 UI 更新。Blazor 自动检测状态变化并重新渲染相关部分。

组件间通信：参数传递

父组件向子组件传值使用 [Parameter] 特性。例如子组件 GreetingDisplay.razor：

    当前问候语：@Message

@code {
[Parameter] public string Message { get; set; }
}

父组件中使用：

@code {
private string greeting = "欢迎来到 Blazor！";
}

路由设置

Blazor 支持基于路径的导航。在组件顶部添加 @page 指令即可注册路由：

@page "/demo"
这是演示页面

访问 /demo 即可看到该组件。支持参数，如 @page "/user/{id}"，可通过 [Parameter] 接收 id。

基本上就这些。Blazor 让你用熟悉的 C# 构建现代 Web 界面，减少上下文切换。从简单组件开始，逐步集成表单、服务依赖注入和状态管理，就能构建出功能完整的 Web 应用。不复杂但容易忽略的是生命周期方法和渲染优化细节，后续可深入学习 OnInitialized、ShouldRender 等机制。