iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

從實作學習ASP.NET Core - 30天的購物網站系列 第 24

【從實作學習ASP.NET Core】Day24 | 前台 | Session 購物車 (2)

  • 分享至 

  • xImage
  •  

接續昨天的內容,今天要配合 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,隨意顯示商品的欄位,我們的購物車就大功告成了!


上一篇
【從實作學習ASP.NET Core】Day23 | 前台 | Session 購物車 (1)
下一篇
【從實作學習ASP.NET Core】Day25 | 前台 | 結帳流程
系列文
從實作學習ASP.NET Core - 30天的購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言