购物车数据模型设计包含CartItem类和CartService服务：CartItem含ID、名称、单价、数量字段；CartService用List存储并提供增删改查及总价计算，注册为Scoped服务，在组件中注入使用，支持数量合并、实时UI更新。
购物车数据模型设计
先定义一个商品项（CartItem）类，包含 ID、名称、单价、数量等基本字段：
<!-- CartItem.cs -->
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<CartItem> 存储当前商品，提供添加、更新、删除、清空和计算总价的方法。推荐注册为 Scoped 服务，确保同一页面会话内共享状态。
注册并注入购物车服务
在 Program.cs 中添加服务：
// Program.cs
builder.Services.AddScoped<CartService>();
然后在需要显示购物车的组件（如 Cart.razor 或 ProductList.razor）中用 @inject CartService Cart 注入使用。
添加商品到购物车
在商品列表页，每个商品旁放一个“加入购物车”按钮，点击时调用服务方法：
<!-- ProductList.razor -->
@inject CartService Cart
@foreach (var product in products)
{
<div>
@product.Name - ¥@product.Price
<button @onclick="() => Cart.AddItem(new CartItem
{
Id = product.Id,
Name = product.Name,
Price = product.Price
})">加入购物车</button>
</div>
}
注意：如果想支持重复添加同一商品时合并数量，AddItem 方法内部应先查找是否存在相同 ID 的项，有则 Quantity++，否则追加新项。
购物车页面展示与交互
新建 Cart.razor 页面，遍历 Cart.Items 渲染列表，并提供增减数量、删除单个、清空等操作：
- 用
@foreach (var item in Cart.Items)循环渲染每项 - 数量输入框绑定
@bind="item.Quantity"，配合@onchange调用Cart.UpdateQuantity(item.Id, item.Quantity) - “−”按钮调用
Cart.RemoveItem(item.Id)，“×”删除整条 - 底部显示
Cart.TotalPrice（自动计算：sum ofitem.Price * item.Quantity） - 加
@ref="cartState"+Cart.OnChange += StateHasChanged可让界面响应服务变化（或更推荐：在 CartService 中继承 INotifyPropertyChanged，配合@bind自动刷新）
基本上就这些。不复杂但容易忽略的是状态同步时机——Blazor Server 需要确保 UI 在服务变更后及时重绘，建议在 CartService 的所有修改方法末尾调用 NotifyStateChanged() 并在组件中订阅该事件触发 StateHasChanged()。
