[回馈]ASP.NET Core MVC开发实战之商城系统(五)

简介: 经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。

经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。

 

购物车功能说明

 

在首页或者商品列表页面,如果用户对商品感兴趣,可以点击快捷方式,将商品加入购物车;或者在商品详情页面,选择对应的商品参数后,将商品加入购物车。商品加入购物车的渠道是有多种,而用户也可以对已经加入购物车的商品进行购买,或者删除购物车。每一个用户都有各自的购物车,相互之间独立,所以购物车功能需要用户先进行登录,才能查看。

 

购物车功能设计

 

根据购物车功能说明,购物车主要显示已添加的商品列表,并可以删除,或者选择商品进行购买,设计页面如下所示:

 

购物车功能开发

 

 

购物车主要展示用户选择的商品信息。

 

1. 数据表创建

 

购物车表EB_Cart主要用于存储商品信息,用户信息,数量,及个人喜好等内容,如下所示:

购物车表创建语句如下所示:

CREATETABLE[dbo].[EB_Cart]([Id][bigint] IDENTITY(1,1)NOTNULL,[ProductId][bigint]NULL,[CustomerId][bigint]NULL,[Quantity][int]NULL,[Remark][varchar](200)NULL,[CreateTime][datetime]NULL,[CreateUser][varchar](50)NULL,[LastEditTime][datetime]NULL,[LastEditUser][varchar](50)NULL)ON[PRIMARY]

 

2. 购物车实体创建

 

购物车实体和数据表结构保持一致,方便进行映射。如下所示:

usingSqlSugar;
namespaceEasyBuyShop.Models{
/// <summary>/// 购物车/// </summary>    [SugarTable("EB_Cart")]
publicclassCart:EntityModel    {
publiclongProductId { get; set; }
publiclongCustomerId { get; set; }
/// <summary>/// 数量/// </summary>publicintQuantity { get; set; }
publicstringRemark { get; set; }
    }
}

 

3. 数据处理层DAL

 

购物车列表,主要包括添加购物车,删除,查询等功能,DAL层代码如下所示:

usingEasyBuyShop.Models;
usingEasyBuyShop.Utils;
namespaceEasyBuyShop.DAL{
publicclassCartDal:BaseDal    {
/// <summary>/// 获取购物车列表/// </summary>/// <param name="userId"></param>/// <returns></returns>publicList<Cart>GetCartListByUserId(longuserId)
        {
try            {
using (vardb=this.GetDb(BaseDal.ConnStr))
                {
returndb.Queryable<Cart>().Where(r=>r.CustomerId==userId).ToList();
                }
            }
catch (Exceptionex)
            {
LogHelper.Fatal(ex.Message);
returnnewList<Cart>();
            }
        }
publicintDeleteById(longid)
        {
try            {
using (vardb=this.GetDb(BaseDal.ConnStr))
                {
intcnt=db.Deleteable<Cart>(r=>r.Id==id).ExecuteCommand();
returncnt;
                }
            }
catch (Exceptionex)
            {
LogHelper.Fatal(ex.Message);
return-1;
            }
        }
publicCartGetCart(longid)
        {
try            {
using (vardb=this.GetDb(BaseDal.ConnStr))
                {
returndb.Queryable<Cart>().First(r=>r.Id==id);
                }
            }
catch (Exceptionex)
            {
LogHelper.Fatal(ex.Message);
returnnull;
            }
        }
    }
}

 

4. 控制器获取

 

控制器方法主要包括添加购物车【1.首页或商品列表快捷添加购物车 2.商品详情页面添加购物车】,查询购物车, 删除购物车,代码如下所示:

