iT邦幫忙

2022 iThome 鐵人賽

DAY 19
1
Software Development

C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式系列 第 19

(DAY 19)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(七)

  • 分享至 

  • xImage
  •  

今天來完成加入與刪除購物車以及送出訂單的部分,那麼就來吧!

● Member/AddCar

在寫AddCar()動作方法前,我們回顧一下在Home/Index的View裡面,「加入購物車」的連結是如何寫的:

 <a href="@Url.Action("AddCar","Member")?ProductId=@item.ProductId" class="btn btn-primary">加入購物車</a>

可以看到,加入產品到購物車時會攜帶一個ProductId參數,因此AddCar()寫法應該會像這樣:

        public ActionResult AddCar(string ProductId)
        {
            ......
        }

此外,在加入產品至購物車時,要考量的是購物車是否已經有同樣產品,如果沒有的話須新增全新一筆訂單明細資料,有的話只需要增加數量即可。完整Code如下:

        public ActionResult AddCar(string ProductId)
        {
            //取得目前通過驗證的使用者名稱
            string userId = User.Identity.Name;

            //取得該使用者目前購物車內是否已有此商品,且尚未形成訂單的資料
            var currentCar = db.table_OrderDetail
                .Where(m => m.ProductId == ProductId && m.IsApproved == "否" && m.UserId == userId).FirstOrDefault();
            if (currentCar == null)
            {
                //如果篩選條件資料為null,代表要新增全新一筆訂單明細資料
                //將產品資料欄位一一對照至訂單明細的欄位
                var product = db.table_Product.Where(m => m.ProductId == ProductId).FirstOrDefault();
                var orderDetail = new table_OrderDetail();
                orderDetail.UserId = userId;
                orderDetail.ProductId = product.ProductId;
                orderDetail.Name = product.Name;
                orderDetail.Price = product.Price;
                orderDetail.Quantity = 1;
                orderDetail.IsApproved = "否";
                db.table_OrderDetail.Add(orderDetail);
            }
            else
            {
                //如果購物車已有此商品,僅需將數量加1
                currentCar.Quantity++;
            }

            //儲存資料庫並導至購物車檢視頁面
            db.SaveChanges();
            return RedirectToAction("ShoppingCar");
        }

完成後可以試看看加入購物車按鈕功能是否正確運作,隨意加入商品至購物車後,呈現畫面如下:

● Member/DeleteCar

同樣在寫DeleteCar()動作方法前,我們回顧一下在Member/ShoppingCar的View裡面,「刪除購物車」的連結是如何寫的:

攜帶的參數是Id,此為產生購物車訂單明細時會自動編的流水號。另外要刪除資料用的是Remove()方法,所以撰寫Code如下:

        public ActionResult DeleteCar(int Id)
        {
            var orderDetails = db.table_OrderDetail.Where(m => m.Id == Id).FirstOrDefault();

            db.table_OrderDetail.Remove(orderDetails);
            db.SaveChanges();
            return RedirectToAction("ShoppingCar");
        }

完成後可以確認刪除購物車功能是否正常,在加入產品至購物車後,按刪除購物車會跳出提示視窗,按下確定後即刪除。

● Member/ShoppingCar (POST)

今天最後來完成送出訂單的部分,流程是在所有商品加入購物車完畢後,須先填寫訂單收件人資料,然後按下「確認訂購」就可以形成訂單。首先回憶一下昨天撰寫關於訂單收件人資料表單的View Code:

<form action="@Url.Action("ShoppingCar")" method="post">
    <div class="form-horizontal">
        <h4>填寫訂單收件人資料</h4>
        <hr />

        <div class="form-group">
            <span class="control-label col-md-2">收件人姓名</span>
            <div class="col-md-10">
                <input type="text" id="Receiver" name="Receiver" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人信箱</span>
            <div class="col-md-10">
                <input type="email" id="Email" name="Email" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">收件人地址</span>
            <div class="col-md-10">
                <input type="text" id="Address" name="Address" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="確認訂購" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

為了對應View的form表單,這邊我們撰寫ShoppingCar()的POST方法,表單送出後,需將此筆訂單加入至訂單資料表table_Order
另外,也需一併更新訂單明細資料表table_OrderDetail內容,這裡需更新的是OrderGuid(訂單編號)與IsApproved(是否形成訂單)欄位。
所以在MemberController內加入Code如下:

        [HttpPost]
        public ActionResult ShoppingCar(string Receiver, string Email, string Address)
        {
            string userId = User.Identity.Name;
            string guid = Guid.NewGuid().ToString(); //產生隨機訂單編號

            //加入訂單至 table_Order 資料表
            var order = new table_Order();
            order.OrderGuid = guid;
            order.UserId = userId;
            order.Receiver = Receiver;
            order.Email = Email;
            order.Address = Address;
            order.Date = DateTime.Now;
            db.table_Order.Add(order);

            //訂單加入後,需一併更新訂單明細內容
            var carList = db.table_OrderDetail.Where(m => m.IsApproved == "否" && m.UserId == userId).ToList();
            foreach (var item in carList)
            {
                item.OrderGuid = guid;
                item.IsApproved = "是";
            }
            db.SaveChanges();
            return RedirectToAction("OrderList");
        }

● 小結

上述完成後,因為還沒有寫OrderList()的方法,所以送出表單後會顯示錯誤,我們明天再來將最後的部分完成,明天見啦~


上一篇
(DAY 18)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(六)
下一篇
(DAY 20)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立購物中心網站實際範例(八)
系列文
C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言