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

来源:这里教程网 时间:2026-02-21 17:36:06 作者:

Blazor 本身是前端框架,不能直接连接数据库,必须通过后端 API(如 ASP.NET Core Web API)来完成数据操作。下面以 Blazor ServerBlazor 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 把流程串起来——不复杂但容易忽略前后端职责边界。

相关推荐