Blazor 怎么实现一个简单的购物车

购物车数据模型设计包含CartItem类和CartService服务：CartItem含ID、名称、单价、数量字段；CartService用List存储并提供增删改查及总价计算，注册为Scoped服务，在组件中注入使用，支持数量合并、实时UI更新。

购物车数据模型设计

先定义一个商品项（CartItem）类，包含 ID、名称、单价、数量等基本字段：

public class CartItem
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public decimal Price { get; set; }
    public int Quantity { get; set; } = 1;
}

再建一个购物车服务（CartService），用 List 存储当前商品，提供添加、更新、删除、清空和计算总价的方法。推荐注册为 Scoped 服务，确保同一页面会话内共享状态。

注册并注入购物车服务

在 Program.cs 中添加服务：

// Program.cs
builder.Services.AddScoped();

然后在需要显示购物车的组件（如 Cart.razor 或 ProductList.razor）中用 @inject CartService Cart 注入使用。

添加商品到购物车

在商品列表页，每个商品旁放一个“加入购物车”按钮，点击时调用服务方法：

标签： 重绘