C# Blazor入门教程 - 使用C#构建交互式Web UI

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

Blazor 是什么？

Blazor 支持两种托管模式：

两者都使用 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 等机制。