使用Ajax將商品加入購物車 | 首都客運時刻表查詢網
![使用Ajax將商品加入購物車](https://i.imgur.com/2oxSoeJ.png)
NETMVC實作購物網站(二十一)-使用Ajax將商品加入購物車.使用ASP.NETMVC實作購物網站系列第21篇.買大.7年前‧11477瀏覽.0.商品頁面加入購物車功能.
![使用Ajax將商品加入購物車](https://i.imgur.com/2oxSoeJ.png)
商品頁面加入購物車功能
上一篇我們實裝了購物車頁面,已經可以使用訪問Url的方式將某個編號的商品加入購物車,但是還無法在商品頁面直接點選[加入購物車]來將商品直接加入,所以我們只差最後一步驟囉。
今日目標: * 商品頁面加入購物車功能,使用Ajax來完成
1. 因為我們需要在商品頁面加入購物車,最重要的是加入後不能離開目前的商品瀏覽頁面,所以我們需要Ajax來幫我們完成。
開啟Layout頁面[View/Share/_Layout.cshtml],在HTML的head區段中新增一段JavaScript(行14~34),主要為AddToCart()方法,此方法將傳入的productid丟給CartControoler中的AddToCart()方法 (此方法可參考上一篇) ,並且將回傳的購物車頁面更新至id為Cart的li元素裡,此元素定義在行57至行59中。
2. 開啟商品頁面(網站首頁)[View/Home/Index],將原本的加入購物車連接改為點選時,執行JavaScript中的AddToCart()方法,並且將目前的商品編號傳入 (行31~33)。
3. 開啟購物車頁面[View/Share/_CartPartial.cshtml],我們新增一段判斷,如果目前購物車內商品數量大於零才顯示商品資訊(行10~19),否則顯示 購物車內無任何商品 的提示。
4. 運行專案,由於Session初始化,故一開始購物車內是無任何商品的,此時確認步驟3的修改提示有正常運行。
5. 將範例中第一件商品點選[加入購物車]按鈕,則購物車頁面會刷新並顯示此筆商品。
6. 此時在第二種商品點選[加入購物...