Skip to content

Магазин на Asp.Net Core MVC EF. Частина 5

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Завантаження...

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.


У цій статті, ми продовжимо писати магазин на Asp.Net Core і Entity Framework Core. У четвертій частині ми дізналися яким чином адаптувати додаток GameStore для роботи з більшими обсягами даних. Додали до нього підтримку розбиття на сторінки, упорядкування та пошуку даних. Для ознайомлення з четвертою частиною, перейдіть за посиланням.

У цій статті буде побудовано частини додатка GameStore, які реалізують інтерфейс для покупців, що дасть змогу обирати товари, переглядати кошик для покупок і оформляти замовлення. Функціональні засоби, що додаються, значною мірою пов’язані з інфраструктурою ASP.NET Core MVC і ґрунтуються на фундаменті Entity Framework Core, який було створено в попередніх розділах.

Магазин на Asp.Net Core MVC EF. Частина 5

Додавання імпорту подання

Модифікація моделі даних

Додавання початкових даних про товари

Створення та застосування міграції

Відображення товарів для покупця

Створення URL повернення

Додавання кошика для покупок

Створення класу моделі Cart

Створення контролера та подання

Створення уявлень

Виклад матеріалу в статті буде вестися прискореними темпами, оскільки більша частина роботи стосується побудови засобів з використанням ASP.NET Core МVC поверх фундаменту, сформованого за допомогою інфраструктури Entity Fгamework Core в попередніх розділах.

Додавання імпорту подання

У попередньому розділі клас PagedList застосовувався в поданнях без модифікації моделі подання просто для демонстрації того, що засоби масштабування можна додати, внісши мінімальні зміни. У цьому розділі клас PagedList буде використовуватися в поданнях безпосередньо, тому додамо простір імен, що містить його, у файл імпортування подань Views / _ViewImports.cshtml:

Модифікація моделі даних

Щоб підготувати модель даних до роботи із засобами інтерфейсу для покупців, додамо в клас Product властивість Description, яка дасть змогу покупцям отримати трохи відомостей про товар:

Для полегшення запиту і збереження даних за категорією додамо в клас Сategory навігаційну властивість, яку інфраструктура Entity Framework Core зможе заповнювати пов’язаними об’єктами Product:

Додавання початкових даних про товари

Нам необхідна можливість перемикання між великими обсягами тестових даних і невеликими обсягами реалістичних даних. З цією метою додамо в контролер Seed код, який забезпечить наявність стандартних категорій і товарів GameStore, створимо метод CreateProductionData:

Новий метод дії створює послідовність об’єктів Category і встановлює навігаційну властивість Products у колекцію об’єктів Product. Усі об’єкти передаються методу AddRange() і зберігаються в БД методом SaveChanges().

Щоб націлитися на новий метод дії, додамо в подання Index, що застосовується контролером Seed, такий елемент:

Елемент button відправляє НТГР-запит POST, результатом якого буде очищення БД і її заповнення стандартними категоріями і товарами GameStore.

Створення та застосування міграції

Щоб оновити БД, потрібно створити і застосувати до неї міграцію.

Для створення міграції у вікні Package Manager Console введіть таку команду:

add migration asp.net core

Для виконання інструкцій міграції, у вікні Package Manager Console виконайте команду:

Перша команда створює нову міграцію на ім’я AddCustomer, яка міститиме команди, необхідні для підготовки БД до зберігання нових об’єктів. Друга команда виконує такі команди для оновлення БД.

Запустіть додаток, перейдіть на сторінку “Початкові дані”, очистіть таблиці та заповніть продуктами. Перевірте роботу програми.

asp.net core products list

Відображення товарів для покупця

У наступних розділах буде додано підтримку для відображення списку товарів користувачеві, що дасть йому змогу фільтрувати товари за категоріями та переглядати товари, доступні для купівлі. Підтримка будуватиметься на основі засобів створених раніше.

Підготовка моделі даних

Щоб розпочати частину програми, пов’язану з інтерфейсом для покупців, додайте можливість запитування об’єктів Product за їхньою категорією, почавши з інтерфейсу сховища IProduct:

Внесемо відповідну зміну в клас реалізації, застосовуючи LINQ-метод Where() для запиту на основі властивості зовнішнього ключа, яка асоціює об’єкт Product із пов’язаним об’єктом Category, змінимо реалізацію методу в класі ProductRepository:

