<p>Blazor 是一个基于 C# 构建交互式 Web UI 的框架，支持 WebAssembly（客户端运行）和 Server（SignalR 服务端交互）两种托管模式，均使用 Razor 组件模型。</p>
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：
<h3>Hello, @Name!</h3>
<p>
<label>输入你的名字：</label>
<input @bind="Name" />
</p>
<p>@code {
private string Name { get; set; } = "World";
}
这个组件包含 HTML 和内嵌 C# 代码块。@bind 实现双向绑定，当输入框内容变化时，Name 属性自动更新。
处理事件和状态更新
Blazor 组件可以响应用户操作。例如添加一个按钮来更新消息：
<button class="btn btn-primary" @onclick="UpdateGreeting">打招呼</button>
<p>@code {
private void UpdateGreeting()
{
Name = $"用户 {DateTime.Now:HH:mm:ss}";
}
}
@onclick 绑定点击事件，调用 C# 方法触发 UI 更新。Blazor 自动检测状态变化并重新渲染相关部分。
组件间通信：参数传递
父组件向子组件传值使用 [Parameter] 特性。例如子组件 GreetingDisplay.razor：
<div class="alert alert-info">
当前问候语：@Message
</div>
<p>@code {
[Parameter] public string Message { get; set; }
}
父组件中使用：
<GreetingDisplay Message="@greeting" />
<p>@code {
private string greeting = "欢迎来到 Blazor！";
}
路由设置
Blazor 支持基于路径的导航。在组件顶部添加 @page 指令即可注册路由：
@page "/demo" <h1>这是演示页面</h1>
访问 /demo 即可看到该组件。支持参数，如 @page "/user/{id}"，可通过 [Parameter] 接收 id。
基本上就这些。Blazor 让你用熟悉的 C# 构建现代 Web 界面，减少上下文切换。从简单组件开始，逐步集成表单、服务依赖注入和状态管理，就能构建出功能完整的 Web 应用。不复杂但容易忽略的是生命周期方法和渲染优化细节，后续可深入学习 OnInitialized、ShouldRender 等机制。
