مرحبا يا هابر! ما زلت تفعل متجر على الانترنت على Blazor. في هذا الجزء سأتحدث عن كيف أضفت القدرة على إضافة السلع إلى السلة. لمزيد من التفاصيل ، مرحبا بك في القط.المحتوى
المراجع
→ المصادر→ صور في سجل Dockerالرمز
في نموذج 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>
الإصدار الزاوي
