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

这篇具有很好参考价值的文章主要介绍了[回馈]ASP.NET Core MVC开发实战之商城系统(五)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

 

购物车功能说明

 

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

 

购物车功能设计

 

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

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

 

购物车功能开发

 

 

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

 

1. 数据表创建

 

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

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

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

CREATE TABLE [dbo].[EB_Cart](
	[Id] [bigint] IDENTITY(1,1) NOT NULL,
	[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. 购物车实体创建

 

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

using SqlSugar;

namespace EasyBuyShop.Models
{
    /// <summary>
    /// 购物车
    /// </summary>
    [SugarTable("EB_Cart")]
    public class Cart:EntityModel
    {
        public long ProductId { get; set; }

        public long CustomerId { get; set; }

        /// <summary>
        /// 数量
        /// </summary>
        public int Quantity { get; set; }

        public string Remark { get; set; }
    }
}

 

3. 数据处理层DAL

 

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

using EasyBuyShop.Models;
using EasyBuyShop.Utils;

namespace EasyBuyShop.DAL
{
    public class CartDal:BaseDal
    {
        /// <summary>
        /// 获取购物车列表
        /// </summary>
        /// <param name="userId"></param>
        /// <returns></returns>
        public List<Cart> GetCartListByUserId(long userId)
        {
            try
            {
                using (var db = this.GetDb(BaseDal.ConnStr))
                {
                    return db.Queryable<Cart>().Where(r => r.CustomerId == userId).ToList();
                }
            }
            catch (Exception ex)
            {
                LogHelper.Fatal(ex.Message);
                return new List<Cart>();
            }
        }

        public int DeleteById(long id)
        {
            try
            {
                using (var db = this.GetDb(BaseDal.ConnStr))
                {
                    int cnt = db.Deleteable<Cart>(r => r.Id == id).ExecuteCommand();
                    return cnt;
                }
            }
            catch (Exception ex)
            {
                LogHelper.Fatal(ex.Message);
                return -1;
            }
        }

        public Cart GetCart(long id)
        {
            try
            {
                using (var db = this.GetDb(BaseDal.ConnStr))
                {
                    return db.Queryable<Cart>().First(r => r.Id == id);
                }
            }
            catch (Exception ex)
            {
                LogHelper.Fatal(ex.Message);
                return null;
            }
        }
    }
}

 

4. 控制器获取

 

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

using EasyBuyShop.DAL;
using EasyBuyShop.Models;
using Microsoft.AspNetCore.Mvc;

namespace EasyBuyShop.Controllers
{
    /// <summary>
    /// 购物车控制器
    /// </summary>
    public class CartController : Controller
    {
        /// <summary>
        /// 购物车列表页面
        /// </summary>
        /// <returns></returns>
        public IActionResult Index()
        {
            
            var userId = HttpContext.Session.GetInt32("userid");
            if (userId == null)
            {
               return Redirect("/Auth/login");
            }
            var cartDal = new CartDal();
            var productDal = new ProductDal();
            var cartList = cartDal.GetCartListByUserId((long)userId);
            var products = productDal.GetProductListByIds(cartList.Select(r => r.ProductId).ToList());
            ViewData["CartList"] = cartList;
            ViewData["ProductList"]= products;
            var username = HttpContext.Session.GetString("username");
            var realName = HttpContext.Session.GetString("realname");
            ViewData["Username"] = username;
            ViewData["RealName"] = realName;
            return View();
        }

        /// <summary>
        /// 首页或商品列表,快捷加入购物车
        /// </summary>
        /// <param name="productId"></param>
        /// <returns></returns>
        [HttpPost]
        public IActionResult Add(int productId)
        {
            Msg msg = new Msg();
            var userId = HttpContext.Session.GetInt32("userid");
            var userName= HttpContext.Session.GetString("username");
            if (userId == null)
            {
                msg.code = -1;
                msg.message = "尚未登录";
                return Json(msg);
            }
            var productDal = new ProductDal();
            var product = productDal.GetProduct(productId);
            if (product != null)
            {
                var cartDal = new CartDal();
                var cart=new Cart();
                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;
                int id = cartDal.InsertT<Cart>(cart);
                if(id > 0)
                {
                    msg.code = 0;
                    msg.message = "成功";
                    return Json(msg);
                }
                else
                {
                    msg.code = -1;
                    msg.message = "加入购物车失败";
                    return Json(msg);
                }
            }
            else
            {
                msg.code = -1;
                msg.message = "商品不存在";
                return Json(msg);
            }
            
        }

        /// <summary>
        /// 商品详情页面加入购物车
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public IActionResult AddWithForm()
        {
            Msg msg = new Msg();
            var userId = HttpContext.Session.GetInt32("userid");
            var userName = HttpContext.Session.GetString("username");
            if (userId == null)
            {
                msg.code = -1;
                msg.message = "尚未登录";
                return Json(msg);
            }
            var productId =long.Parse( Request.Form["productId"]);
            var quantity = int.Parse(Request.Form["quantity"]);
            var color = Request.Form["color"];
            var size = Request.Form["size"];
            var remark = $"颜色:{color},大小:{size}";
            var productDal = new ProductDal();
            var product = productDal.GetProduct(productId);
            if (product != null)
            {
                var cartDal = new CartDal();
                var cart = new Cart();
                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;
                int id = cartDal.InsertT<Cart>(cart);
                if (id > 0)
                {
                    msg.code = 0;
                    msg.message = "成功";
                }
                else
                {
                    msg.code = -1;
                    msg.message = "加入购物车失败";
                }
            }
            else
            {
                msg.code = -1;
                msg.message = "商品不存在";
            }
            return Redirect("/Cart/Index");

        }

        /// <summary>
        /// 移除购物车
        /// </summary>
        /// <param name="Id"></param>
        /// <returns></returns>
        public ActionResult Delete(int Id)
        {
            var cartDal =new CartDal();
            if(cartDal.DeleteById(Id) > 0)
            {
                //成功
            }
            else
            {
                //删除失败
            }
            return View();
        }
    }
}

 

5. 视图层展示

 

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

@{
    var totalPrice = 0.0M;
}
<div class="content-wrap">
    <div class="content">
        <!-- shopping-cart-area start -->
        <div class="cart-area ptb-100">
            <form action="/Purchase/BuyWithCart" method="post">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                            <div class="table-content table-responsive">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="product-check">选择</th>
                                            <th class="product-price">图片</th>
                                            <th class="product-name">产品名称</th>
                                            <th class="product-price">价格</th>
                                            <th class="product-price">优惠价格</th>
                                            <th class="product-quantity">数量</th>
                                            <th class="product-subtotal">总计</th>
                                            <th class="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>
                                                        <td class="product-check">
                                                            <input type="checkbox" value="@(cart.Id)" name="chkCart" style="width:25px;height:25px;" checked="checked" onchange="javascript:checkCartProduct(this);" />
                                                        </td>
                                                        <td class="product-thumbnail">
                                                            <a href="/Product/Detail/@(product.Id)"><img src="@(product.ImageUrl)" alt="" width="100" height="100"></a>
                                                        </td>
                                                        <td class="product-name">
                                                            <a href="/Product/Detail/@(product.Id)">@product.Name</a>
                                                            <br />
                                                            <span style="font-size:12px; color:lightgray">备注:@(string.IsNullOrEmpty(cart.Remark) ? "无" : cart.Remark)</span>
                                                        </td>
                                                        <td class="product-price"><span class="amount">@(Math.Round(product.Price, 2))</span></td>
                                                        <td class="product-price"><span class="amount">@(Math.Round(product.PreferentialPrice, 2))</span></td>
                                                        <td class="product-quantity">
                                                            <input value="@(cart.Quantity)" type="number">
                                                        </td>
                                                        <td class="product-subtotal">@(Math.Round(product.PreferentialPrice * cart.Quantity, 2))</td>
                                                        <td class="product-remove">
                                                            <a href="/Cart/Delete/@(cart.Id)">
                                                                <i class="fa fa-times"><font style="font-size:14px;">删除</font></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                }
                                            }
                                            else
                                            {
                                                <tr><td colspan="7">购物车暂无商品</td></tr>
                                            }
                                        }
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <div class="row tax-coupon-div">
                        <div class="col-md-7 col-sm-12 col-xs-12">
                        </div>
                        <div class="col-md-5 col-sm-12 col-xs-12">
                            <div class="cart-total">
                                <ul>
                                    <li class="cart-black">总计<span>@totalPrice</span></li>
                                </ul>
                                <div class="cart-total-btn">
                                    <div class="cart-total-btn1 f-left">
                                    </div>
                                    <div class="cart-total-btn2 f-right">
                                        <input type="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 -->
