0

0

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

幻夢星雲

幻夢星雲

发布时间:2025-12-16 10:18:10

|

983人浏览过

|

来源于php中文网

原创

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

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

购物车数据模型设计

先定义一个商品项(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.razorProductList.razor)中用 @inject CartService Cart 注入使用。

添加商品到购物车

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

Shoping购物网源码
Shoping购物网源码

该系统采用多层模式开发,这个网站主要展示女装的经营,更易于网站的扩展和后期的维护,同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性,本网站实现了购物车,产品订单管理,产品展示,等等,后台实现了动态权限的管理,客户管理,订单管理以及商品管理等等,前台页面设计精致,后台便于操作等。实现了无限子类的添加,实现了动态权限的管理,支持一下一个人做的辛苦

下载


@inject CartService Cart

@foreach (var product in products)
{
    


        @product.Name - ¥@product.Price
        
    

}

注意:如果想支持重复添加同一商品时合并数量,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 of item.Price * item.Quantity
  • @ref="cartState" + Cart.OnChange += StateHasChanged 可让界面响应服务变化(或更推荐:在 CartService 中继承 INotifyPropertyChanged,配合 @bind 自动刷新)

基本上就这些。不复杂但容易忽略的是状态同步时机——Blazor Server 需要确保 UI 在服务变更后及时重绘,建议在 CartService 的所有修改方法末尾调用 NotifyStateChanged() 并在组件中订阅该事件触发 StateHasChanged()

相关专题

更多
string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

318

2023.08.02

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

44

2025.12.04

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

318

2023.08.02

int占多少字节
int占多少字节

int占4个字节,意味着一个int变量可以存储范围在-2,147,483,648到2,147,483,647之间的整数值,在某些情况下也可能是2个字节或8个字节,int是一种常用的数据类型,用于表示整数,需要根据具体情况选择合适的数据类型,以确保程序的正确性和性能。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

538

2024.08.29

c++怎么把double转成int
c++怎么把double转成int

本专题整合了 c++ double相关教程,阅读专题下面的文章了解更多详细内容。

53

2025.08.29

C++中int的含义
C++中int的含义

本专题整合了C++中int相关内容,阅读专题下面的文章了解更多详细内容。

197

2025.08.29

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

465

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

8

2026.01.20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.2万人学习

Sass 教程
Sass 教程

共14课时 | 0.8万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 5.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号