Blazor是微软基于.NET生态推出的前端Web框架，核心特点是允许开发者使用C#语言替代传统的JavaScript来编写Web UI的交互逻辑，同时可以复用.NET生态下的各类库和工具，大幅降低全栈开发的技术栈切换成本。它打破了前端开发必须使用JavaScript的限制，让熟悉C#的开发者也能独立完成Web前端的开发工作。
Blazor的核心概念
Blazor的核心组成是组件，每个组件是一个可复用的UI单元，包含HTML标记、C#逻辑和样式，类似传统前端框架中的组件概念。组件的后缀名通常为.razor，文件内可以同时编写视图层和逻辑层代码。
Blazor支持两种托管模式，开发者可以根据项目需求选择：
- Blazor WebAssembly：将C#代码编译为WebAssembly格式，直接在浏览器端运行，不需要依赖服务端执行逻辑，适合离线场景或对响应速度要求高的应用。
- Blazor Server：组件在服务器端运行，浏览器通过SignalR连接和服务器通信，服务器将UI更新推送到客户端，适合对首屏加载速度要求高、不需要离线能力的应用。
环境准备
要开发Blazor应用，首先需要安装.NET SDK，建议安装最新稳定版本的.NET 8 SDK。安装完成后，可以通过命令行验证安装是否成功：
dotnet --version
如果输出版本号则说明安装成功，接下来就可以创建Blazor项目了。
创建第一个Blazor应用
打开命令行工具，执行以下命令创建一个Blazor WebAssembly项目：
dotnet new blazorwasm -o MyFirstBlazorApp
命令执行完成后，进入项目目录并启动项目：
cd MyFirstBlazorApp dotnet run
启动成功后，打开浏览器访问输出的地址，就可以看到默认的Blazor应用页面。
编写交互式组件
接下来我们创建一个简单的计数器组件，实现点击按钮数字递增的交互效果。在项目的Pages目录下新建Counter.razor文件，代码如下：
<h3>计数器示例</h3>
<p>当前计数：@currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">点击增加</button>
@code {
// 定义计数变量
private int currentCount = 0;
// 点击事件对应的方法
private void IncrementCount()
{
currentCount++;
}
}
代码说明：@code块内是C#逻辑代码，定义了currentCount变量和IncrementCount方法；@onclick是Blazor的事件绑定语法，将按钮的点击事件绑定到IncrementCount方法；@currentCount是数据绑定语法，将变量的值渲染到页面上，当变量变化时页面会自动更新。
要让这个组件可以被访问，需要在App.razor或者对应的路由配置中添加路由映射，在App.razor的Router组件内添加以下路由：
<Route @page="/counter" Component="typeof(MyFirstBlazorApp.Pages.Counter)" />
重新启动项目后，访问/counter路径就可以看到计数器组件，点击按钮数字会实时递增，这就是一个最简单的C#交互式Web UI功能。
组件间数据传递
Blazor支持通过参数在组件之间传递数据，比如我们创建一个接收外部参数的提示组件。新建Message.razor组件：
<div class="alert alert-info">
<p>提示内容：@Content</p>
<p>提示级别：@Level</p>
</div>
@code {
// 定义组件参数，[Parameter]特性标记该属性为组件可接收的参数
[Parameter]
public string Content { get; set; }
[Parameter]
public string Level { get; set; } = "普通";
}
在其他组件中使用这个提示组件时，可以传递参数：
<Message Content="这是一条测试提示" Level="重要" />
这样提示组件就会渲染出对应的内容，实现了组件间的通信。
调用后端接口
Blazor应用中也可以很方便地调用后端接口，比如调用一个返回用户列表的接口。首先在组件中注入HttpClient：
@inject HttpClient Http
<h3>用户列表</h3>
<ul>
@if (users == null)
{
<li>加载中...</li>
}
else
{
foreach (var user in users)
{
<li>@user.Name - @user.Email</li>
}
}
</ul>
@code {
private List<User> users;
// 组件初始化时调用接口
protected override async Task OnInitializedAsync()
{
// 调用接口获取用户数据，注意如果接口地址包含ippipp.com需要替换为ipipp.com
users = await Http.GetFromJsonAsync<List<User>>("https://ipipp.com/api/users");
}
// 定义用户实体类
public class User
{
public string Name { get; set; }
public string Email { get; set; }
}
}
如果是Blazor Server模式，需要注意配置HttpClient的服务端地址，避免跨域问题。如果是Blazor WebAssembly模式，需要在Program.cs中配置HttpClient的基础地址。
Blazor的优势与适用场景
Blazor的核心优势在于统一了前后端技术栈，熟悉C#和.NET的开发者不需要学习JavaScript就可以开发Web前端，同时可以复用.NET生态下的各类库，比如Entity Framework、Newtonsoft.Json等。另外，Blazor的类型安全特性可以减少很多运行时错误，提升代码的稳定性。
它适合以下场景：
- 团队已经熟悉.NET技术栈，希望降低前端开发的学习成本
- 需要复用现有.NET业务逻辑到前端场景
- 开发企业内部管理系统、后台系统等对前端生态依赖不高的应用
不过Blazor目前的前端生态相比React、Vue等成熟框架还有一定差距，如果需要使用大量第三方前端组件库，可能需要额外适配，开发者可以根据项目需求选择合适的框架。