Інтерфейс IQueryable<T> дає змогу формувати запит на основі параметрів методу, створюючи об’єкт, що запитуватиме БД, тільки коли він перераховується. Це перевага роботи з об’єктами IQueryable<T>, хоча є й недолік – легкість, з якою можна ненавмисно ініціювати дубльовані запити.

Створення URL повернення

Нам необхідно знати, на який URL переходити після того, як користувач вибрав товар. Для полегшення процесу створимо папку Infrastructure і додамо в неї файл класу на ім’я UrlExtensions.cs з таким кодом:

У класі UrlExtensions визначається метод PathAndQuery(), що розширює PathAndQuery(), який буде використовуватися в елементі form.

Перейдемо у файл Views/ViewImports.cshtml, додамо туди такий простір імен:

Створення контролера Store, уявлень і компонування

Щоб надати контролер, який буде представляти дані покупцеві, додамо в папку Controllers файл на ім’я StoreController.cs і помістимо в нього такий код:

Для управління відображенням даних Product і Category використовуються два об’єкти QueryOptions. Вони застосовуються для отримання об’єкта PagedList<Product>, який передається поданню як його модель, і об’єкта PagedList<Category>, що додається до ViewBag.

Щоб забезпечити засобам інтерфейсу для покупців компонування, створимо папку Views / Store і помістимо в неї файл на ім’я _Layout.cshtml з таким вмістом:

Компонування представляє стандартний заголовок “Магазин ігор”, із заповнювачем замість зведення по кошику для покупок, яке буде додано в додаток пізніше. Для відображення списку товарів додамо в папку Views / Store файл на ім’я Index.cshtml з таким вмістом:

У поданні Index зібрано разом кілька засобів для відображення товарів, включно з розбивкою на сторінки та підтримкою пошуку. Щоб відобразити користувачеві список категорій, додамо до папки Views / Store файл на ім’я Categories.cshtml з таким вмістом:

Подання Categories відображає список доступних категорій і пропонує кнопки Previous (Попередня) і Next (Наступна) для гортання списку. Елементи button, які обирають категорії, застосовують НТМL-форму на ім’я pagesform для націлювання на контролер за допомогою значення первинного ключа обраної категорії.

Для тестування результату, запустимо додаток і перейдемо за адресою:

https://localhost:7191/store

Перевірте, як працює пошук, навігація, вибір категорії.

asp.net core products list

Можете так само перевірити, як контролер Store справляється з великими обсягами даних, перейшовши за посиланням https://localhost:7191/seed і згенерувавши великий обсяг даних.

Оскільки модель продукту була змінена, ми додали опис до товару, необхідно змінити функцію наповнення товарів. Для цього перейдемо в контролер Seed, змінимо визначення методу CreateSeedData():

Додавання кошика для покупок

Конфігурування сесії

Наступний крок пов’язаний із додаванням підтримки для вибору товарів і їх збереження в кошику, яку потім можна застосовувати для оформлення замовлення. У наступних темах застосунок буде сконфігуровано для збереження даних сеансу і використання цього як тимчасового сховища обраних товарів.

Щоб увімкнути сеанси в БД, додамо в клас Program, наступний код:

Засіб сеансів буде зберігати тільки значення string. Для полегшення роботи з цим засобом додайте в папку Infrastructure файл класу на ім’я SessionExtensions.cs з таким вмістом:

У класі SessionExtensions визначено розширювальні методи, які серіалізують об’єкти у формат JSON і відновлюють їх знову, даючи змогу легко зберігати прості об’єкти як дані сеансу.

Створення класу моделі Cart

Для представлення обраних покупцем товарів додайте в папку Models файл на ім’я Cart.cs і визначте в ньому клас із таким вмістом:

Клас Cart управляє колекцією об’єктів OrderLine, яка представляє обрані товари і може бути легко збережена в БД при створенні замовлення.

Створення контролера та подання

Щоб надати логіку, що підтримує роботу з об’єктами Cart, додайте в Controllers файл на ім’я CartController.cs і помістіть у нього такий код:

