Build Shopping Cart with Session in ASP.NET MVC


On the Visual Studio, create new ASP.NET MVC Web Application project

Select Empty Template and Core Reference is MVC

Create new folder named Content. In this folder, create new folder named Images. Copy http://learningprogramming.net/wp-content/uploads/net/asp-net-mvc need show to this folder




In Models folder, create new entities class as below:

Create new class named Product.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace LearnASPNETMVCWithRealApps.Models
{
    public class Product
    {
        public string Id
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }

        public double Price
        {
            get;
            set;
        }

        public string Photo
        {
            get;
            set;
        }

    }
}

Create new class named Item.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace LearnASPNETMVCWithRealApps.Models
{
    public class Item
    {
        public Product Product
        {
            get;
            set;
        }

        public int Quantity
        {
            get;
            set;
        }

    }
}

In Models folder, create new class named ProductModel.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace LearnASPNETMVCWithRealApps.Models
{
    public class ProductModel
    {
        private List<Product> products;

        public ProductModel()
        {
            this.products = new List<Product>() {
                new Product {
                    Id = "p01",
                    Name = "Name 1",
                    Price = 5,
                    Photo = "thumb1.gif"
                },
                new Product {
                    Id = "p02",
                    Name = "Name 2",
                    Price = 2,
                    Photo = "thumb2.gif"
                },
                new Product {
                    Id = "p03",
                    Name = "Name 3",
                    Price = 6,
                    Photo = "thumb3.gif"
                }
            };
        }

        public List<Product> findAll()
        {
            return this.products;
        }

        public Product find(string id)
        {
            return this.products.Single(p => p.Id.Equals(id));
        }

    }
}




In Controllers folder, create new controllers as below:

Create new controller named ProductController.cs as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LearnASPNETMVCWithRealApps.Models;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            ProductModel productModel = new ProductModel();
            ViewBag.products = productModel.findAll();
            return View();
        }
    }
}

Create new controller named CartController.cs use manage Shopping Cart as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using LearnASPNETMVCWithRealApps.Models;

namespace LearnASPNETMVCWithRealApps.Controllers
{
    public class CartController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Buy(string id)
        {
            ProductModel productModel = new ProductModel();
            if (Session["cart"] == null)
            {
                List<Item> cart = new List<Item>();
                cart.Add(new Item { Product = productModel.find(id), Quantity = 1 });
                Session["cart"] = cart;
            }
            else
            {
                List<Item> cart = (List<Item>)Session["cart"];
                int index = isExist(id);
                if (index != -1)
                {
                    cart[index].Quantity++;
                }
                else
                {
                    cart.Add(new Item { Product = productModel.find(id), Quantity = 1 });
                }
                Session["cart"] = cart;
            }
            return RedirectToAction("Index");
        }

        public ActionResult Remove(string id)
        {
            List<Item> cart = (List<Item>)Session["cart"];
            int index = isExist(id);
            cart.RemoveAt(index);
            Session["cart"] = cart;
            return RedirectToAction("Index");
        }

        private int isExist(string id)
        {
            List<Item> cart = (List<Item>)Session["cart"];
            for (int i = 0; i < cart.Count; i++)
                if (cart[i].Product.Id.Equals(id))
                    return i;
            return -1;
        }

    }
}

In Views folder, create new razor views as below:

In Views/Product folder, new razor view named Index.cshtml as below:

@{
    Layout = null;
}
@using LearnASPNETMVCWithRealApps.Models

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>

    <h3>Products List</h3>
    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Photo</th>
            <th>Price</th>
            <th>Buy</th>
        </tr>
        @foreach (Product product in ViewBag.products)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td><img src="~/Content/Images/@product.Photo" width="60" /> </td>
                <td>@product.Price</td>
                <td align="center">
                    <a href="@Url.Action("Buy", "Cart", new { id = product.Id })">Buy Now</a>
                </td>
            </tr>
        }
    </table>

</body>
</html>




In Views/Cart folder, new razor view named Index.cshtml as below:

@{
    Layout = null;
}

@using LearnASPNETMVCWithRealApps.Models;

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Cart</title>
</head>
<body>

    <h3>Cart Page</h3>
    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>Option</th>
            <th>Id</th>
            <th>Name</th>
            <th>Photo</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Sub Total</th>
        </tr>
        @foreach (Item item in (List<Item>)Session["cart"])
        {
            <tr>
                <td><a href="@Url.Action("Remove", "Cart", new { id = item.Product.Id })">Remove</a></td>
                <td>@item.Product.Id</td>
                <td>@item.Product.Name</td>
                <td><img src="~/Content/Images/@item.Product.Photo" width="60" /> </td>
                <td>@item.Product.Price</td>
                <td>@item.Quantity</td>
                <td>@(item.Product.Price * item.Quantity)</td>
            </tr>
        }
        <tr>
            <td align="right" colspan="6">Sum</td>
            <td>
                @{
                    List<Item> cart = (List<Item>)Session["cart"];
                    var total = cart.Sum(item => item.Product.Price * item.Quantity);
                }
                @total
            </td>
        </tr>
    </table>
    <br>
    <a href="@Url.Action("Index", "Product")">Continue Shopping</a>

</body>
</html>

Access Index action in Product controller with following url: http://localhost:49328/Product/Index

Output

Click Buy Now link from product page to buy a product and show it in cart page

I recommend you refer to the books below to learn more about the knowledge in this article: