在ASP.NET MVC实现购物车,尝试一种不同于平常的购物车显示方式

通常，我们看到的购物车是这样的：

 

 

虽然这种购物车显示方式被广泛运用，但我个人觉得不够直观。如果换成这样呢？

 

 

本篇的源码放在了：https://github.com/darrenji/ShoppingCartInMVC

 

以上购物车页能实现的效果包括：
1、购物车明细：显示订购数量、总金额，清空购物车。
2、购物车内产品：数量可调整，对应的小计和总计动态变化。点击移除按钮移除该产品。
3、继续购物按钮：点击左下角的继续购物按钮，回到先前页。
4、使用了Bootstrap, 页面元素自适应，页面宽度调小时，页面布局动态变化。
5、每行放置4个产品，且允许高度不一致，第5个产品另起一行，且不会float到上一行的空白区域，如下图。

 

 

首先，有关产品的类。

 

    public class Product

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string ImageUrl { get; set; }

        public string Description { get; set; }

        public decimal Price { get; set; }

    }

 

产品选购页如图：

 

 

以上，产品选购页是一个有关Product集合的强类型视图页，其对应的Model为：

 

    public class ProductsListVm

    {

        public ProductsListVm()

        {

            this.Products = new List<Product>();

        }

        public IEnumerable<Product> Products { get; set; }

    }

 

想像一下，我们在超市购物，在购物车内放着不同的商品对应不同的数量，在这里，可以把商品和数量抽象成一个类：

 

    public class CartLine

    {

        public Product Product { get; set; }

        public int Quantity { get; set; }

    }   

 

而购物车类实际上就是维护着这个CartLine集合，需要提供添加、移除、计算购物车总价、清空购物车等方法，并提供一个获取到CartLine集合的属性，另外，针对点击购物车页上的增量和减量按钮，也要提供相应的方法。

 

    public class Cart

    {

        private List<CartLine> lineCollection = new List<CartLine>();

        //添加

        public void AddItem(Product product, int quantity)

        {

            CartLine line = lineCollection.Where(p => p.Product.Id == product.Id).FirstOrDefault();

            if (line == null)

            {

                lineCollection.Add(new CartLine(){Product = product, Quantity = quantity});

            }

            else

            {

                line.Quantity += quantity;

            }

        }

        //点击数量+号或点击数量-号或自己输入一个值

        public void IncreaseOrDecreaseOne(Product product, int quantity)

        {

            CartLine line = lineCollection.Where(p => p.Product.Id == product.Id).FirstOrDefault();

            if (line != null)

            {

                line.Quantity = quantity;

            }

        }

        //移除

        public void RemoveLine(Product product)

        {

            lineCollection.RemoveAll(p => p.Product.Id == product.Id);

        }

        //计算总价

        public decimal ComputeTotalPrice()

        {

            return lineCollection.Sum(p => p.Product.Price*p.Quantity);

        }

        //清空

        public void Clear()

        {

            lineCollection.Clear();

        }

        //获取

        public IEnumerable<CartLine> Lines