經(jīng)過一段時間的準備，新的一期【ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)】已經(jīng)開始，在之前的文章中，講解了商城系統(tǒng)的整體功能設(shè)計，頁面布局設(shè)計，環(huán)境搭建，系統(tǒng)配置，及首頁【商品類型，banner條，友情鏈接，降價促銷，新品爆款】，商品列表頁面，商品詳情等功能的開發(fā)，今天繼續(xù)講解購物車功能開發(fā)，僅供學習分享使用，如有不足之處，還請指正。

?

購物車功能說明

?

在首頁或者商品列表頁面，如果用戶對商品感興趣，可以點擊快捷方式，將商品加入購物車；或者在商品詳情頁面，選擇對應(yīng)的商品參數(shù)后，將商品加入購物車。商品加入購物車的渠道是有多種，而用戶也可以對已經(jīng)加入購物車的商品進行購買，或者刪除購物車。每一個用戶都有各自的購物車，相互之間獨立，所以購物車功能需要用戶先進行登錄，才能查看。

?

購物車功能設(shè)計

?

根據(jù)購物車功能說明，購物車主要顯示已添加的商品列表，并可以刪除，或者選擇商品進行購買，設(shè)計頁面如下所示：

?

購物車功能開發(fā)

?

?

購物車主要展示用戶選擇的商品信息。

?

1. 數(shù)據(jù)表創(chuàng)建

?

購物車表EB_Cart主要用于存儲商品信息，用戶信息，數(shù)量，及個人喜好等內(nèi)容，如下所示：

購物車表創(chuàng)建語句如下所示：

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. 購物車實體創(chuàng)建

?

購物車實體和數(shù)據(jù)表結(jié)構(gòu)保持一致，方便進行映射。如下所示：

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>
        /// 數(shù)量
        /// </summary>
        public int Quantity { get; set; }

        public string Remark { get; set; }
    }
}

?

3. 數(shù)據(jù)處理層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購物車視圖中，接收控制器傳遞的參數(shù)。如下所示：

@{
    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">產(chǎn)品名稱</th>
                                            <th class="product-price">價格</th>
                                            <th class="product-price">優(yōu)惠價格</th>
                                            <th class="product-quantity">數(shù)量</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開發(fā)實戰(zhàn)之商城系統(tǒng)第五部分內(nèi)容，后續(xù)將繼續(xù)介紹其他模塊，敬請期待。文章來源地址http://www.zghlxwxcb.cn/news/detail-623126.html

到了這里，關(guān)于[回饋]ASP.NET Core MVC開發(fā)實戰(zhàn)之商城系統(tǒng)(五)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！