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()

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
string转int
string转int

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

483

2023.08.02

php中foreach用法
php中foreach用法

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

76

2025.12.04

string转int
string转int

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

483

2023.08.02

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

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

545

2024.08.29

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

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

113

2025.08.29

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

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

200

2025.08.29

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

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

469

2024.01.03

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

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

17

2025.12.06

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

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

精品课程

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

共28课时 | 3.7万人学习

Sass 教程
Sass 教程

共14课时 | 0.8万人学习

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

共34课时 | 5.2万人学习

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

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