Build Shopping Cart with Session in ASP.NET Core Razor Pages

Create ASP.NET Core Razor Pages Project

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

Select Empty Template

Click Ok button to Finish

wwwroot Folder

Create new folder named wwwroot

Image Files

Create new folder named images in wwwroot folder. Copy images need to use in project to images folder.

Configurations

Open Startup.cs file and add new configurations as below:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace LearnASPNETCoreRazorPagesWithRealApps
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSession();

            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();

            app.UseSession();

            app.UseMvc();
        }
    }
}

Create Razor View Imports

Select Views folder and right click to select Add\New Item Menu

Select Web\ASP.NET in left side. Select Razor View Imports item and click Add button to Finish

In _ViewImports.cshtml file and TagHelpers library as below:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Entities Class

Create new folder named Entities. In Entities folder, create new entities class as below:

Product Entity

Create new class named Product.cs as below:

namespace LearnASPNETCoreRazorPagesWithRealApps.Entities
{
    public class Product
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Photo { get; set; }
        public double Price { get; set; }
    }
}

Item Entity

Create new class named Item.cs as below:

namespace LearnASPNETCoreRazorPagesWithRealApps.Entities
{
    public class Item
    {
        public Product Product { get; set; }

        public int Quantity { get; set; }
    }
}

Models Class

Create new folder named Models. In Models folder, create new models class as below:

Product Model

Create new class named ProductModel.cs as below:

using LearnASPNETCoreRazorPagesWithRealApps.Entities;
using System.Collections.Generic;
using System.Linq;

namespace LearnASPNETCoreRazorPagesWithRealApps.Models
{
    public class ProductModel
    {
        private List<Product> Products;

        public ProductModel()
        {
            Products = new List<Product>() {
                new Product
                {
                    Id = "p01",
                    Name = "name 1",
                    Price = 4,
                    Photo = "thumb1.gif"
                },
                new Product
                {
                    Id = "p02",
                    Name = "name 2",
                    Price = 2,
                    Photo = "thumb2.gif"
                },
                new Product
                {
                    Id = "p03",
                    Name = "name 3",
                    Price = 8,
                    Photo = "thumb3.gif"
                }
            };
        }

        public List<Product> findAll()
        {
            return Products;
        }

        public Product find(string id)
        {
            return Products.Where(p => p.Id == id).FirstOrDefault();
        }

    }
}

Create Session Helper

Create new folder named Helpers. In this folder, create new helper named SessionHelper.cs as below:

using Microsoft.AspNetCore.Http;
using Newtonsoft.Json;

namespace LearnASPNETCoreRazorPagesWithRealApps.Helpers
{
    public static class SessionHelper
    {
        public static void SetObjectAsJson(this ISession session, string key, object value)
        {
            session.SetString(key, JsonConvert.SerializeObject(value));
        }

        public static T GetObjectFromJson<T>(this ISession session, string key)
        {
            var value = session.GetString(key);
            return value == null ? default(T) : JsonConvert.DeserializeObject<T>(value);
        }
    }
}

Index Razor Page

Create new folder named Pages. In this folder, create new Razor Page named Index as below:

Index.cshtml.cs

using System.Collections.Generic;
using LearnASPNETCoreRazorPagesWithRealApps.Entities;
using LearnASPNETCoreRazorPagesWithRealApps.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class IndexModel : PageModel
    {
        public List<Product> Products;

        public void OnGet()
        {
            ProductModel productModel = new ProductModel();
            Products = productModel.findAll();
        }
    }
}

Index.cshtml

@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.IndexModel

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

    <h3>Product List</h3>
    <table border="1">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Photo</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
        @foreach (var product in Model.Products)
        {
            <tr align="center">
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td><img src="~/images/@product.Photo" width="120" height="100" /></td>
                <td>$@product.Price</td>
                <td>
                    <a asp-page="cart" asp-page-handler="buynow" asp-route-id="@product.Id">Buy Now</a>
                </td>
            </tr>
        }
    </table>

</body>
</html>

Cart Razor Page

In Pages folder, create new Razor Page named Cart as below:

Cart.cshtml.cs

using System.Collections.Generic;
using LearnASPNETCoreRazorPagesWithRealApps.Entities;
using LearnASPNETCoreRazorPagesWithRealApps.Helpers;
using LearnASPNETCoreRazorPagesWithRealApps.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Linq;
using Microsoft.AspNetCore.Mvc;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class CartModel : PageModel
    {
        public List<Item> cart { get; set; }
        public double Total { get; set; }

        public void OnGet()
        {
            cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            Total = cart.Sum(i => i.Product.Price * i.Quantity);
        }

        public IActionResult OnGetBuyNow(string id)
        {
            var productModel = new ProductModel();
            cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            if (cart == null)
            {
                cart = new List<Item>();
                cart.Add(new Item
                {
                    Product = productModel.find(id),
                    Quantity = 1
                });
                SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            }
            else
            {
                int index = Exists(cart, id);
                if (index == -1)
                {
                    cart.Add(new Item
                    {
                        Product = productModel.find(id),
                        Quantity = 1
                    });
                }
                else
                {
                    cart[index].Quantity++;
                }
                SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            }
            return RedirectToPage("Cart");
        }

        public IActionResult OnGetDelete(string id)
        {
            cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            int index = Exists(cart, id);
            cart.RemoveAt(index);
            SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            return RedirectToPage("Cart");
        }

        public IActionResult OnPostUpdate(int[] quantities)
        {
            cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            for (var i = 0; i < cart.Count; i++)
            {
                cart[i].Quantity = quantities[i];
            }
            SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            return RedirectToPage("Cart");
        }

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

    }
}

Cart.cshtml

@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.CartModel
@{
    Layout = null;
}

<!DOCTYPE html>

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

    <h3>Cart</h3>
    <form method="post" asp-page="cart" asp-page-handler="update">
        <table border="1">
            <tr>
                <th>Action</th>
                <th>Id</th>
                <th>Name</th>
                <th>Photo</th>
                <th>Price</th>
                <th>Quantity <input type="submit" value="Update" /></th>
                <th>Sub Total</th>
            </tr>
            @foreach (var item in Model.cart)
            {
                <tr align="center">
                    <td align="center">
                        <a asp-page="cart" asp-page-handler="delete" asp-route-id="@item.Product.Id">X</a>
                    </td>
                    <td>@item.Product.Id</td>
                    <td>@item.Product.Name</td>
                    <td><img src="~/images/@item.Product.Photo" width="120" height="100" /></td>
                    <td>$@item.Product.Price</td>
                    <td><input type="number" name="quantities" value="@item.Quantity" min="1" style="width: 50px;" /></td>
                    <td>
                        $@(item.Product.Price * item.Quantity)
                    </td>
                </tr>
            }
            <tr>
                <td colspan="6" align="right">Total</td>
                <td align="center">$@Model.Total</td>
            </tr>
        </table>
    </form>
    <a asp-page="index">Continue Shopping</a>

</body>
</html>

Structure of ASP.NET Core Razor Pages Project

Run Application

Open Index Razor Page with following url: http://localhost:1115

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