usingEasyBuyShop.DAL;
usingEasyBuyShop.Models;
usingMicrosoft.AspNetCore.Mvc;
namespaceEasyBuyShop.Controllers{
/// <summary>/// 购物车控制器/// </summary>publicclassCartController : Controller    {
/// <summary>/// 购物车列表页面/// </summary>/// <returns></returns>publicIActionResultIndex()
        {
varuserId=HttpContext.Session.GetInt32("userid");
if (userId==null)
            {
returnRedirect("/Auth/login");
            }
varcartDal=newCartDal();
varproductDal=newProductDal();
varcartList=cartDal.GetCartListByUserId((long)userId);
varproducts=productDal.GetProductListByIds(cartList.Select(r=>r.ProductId).ToList());
ViewData["CartList"] =cartList;
ViewData["ProductList"]=products;
varusername=HttpContext.Session.GetString("username");
varrealName=HttpContext.Session.GetString("realname");
ViewData["Username"] =username;
ViewData["RealName"] =realName;
returnView();
        }
/// <summary>/// 首页或商品列表,快捷加入购物车/// </summary>/// <param name="productId"></param>/// <returns></returns>        [HttpPost]
publicIActionResultAdd(intproductId)
        {
Msgmsg=newMsg();
varuserId=HttpContext.Session.GetInt32("userid");
varuserName=HttpContext.Session.GetString("username");
if (userId==null)
            {
msg.code=-1;
msg.message="尚未登录";
returnJson(msg);
            }
varproductDal=newProductDal();
varproduct=productDal.GetProduct(productId);
if (product!=null)
            {
varcartDal=newCartDal();
varcart=newCart();
cart.ProductId=productId;
cart.CustomerId=userId.Value;
cart.Quantity=1;
cart.Remark=string.Empty;
cart.CreateUser=userName;
cart.CreateTime=DateTime.Now;
cart.LastEditUser=userName;
cart.LastEditTime=DateTime.Now;
intid=cartDal.InsertT<Cart>(cart);
if(id>0)
                {
msg.code=0;
msg.message="成功";
returnJson(msg);
                }
else                {
msg.code=-1;
msg.message="加入购物车失败";
returnJson(msg);
                }
            }
else            {
msg.code=-1;
msg.message="商品不存在";
returnJson(msg);
            }
        }
/// <summary>/// 商品详情页面加入购物车/// </summary>/// <returns></returns>        [HttpPost]
publicIActionResultAddWithForm()
        {
Msgmsg=newMsg();
varuserId=HttpContext.Session.GetInt32("userid");
varuserName=HttpContext.Session.GetString("username");
if (userId==null)
            {
msg.code=-1;
msg.message="尚未登录";
returnJson(msg);
            }
varproductId=long.Parse( Request.Form["productId"]);
varquantity=int.Parse(Request.Form["quantity"]);
varcolor=Request.Form["color"];
varsize=Request.Form["size"];
varremark=$"颜色:{color},大小:{size}";
varproductDal=newProductDal();
varproduct=productDal.GetProduct(productId);
if (product!=null)
            {
varcartDal=newCartDal();
varcart=newCart();
cart.ProductId=productId;
cart.CustomerId=userId.Value;
cart.Quantity=quantity;
cart.Remark=remark;
cart.CreateUser=userName;
cart.CreateTime=DateTime.Now;
cart.LastEditUser=userName;
cart.LastEditTime=DateTime.Now;
intid=cartDal.InsertT<Cart>(cart);
if (id>0)
                {
msg.code=0;
msg.message="成功";
                }
else                {
msg.code=-1;
msg.message="加入购物车失败";
                }
            }
else            {
msg.code=-1;
msg.message="商品不存在";
            }
returnRedirect("/Cart/Index");
        }
/// <summary>/// 移除购物车/// </summary>/// <param name="Id"></param>/// <returns></returns>publicActionResultDelete(intId)
        {
varcartDal=newCartDal();
if(cartDal.DeleteById(Id) >0)
            {
//成功            }
else            {
//删除失败            }
returnView();
        }
    }
}

 

5. 视图层展示

 

在Views/Cart/Index.cshtml购物车视图中,接收控制器传递的参数。如下所示:

@{
    var totalPrice = 0.0M;
}
<divclass="content-wrap"><divclass="content"><!-- shopping-cart-area start --><divclass="cart-area ptb-100"><formaction="/Purchase/BuyWithCart"method="post"><divclass="container"><divclass="row"><divclass="col-lg-12 col-md-12 col-sm-12 col-xs-12"><divclass="table-content table-responsive"><table><thead><tr><thclass="product-check">选择</th><thclass="product-price">图片</th><thclass="product-name">产品名称</th><thclass="product-price">价格</th><thclass="product-price">优惠价格</th><thclass="product-quantity">数量</th><thclass="product-subtotal">总计</th><thclass="product-name">删除</th></tr></thead><tbody>                                        @{
                                            var cartList = ViewData["CartList"] as List<Cart>;
                                            var productList = ViewData["ProductList"] as List<Product>;
                                            if (cartList.Count > 0)
                                            {
                                                foreach (var cart in cartList)
                                                {
                                                    var product = productList.FirstOrDefault(r => r.Id == cart.ProductId);
                                                    totalPrice = totalPrice + (product.PreferentialPrice * cart.Quantity);
<tr><tdclass="product-check"><inputtype="checkbox"value="@(cart.Id)"name="chkCart"style="width:25px;height:25px;"checked="checked"onchange="javascript:checkCartProduct(this);"/></td><tdclass="product-thumbnail"><ahref="/Product/Detail/@(product.Id)"><imgsrc="@(product.ImageUrl)"alt=""width="100"height="100"></a></td><tdclass="product-name"><ahref="/Product/Detail/@(product.Id)">@product.Name</a><br/><spanstyle="font-size:12px; color:lightgray">备注:@(string.IsNullOrEmpty(cart.Remark) ? "无" : cart.Remark)</span></td><tdclass="product-price"><spanclass="amount">@(Math.Round(product.Price, 2))</span></td><tdclass="product-price"><spanclass="amount">@(Math.Round(product.PreferentialPrice, 2))</span></td><tdclass="product-quantity"><inputvalue="@(cart.Quantity)"type="number"></td><tdclass="product-subtotal">@(Math.Round(product.PreferentialPrice * cart.Quantity, 2))</td><tdclass="product-remove"><ahref="/Cart/Delete/@(cart.Id)"><iclass="fa fa-times"><fontstyle="font-size:14px;">删除</font></i></a></td></tr>                                                }
                                            }
                                            else
                                            {
<tr><tdcolspan="7">购物车暂无商品</td></tr>                                            }
                                        }
</tbody></table></div></div></div><divclass="row tax-coupon-div"><divclass="col-md-7 col-sm-12 col-xs-12"></div><divclass="col-md-5 col-sm-12 col-xs-12"><divclass="cart-total"><ul><liclass="cart-black">总计<span>@totalPrice</span></li></ul><divclass="cart-total-btn"><divclass="cart-total-btn1 f-left"></div><divclass="cart-total-btn2 f-right"><inputtype="submit"value="购买"class="go-btn"onclick="javascript:return checkSubmit();"style="background-color: rgb(255, 80, 0);border-width:0px;margin-top:5px;"/></div></div></div></div></div></div></form></div><!-- shopping-cart-area end --></div><!-- content end --></div><!-- content-wrap end --><scriptsrc="~/js/shop.js"></script>

 

购物车页面展示

 

运行程序,点击登录,在登录成功后,在右上角个人名称,点击下拉菜单,选择购物车,然后打开购物车页面,如下所示:

以上就是ASP.NET Core MVC开发实战之商城系统第五部分内容,后续将继续介绍其他模块,敬请期待。


相关文章
|
6天前
|
消息中间件 前端开发 小程序
一个基于.NET Core构建的简单、跨平台、模块化的商城系统
今天大姚给大家分享一个基于.NET Core构建的简单、跨平台、模块化、完全开源免费(MIT License)的商城系统:Module Shop。
|
6天前
|
算法 C# 数据库
【干货】一份10万字免费的C#/.NET/.NET Core面试宝典
C#/.NET/.NET Core相关技术常见面试题汇总,不仅仅为了面试而学习,更多的是查漏补缺、扩充知识面和大家共同学习进步。该知识库主要由自己平时学习实践总结、网上优秀文章资料收集(这一部分会标注来源)和社区小伙伴提供三部分组成。该份基础面试宝典完全免费,发布两年来收获了广大.NET小伙伴的好评,我会持续更新和改进,欢迎关注我的公众号【追逐时光者】第一时间获取最新更新的面试题内容。
|
6天前
|
数据可视化 网络协议 C#
C#/.NET/.NET Core优秀项目和框架2024年3月简报
公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍、功能特点、使用方式以及部分功能截图等(打不开或者打开GitHub很慢的同学可以优先查看公众号推文,文末一定会附带项目和框架源码地址)。注意:排名不分先后,都是十分优秀的开源项目和框架,每周定期更新分享(欢迎关注公众号:追逐时光者,第一时间获取每周精选分享资讯🔔)。
|
6天前
|
开发框架 .NET 中间件
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
|
6天前
|
安全 数据管理 中间件
云LIS系统源码JavaScript+B/S架构MVC+SQLSugar医院版检验科云LIS系统源码 可提供演示
检验科云LIS系统源码是医疗机构信息化发展的重要趋势。通过云计算技术实现数据的集中管理和共享可以提高数据利用效率和安全性;通过高效灵活的系统设计和可扩展性可以满足不同医疗机构的需求;通过移动性和智能化可以提高医疗服务的精准度和效率;通过集成性可以实现医疗服务的协同性和效率。因此,多医院版检验科云LIS系统源码将成为未来医疗机构信息化发展的重要方向之一。
27 2
|
6天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0
|
6天前
|
Linux API iOS开发
.net core 优势
.NET Core 的优势:跨平台兼容(Windows, macOS, Linux)及容器支持,高性能,支持并行版本控制,丰富的新增API,以及开源。
29 4
|
6天前
|
开发框架 人工智能 .NET
C#/.NET/.NET Core拾遗补漏合集(持续更新)
在这个快速发展的技术世界中,时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节,以帮助大家更全面地了解这些技术栈的特性和发展方向。
|
6天前
|
开发框架 中间件 .NET
C# .NET面试系列七:ASP.NET Core
## 第一部分:ASP.NET Core #### 1. 如何在 controller 中注入 service? 在.NET中,在ASP.NET Core应用程序中的Controller中注入服务通常使用<u>依赖注入(Dependency Injection)</u>来实现。以下是一些步骤,说明如何在Controller中注入服务: 1、创建服务 首先,确保你已经在应用程序中注册了服务。这通常在Startup.cs文件的ConfigureServices方法中完成。例如: ```c# services.AddScoped<IMyService, MyService>(); //
101 0
|
7月前
|
开发框架 前端开发 .NET
ASP.NET Core 核心特性学习笔记「下」
ASP.NET Core 核心特性学习笔记「下」

热门文章

最新文章