我用最简单、最实用、你直接能复制的方式教会你：
Blazor Web 前端 如何用 C# 做数据交互（调用 API / 读数据库 / 传参）
我不讲废话，直接给你 3 种最常用的用法，你照着抄就能用！
一、Blazor 前端调用你的 .NET 8 API（最常用 ✅）
1. 先在 Program.cs 注入 HttpClient
csharp
运行
builder.Services.AddScoped(sp => new HttpClient
{
BaseAddress = new Uri("http://192.168.1.100:8081/")
});2. 在页面用 C# 调用 API（直接复制）
razor
@page "/"
@inject HttpClient Http <!-- 注入 -->
<h3>用户列表</h3>
@if (users == null)
{
<p>加载中...</p>
}
else
{
@foreach (var user in users)
{
<div>@user.Name</div>
}
}
@code {
List<UserDto> users;
// 页面加载时执行 C# 方法
protected override async Task OnInitializedAsync()
{
// 🔥 C# 调用 API，完全不用 JS！
users = await Http.GetFromJsonAsync<List<UserDto>>("api/user/getlist");
}
// 模型类
public class UserDto
{
public int Id { get; set; }
public string Name { get; set; }
}
}✅ 全部是 C# ✅ 没有一行 JavaScript ✅ 和你写后端逻辑一模一样
二、点击按钮用 C# 提交数据（新增 / 修改）
razor
<input @bind="model.Name" />
<button @onclick="Submit">提交</button>
@code {
UserDto model = new();
async Task Submit()
{
// C# 发送 POST 请求
await Http.PostAsJsonAsync("api/user/add", model);
// 提示
Console.WriteLine("添加成功！");
}
}三、直接在 Blazor 里读数据库（不通过 API）
如果你想Blazor 直接读 SQL，不用写 API：
1. 注入 DB 上下文
csharp
运行
builder.Services.AddDbContext<AppDbContext>(options =>
options.UseSqlServer("你的连接字符串"));2. 页面直接查询
razor
@inject AppDbContext db
@code {
List<User> users;
protected override async Task OnInitializedAsync()
{
// 直接 C# 查数据库
users = await db.Users.ToListAsync();
}
}🎯 核心总结（你一定要记住）
Blazor 前端交互 = C#
- 读数据：
GetFromJsonAsync - 提交：
PostAsJsonAsync - 加载：
OnInitializedAsync - 点击：
@onclick
全部是 C#，不用 JS，不用 Vue，不用接口繁琐调用！