Blazor Client Side Интернет Магазин: Часть 4 — Добавления товара в корзину

Привет, Хабр! Продолжаю делать интернет магазин на Blazor. В этой части расскажу о том как добавил в него возможность добавления товара в корзину. За подробностями добро пожаловать под кат.

Содержание

• Blazor + MVVM = Silverlight наносит ответный удар, потому что древнее зло непобедимо
• Blazor Client Side Интернет Магазин: Часть 1 — Авторизация oidc (oauth2) + Identity Server4
• Blazor Client Side Интернет Магазин: Часть 2 — CI/CD
• Blazor Client Side Интернет Магазин: Часть 3 — Витрина товаров
• Blazor Client Side Интернет Магазин: Часть 4 — Добавления товара в корзину

Ссылки

→ Исходники
→ Образы на Docker Registry

Код

В модель ProductsModel добавил поле для количества товаров в корзине.

   public int ItemsInBasketCount { get; set; } 

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

        [Inject]         public AuthenticationStateProvider AuthStateProvider { get; set; }          [Inject]         public IJSRuntime Js { get; set; } 

Для получения текущего количества предметов в корзине.

        private async Task LoadItemsInBasketCount()         {             var (res, err) = await Repository.GetItemsInBasketCount();             if (!string.IsNullOrWhiteSpace(err))             {                 Model.HandledErrors += $";{err}";             }             else             {                 Model.ItemsInBasketCount = res;             }         } 

Проверка состояния аутентификации.

        private async Task<bool> IsAuth()         {             var state = await AuthStateProvider.GetAuthenticationStateAsync();             return state?.User?.Identity?.IsAuthenticated ?? false;         } 

Добавление товара в корзину.

        public async Task AddToBasket(Guid productId)         {             Model.IsLoaded = false;             if (!await IsAuth())             {                 await Js.InvokeVoidAsync(                      "alert",                      "Пожалуйста авторизуйтесь в системе для добавления товаров в корзину. Кнопка для входа в верхнем правом углу."                      );                 Model.IsLoaded = true;                 return;             }             var (r, e) = await Repository.AddToBasket(productId);             Model.HandledErrors = e;             Model.IsLoaded = true;             await LoadItemsInBasketCount();         } 

В Products.razor Добавил:

Для отображения количества товаров в корзине.

<AuthorizeView>     <Authorized>         Товаров в корзине: @Model.ItemsInBasketCount     </Authorized> </AuthorizeView> 

Для добавления товара в корзину.

<td>     <input type="button"            value="Добавить в корзину"            class="btn btn-success"            @onclick="@(async x=> await AddToBasket(product.Id))" /> </td> 

Версия на Angular