【从实作学习ASP.NET Core】Day23 | 前台 | Session 购物车 (1)

接下来要来做购物网站比较核心的内容了，从购物车到付款结帐内容比较多也比较连贯，这边应该会多分几天出来写。今天会先完成 Session 购物车的前置作业。

购物车储存方式

Http是无状态的协定也就是说每一个网页都是一个独立的 Request ，但是购物车是需要跨页面保存的机制，需要用一些方法来保存状态，这边列出一些常用的解决方式：

Cookie：资料储存在客户端，好处在於不会消耗服务器资源，但因为资料会在客户端暴露，可能会有安全性问题。
Session：资料储存在服务器端的记忆体，资料能有隐密性，但有如果太多人同时使用，可能会导致服务器记忆体超载。
资料库：资料储存在资料库，资料安全也可以对购物习惯做追踪，但是每次存取时间长会导致使用者体验差，对服务器的负担也会很大。

从上面可以知道，每种方式各有利弊，应该要针对专案的型态来选择适合的机制。
总和各项考量，我这边会用 Session 来实作购物车

启用 Session

要用到 Session 就必须要注册服务
到 Startup.cs 加入红框内的程序码来启用 Session 服务

SessionHelper

在专案里新增一个 Helpers 资料夹并新增 SessionHelper.cs 类别
这个类别可以帮助我们存取 Session 的内容

using Microsoft.AspNetCore.Http;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace OnlineShop.Helpers
{
    public static class SessionHelper 
    {
        //设定 Session 内容
        public static void SetObjectAsJson(this ISession session, string key, object value)
        {
            session.SetString(key, JsonConvert.SerializeObject(value));
        }
        
        //取得 Session 内容
        public static T GetObjectFromJson<T>(this ISession session, string key)
        {
            var value = session.GetString(key);
            return value == null ? default(T) : JsonConvert.DeserializeObject<T>(value);
        }
        
        //移除 Session 
        public static void Remove(this ISession session, string key)
        {
            session.Remove(key);
        }
    }
}

加入购物车按钮

在做购物车之前，先来把连结购物车的按钮做好
我们希望当点击 [加入购物车] 按钮能有一点回馈，但单纯用 Alert 似乎又有点寒酸
这时候可以试试用 Toastr.js 来美化讯息栏

在前端引入 CDN 并加入 javascript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<script>
    function ShowMessage() {
        toastr["success"]("商品已加入购物车！");
    }
</script>

在加入购物车的按钮上加上onclick="ShowMessage()"

<a class="stretched-link text-dark" onclick="ShowMessage()" 
    asp-controller="Cart" asp-action="AddtoCart" asp-route-Id="@item.product.Id">加入购物车</a>

当点击 [加入购物车] 後，就会在页面右上角显示讯息