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<appdbcontext>()</appdbcontext>) 在 Razor 组件中注入
[Inject] IDbContextFactory<appdbcontext> DbFactory { get; set; }</appdbcontext>
在方法中使用上下文操作数据库(注意:需 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) { <p>加载中...</p> })
前端页面:用 EditForm + Input 组件实现表单交互
Blazor 提供了开箱即用的表单绑定能力:
用<editform model="@product" onvalidsubmit="HandleSubmit"></editform>包裹表单 用
<inputtext></inputtext>等双向绑定字段 提交时根据 ID 判断新增或编辑(ID == 0 → 新增;否则 PUT) 删除用普通按钮触发异步方法:
@onclick="() => DeleteProduct(product.Id)"列表用
@foreach (var p in products)渲染,配合
StateHasChanged()刷新(WASM 下通常自动)
基本上就这些。核心不是“Blazor 连数据库”,而是“Blazor 配合后端服务完成 CRUD”。选对架构(Server 直连 or WASM 调 API),写好接口契约,再用 Blazor 的响应式 UI 把流程串起来——不复杂但容易忽略前后端职责边界。