<script src="~/js/shop.js"></script>

 

购物车页面展示

 

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

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

以上就是ASP.NET Core MVC开发实战之商城系统第五部分内容,后续将继续介绍其他模块,敬请期待。文章来源地址https://www.toymoban.com/news/detail-623126.html

到了这里,关于[回馈]ASP.NET Core MVC开发实战之商城系统(五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

    经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】等功能的开发,今天继续讲解 商品列表

    2024年02月15日
    浏览(39)
  • [回馈]ASP.NET Core MVC开发实战之商城系统(六)

    经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情,购物车等功

    2024年02月11日
    浏览(43)
  • [回馈]ASP.NET Core MVC开发实战之商城系统(完:内附源码)

    经过一段时间的准备,【ASP.NET Core MVC开发实战之商城系统】已经完成,目前代码已开发完成,先将全部内容整理分享,如有不足之处,还请指正。     本系列文章主要讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情

    2024年02月11日
    浏览(45)
  • asp.net core 框架搭建2-搭建MVC后台管理系统

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131458964 asp.net core 框架搭建2-搭建MVC后台管理系统 ,本文章介绍asp.net core框架搭建,然后开发一个后台管理系统,将一步步带着大家,实现目标。所有操作过程将展现在本篇文章,下面咋们一起来实现它吧。 使

    2024年02月12日
    浏览(62)
  • ASP.NET Core MVC -- 将视图添加到 ASP.NET Core MVC 应用

    右键单击“视图”文件夹,然后单击“添加”“新文件夹”,并将文件夹命名为“HelloWorld”。 右键单击“Views/HelloWorld”文件夹,然后单击“添加”“新项”。 在“添加新项 - MvcMovie”对话框中: 在右上角的搜索框中,输入“视图” 选择“Razor 视图 - 空” 保持“名称”框的

    2024年02月13日
    浏览(86)
  • ASP.NET Core MVC -- 入门

     带有 ASP.NET 和 Web 开发工作负载的Visual Studio Visual Studio Code Visual Studio Code 用于 Visual Studio Code 的 C#(最新版本) .NET 7.0 SDK  ctrl + F5 (开始执行,不调试) 在代码工作区间文件夹路径下打开终端运行下面的命令  通过运行以下命令来信任 HTTPS 开发证书: 编译运行

    2024年02月11日
    浏览(43)
  • ASP.NET Core 中的 MVC架构

    MVC架构把 App 按照逻辑分成三层: Controllers,接收 http request,配合 model,通过http response 返回 view,尽量不做别的事 Models, 负责业务逻辑,App 的状态,以及数据处理 Views,呈现 UI,如果UI 较复杂,应该使用View 组件, ViewModel, 或者 view 模板 Controller ASP.NET Core MVC 中的所有 Control

    2024年02月09日
    浏览(41)
  • ASP.NET Core MVC -- 控制器

    默认控制器访问index 特定访问路径   特定路径访问,带参数

    2024年02月12日
    浏览(52)
  • 基于ASP.NET MVC开发的、开源的个人博客系统

    推荐一个功能丰富、易于使用和扩展的开源博客,可以轻松地创建和管理自己的博客。 基于.Net Framework 4.5开发的、开源博客系统,具有丰富的功能,包括文章发布、分类、标签、评论、订阅、统计等功能,同时也可以根据需要进行自定义扩展。 提供了丰富的配置选项和API,

    2024年02月14日
    浏览(55)
  • 【ASP.NET Core】MVC过滤器:运行流程

    MVC 的过滤器(Filters)也翻译为“筛选器”。但是老周更喜欢翻译为“过滤器”,意思上更好理解。 既然都叫过滤器了,就是在MVC的操作方法调用前后进行特殊处理的类型。比如: a、此调用是否已授权? b、在模型绑定之前要不要修改数据源?(可能含有儿童不宜的数据)

    2024年02月05日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包