Корзина покупок на ASP.NET Core MVC: пошаговое руководство

Это руководство описывает создание функциональной корзины покупок для веб-сайта.

HTML-шаблон

Создадим HTML-шаблон all-cars.cshtml в папке Views/Shared для вывода всех товаров, избегая дублирования кода. Шаблон использует модель Cart из Ishop/Data/Models/Cart.cs.

В all-cars.cshtml подключаем модель:

@model Ishop.Data.Models.Cart

Код вывода товаров копируется из шаблона списка (_ProductList.cshtml), заменяя @Model на @Model.Cars:

@{
    // ... код вывода товаров ...
}

Подключаем шаблон:

@{
    Html.Partial("_all-cars", Model);
}

Первый параметр — имя шаблона (_all-cars), второй — объект модели (Model). Шаблоны находятся в папке Views/Shared. Для явного указания типа данных используйте @model Ishop.Data.Models.Cart. В all-cars.cshtml можно использовать @Model.Cars.

Модели корзины

Для корзины потребуются две модели:

ShopCartItem: описывает товар в корзине.
ShopCart: описывает корзину.

Модель ShopCartItem

Класс ShopCartItem (папка Models):

public class ShopCartItem
{
    public int Id { get; set; }
    public Model Car { get; set; }
    public decimal Price { get; set; }
    public string ShopCartId { get; set; } 
}

ShopCartItem хранит ID товара, объект товара (Car), его цену и ID корзины (ShopCartId).

Обновление базы данных

Добавляем миграцию для таблицы ShopCartItem (Entity Framework Core):

Add-Migration ShopCart

Обновляем базу данных:

Update-Database

При необходимости переименуйте первичный ключ в ShopCartItem на Id.

Модель ShopCart

Класс ShopCart (папка Models):

public class ShopCart
{
    public string ShopCartId { get; set; }
    public List<ShopCartItem> ShopCartItems { get; set; }

    public ShopCart(AppDbContext context)
    {
        // ... конструктор для работы с базой данных ...
    }
}

ShopCart содержит ID корзины и список товаров (ShopCartItems).

Функции и сервисы работы с корзиной

Создадим статические функции для работы с корзиной, используя HttpContext для сессий.

Получение корзины (GetCart)

Функция GetCart определяет и создает корзину для пользователя:

public static ShopCart GetCart(this IServiceScopeFactory services, IHttpContextAccessor session)
{
  // ... реализация функции ...
}

Функция использует IHttpContextAccessor для работы с сессиями и возвращает ShopCart.

Добавление товара в корзину (AddtoCart)

Функция AddtoCart добавляет товар и сохраняет изменения:

public void AddtoCart(Model car)
{
    // ... реализация функции ...
}

Получение товаров из корзины (GetShopCartItems)

Функция GetShopCartItems возвращает список товаров из корзины:

public List<ShopCartItem> GetShopCartItems()
{
   // ... реализация функции ...
}

Контроллер и представления

Создадим контроллер ShopCartController и представления для отображения корзины.

Контроллер ShopCartController

В ShopCartController создадим действия для отображения корзины (Index) и добавления товаров (AddToCart):

public class ShopCartController : Controller
{
    // ... поля и конструктор ...

    public IActionResult Index()
    {
        // ... реализация действия Index ...
    }

    public RedirectToActionResult AddToCart(int id)
    {
        // ... реализация действия AddToCart ...
    }
}

ViewModel для представления

Создадим ShopCartViewModel для передачи данных в представление:

public class ShopCartViewModel
{
    public ShopCart ShopCart { get; set; }
}

Представление Index.cshtml

Создадим представление Index.cshtml (папка Views/ShopCart):

@{
    // ... код вывода товаров из ShopCartViewModel ...
}

Установка пакетов и настройка сервисов

Установите пакеты NuGet:

Microsoft.AspNetCore.Session
Microsoft.Extensions.Caching.Memory
Microsoft.AspNetCore.Http

В Startup.cs добавьте сервисы:

services.AddHttpContextAccessor();
services.AddScoped<ShopCart>();
// ...настройка сессий...

После настройки запустите приложение. В следующих уроках будет добавлена функциональность оплаты.