Привет, Хабр! Продолжаю делать интернет магазин на 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
Специально для сайта ITWORLD.UZ. Новость взята с сайта Хабр