Контролер визначає дії, які додають і видаляють елементи з кошика, відображають вміст кошика і надають покупцеві можливість оформити замовлення. Низка методів приймає параметр returnUrl, що дає змогу користувачеві повернутися до списку товарів, не втрачаючи параметрів рядка запиту, які конфігурують розбивку на сторінки та фільтрацію за категорією. Клас CartController також є компонентом подання, який буде застосовуватися для відображення зведення по кошику в компонуванні інтерфейсу покупців.

Створення уявлень

Щоб забезпечити новий контролер поданням для управління кошиком, створіть папку Views / Cart і додайте в неї файл на ім’я Index.cshtml з таким вмістом:

Подання відображає зведення за товарами, обраними покупцем, і пропонує кнопки, які дають змогу повернутися до списку товарів або продовжити оформлення замовлення. Щоб зібрати інформацію для створення замовлення, додамо в папку Views/Cart файл на ім’я CreateOrder.cshtml з таким вмістом:

Для відображення користувачеві повідомлення про те, що замовлення створено, додамо в папку Views/Cart файл на ім’я Completed.cshtml з таким вмістом:

Щоб створити подання для віджета (графічного елемента) зі зведенням за кошиком, створимо папку Views / Shared / Components / Cart і додамо в неї файл на ім’я Default.cshtml з таким вмістом:

Подання Default відображає кількість елементів у кошику та їхню загальну вартість. Також є кнопка, яка перемістить на контролер Cart, якщо подання було візуалізовано іншим контролером. Щоб відобразити віджет кошика, за допомогою методу Component.InvokeAsync() додамо компонент подання до компонування, використовуваного для функціональних засобів магазину Views/Store/__Layout.cshtml:

Запустимо додаток і виконаємо тестування. Для цього виберіть один або кілька товарів і додайте їх у кошик.

asp.et core products list

Після цього перейдіть у кошик, перегляньте додані товари, виконайте видалення будь-якого з них.

asp.net core cart

Нажмите оформить заказ, заполните данные на форме:

asp.net core order details

Нажмите кнопку “Оформить заказ”.

asp.net core page message

Підсумок

У розділі робота над додатком GameStore продовжилася додаванням засобів інтерфейсу для покупців. Було створено список товарів, який користувач може гортати, шукати в ньому товари або фільтрувати їх за категоріями. Обрані товари додаються в кошик, який потім може застосовуватися для оформлення замовлення, що зберігається в БД. Більшість функціональних засобів, доданих у розділі, використовують інфраструктуру МVС для створення надбудови над фундаментом Entity Framework Сare, утвореного в попередніх розділах. Такий шаблон ви бачитимете і у власних проєктах – великий обсяг початкової конфігурації моделі даних і коду, а потім набір засобів користувацького інтерфейсу, що швидко стають на свої місця. У наступному розділі проєкт додатка GameStore завершується створенням веб-служби REST.

На цьому стаття “Магазин на Asp.Net Core MVC EF”, підійшла до кінця, сподіваюся вам було цікаво. Ви можете завантажити вихідний код у моєму репозиторії — Github.

Поділіться вашим досвідом у коментарях, який був ваш перший проєкт, магазин на Asp.Net Core MVC EF або щось інше?

Так само вам може бути цікава попередня стаття:

Google Авторизація з Identity

 


Ви хочете навчитися писати код мовою програмування C#?

Створювати різні інформаційні системи, що складаються з сайтів, мобільних клієнтів, десктопних додатків, телеграм-ботів тощо.

Переходьте до нас на сторінку Dijix і ознайомтеся з умовами навчання, ми спеціалізуємося тільки на індивідуальних заняттях, як для початківців, так і для просунутих програмістів. Ви можете взяти як одне заняття для опрацювання питання, що вас цікавить, так і кілька, для більш щільної роботи. Завдяки особистому кабінету, кожен студент підвищить якість свого навчання, у вашому розпорядженні:

  • Доступ до пройденого матеріалу
  • Тематичні статті
  • Бібліотека книг
  • Онлайн тестування
  • Спілкування в закритих групах

https://dijix.com.ua

Живи у своєму світі, програмуй у нашому.


 

Published inAsp.Net Core
Підписатися
Сповістити про
guest
0 комментариев
Вбудовані Відгуки
Переглянути всі коментарі
0
Ми любимо ваші думки, будь ласка, прокоментуйте.x