【从实作学习ASP.NET Core】Day24 | 前台 | Session 购物车 (2)

接续昨天的内容，今天要配合 SessionHelper 来完成购物车的主要功能
需要完成购物车的模型、控制器和视图

购物车模型

因为购物车资料只会存在在网站上，所以这边建立的模型不需要在资料库建立资料表

public class OrderItem
{
    public int Id { get; set; }
    public int OrderId { get; set; }
    public int ProductId { get; set; }  //商品ID
    public int Amount { get; set; }     //数量
    public int SubTotal { get; set; }   //小计
}

public class CartItem : OrderItem
{
    public Product Product { get; set; } //商品内容
    public string imageSrc { get; set; } //商品图片
}

购物车控制器

在 Controller资料夹 建立空控制器 CartController.cs
接着需要完成以下购物车的三个主要功能：

• AddtoCart() : 加入购物车
• RemoveItem() : 移除购物车项目
• Index() : 显示购物车页面

AddtoCart 加入购物车

点击加入购物车後会执行的Action

public IActionResult AddtoCart(int id)
{
    //取得商品资料
    CartItem item = new CartItem
    {
        Product = _context.Product.Single(x => x.Id.Equals(id)),
        Amount = 1,
        SubTotal = _context.Product.Single(m => m.Id == id).Price
    };
    
    //判断 Session 内有无购物车
    if (SessionHelper.
        GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart") == null)
    {
        //如果没有已存在购物车: 建立新的购物车
        List<CartItem> cart = new List<CartItem>();
        cart.Add(item);
        SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
    }
    else
    {
        //如果已存在购物车: 检查有无相同的商品，有的话只调整数量
        List<CartItem> cart = SessionHelper.
            GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");

        int index = cart.FindIndex(m => m.Product.Id.Equals(id));
        if (index != -1)
        {
            cart[index].Amount += item.Amount;
            cart[index].SubTotal += item.SubTotal;
        }
        else
        {
            cart.Add(item);
        }
        SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
    }

    return NoContent(); // HttpStatus 204: 请求成功但不更新画面
}

RemoveItem 移除购物车项目

public IActionResult RemoveItem(int id)
{
    //向 Session 取得商品列表
    List<CartItem> cart = SessionHelper.
        GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");
        
    //用FindIndex查询目标在List里的位置
    int index = cart.FindIndex(m => m.Product.Id.Equals(id)); 
    cart.RemoveAt(index);
    
    if(cart.Count < 1)
    {
        SessionHelper.Remove(HttpContext.Session, "cart");
    }
    else
    {
        SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
    }
    
    return RedirectToAction("Index");
}

Index 购物车页面

public IActionResult Index()
{
    //向 Session 取得商品列表
    List<CartItem> CartItems = SessionHelper.
        GetObjectFromJson<List<CartItem>>(HttpContext.Session, "cart");
    
    //计算商品总额
    if(CartItems != null)
    {
        ViewBag.Total = CartItems.Sum(m => m.SubTotal); 
    }
    else
    {
        ViewBag.Total = 0;
    }
    
    return View(CartItems);
}

最後建立前端画面View/Cart/Index.cshtml，随意显示商品的栏位，我们的购物车就大功告成了！