Blazor 连接数据库实现增删改查教程

Blazor本身不能直接连接数据库，必须通过后端API（如ASP.NET Core Web API）实现CRUD；Blazor Server可直连DbContext，WebAssembly则需调用API并处理跨域、认证等。

Blazor 本身是前端框架，不能直接连接数据库，必须通过后端 API（如 ASP.NET Core Web API）来完成数据操作。下面以 Blazor Server 或 Blazor WebAssembly（调用 API） 两种常见场景为例，给出简洁、可落地的增删改查（CRUD）实现步骤。

准备后端 API（ASP.NET Core Web API）

这是 Blazor 操作数据库的核心依赖。你需要一个标准的 RESTful 接口：

• 创建 ASP.NET Core Web API 项目（.NET 6/7/8+）
• 添加 Entity Framework Core（如 SQL Server 或 SQLite）
• 定义模型（例如 Product）、DbContext 和 Repository（可选）
• 在 Controller 中暴露 5 个基础接口：
  GET /api/products（查全部）
  GET /api/products/{id}（查单个）
  POST /api/products（新增）
  PUT /api/products/{id}（更新）
  DELETE /api/products/{id}（删除）

Blazor Server：直接引用服务并调用 DbContext（简单快捷）

适合内部管理后台等信任环境。无需跨域，代码复用度高：

• 在 Program.cs 中注册 DbContext 和服务（如 AddDbContextFactory()）
• 在 Razor 组件中注入 [Inject] IDbContextFactory DbFactory { get; set; }
• 在方法中使用上下文操作数据库（注意：需 await using）
• 示例新增：

var context = await DbFactory.CreateDbContextAsync();
context.Products.Add(new Product { Name = "鼠标", Price = 99 });
await context.SaveChangesAsync();

Blazor WebAssembly：调用 Web API（推荐生产环境）

前端完全隔离，更安全，符合现代架构。关键点如下：

• 在 Program.cs 注册 HttpClient：
  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
• 创建数据访问服务（如 ProductService），封装所有 API 调用逻辑
• 组件中注入该服务，用 await 调用方法（如 await productService.GetProducts()）
• 注意处理跨域（开发时在 API 项目启用 CORS）、JWT 认证（如有）和加载状态（@if (loading) {

  加载中...

  }）

前端页面：用 EditForm + Input 组件实现表单交互

Blazor 提供了开箱即用的表单绑定能力：

• 用 包裹表单
• 用 等双向绑定字段
• 提交时根据 ID 判断新增或编辑（ID == 0 → 新增；否则 PUT）
• 删除用普通按钮触发异步方法：@onclick="() => DeleteProduct(product.Id)"
• 列表用 @foreach (var p in products) 渲染，配合 StateHasChanged() 刷新（WASM 下通常自动）

基本上就这些。核心不是“Blazor 连数据库”，而是“Blazor 配合后端服务完成 CRUD”。选对架构（Server 直连 or WASM 调 API），写好接口契约，再用 Blazor 的响应式 UI 把流程串起来——不复杂但容易忽略前后端职责边界。