+
+}
+
+@code {
+ IEnumerable
+ 
+ Filters
+
+
+ Filters
+
+
+
+
+ Brand
+ +
+
+ Type
+ + +
+ @if (basketItems?.Count > 0)
+ {
+ @TotalQuantity
+ }
+
+
+@code {
+ IDisposable? basketStateSubscription;
+ private IReadOnlyCollection
+
+
+@code {
+ [CascadingParameter]
+ public required HttpContext HttpContext { get; set; }
+
+ // We can use Endpoint Metadata to determine the page currently being visited
+ private Type? PageComponentType => HttpContext.GetEndpoint()?.Metadata.OfType
+ @{
+ var headerImage = IsCatalog ? "images/header-home.webp" : "images/header.webp";
+ }
+ 
+
+
+
+
+
+
+
+ @context.User.Identity?.Name
+
+ 
+
+
+
+
+
+
+
+ @if (basketUnavailable == true)
+ {
+
+ }
+ else if (basketItems is null)
+ {
+
+
+
+
+@code {
+ private IReadOnlyCollectionLoading...
+ } + else if (basketItems.Count == 0) + { ++ Your shopping bag is empty. Continue shopping. +
+ } + else + { +
+
+
+
+
+ @foreach (var item in basketItems)
+ {
+ var quantity = CurrentOrPendingQuantity(item.ProductId, item.Quantity);
+ Products
+ Quantity
+ Total
+
+
+ }
+
+ )
+
+
+
+ @item.ProductName
+$@item.UnitPrice.ToString("0.00")
+
+
+
+
+ $@((item.UnitPrice * quantity).ToString("0.00"))
+
+
+
+ }
+
+ 
+
+
+
+ Your shopping bag
+ @TotalQuantity
+
+
+ Your shopping bag
+ @TotalQuantity
+
+
+ Check out
+
+ Total
+ $@TotalPrice?.ToString("0.00")
+
+ Continue shopping
+ +
+
+
+@code {
+ const int PageSize = 9;
+
+ [SupplyParameterFromQuery]
+ public int? Page { get; set; }
+
+ [SupplyParameterFromQuery(Name = "brand")]
+ public int? BrandId { get; set; }
+
+ [SupplyParameterFromQuery(Name = "type")]
+ public int? ItemTypeId { get; set; }
+
+ CatalogResult? catalogResult;
+
+ static IEnumerableLoading...
+ } + else + { +
+
+ }
+
+ @foreach (var item in catalogResult.Data)
+ {
+
+
+
+ @foreach (var pageIndex in GetVisiblePageIndexes(catalogResult))
+ {
+ @pageIndex
+ }
+
+
+ @if (ShowRequestId)
+ {
+
+
+@code {
+ [CascadingParameter]
+ public required HttpContext HttpContext { get; set; }
+
+ private string? RequestId { get; set; }
+ private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+ protected override void OnInitialized() =>
+ RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+}
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Error.razor.css b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Error.razor.css
new file mode 100644
index 0000000..2ab3afc
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Error.razor.css
@@ -0,0 +1,21 @@
+.error {
+ padding: 0 10rem;
+ display: flex;
+ gap: 6rem;
+}
+
+@media only screen and (max-width: 480px) {
+ .error {
+ padding: 0 1rem;
+ gap: 1rem;
+ flex-direction: column-reverse
+ }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 1024px) {
+ .error {
+ padding: 0 3rem;
+ gap: 2rem;
+ flex-direction: column-reverse;
+ }
+}
\ No newline at end of file
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor
new file mode 100644
index 0000000..dce6508
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor
@@ -0,0 +1,113 @@
+@page "/item/{itemId:int}"
+
+@using System.Net
+
+@inject CatalogService CatalogService
+@inject BasketState BasketState
+@inject LogOutService LogOutService
+@inject NavigationManager Nav
+@inject IProductImageUrlProvider ProductImages
+
+@if (item is not null)
+{
+
+ Request ID: @RequestId
+
+ )
+
+}
+else if (notFound)
+{
+
+
+ @item.Description
++ Brand: @item.CatalogBrand?.Brand +
+ + @if (numInCart > 0) + { +@numInCart in shopping bag
+ } +
+
+}
+
+@code {
+ private CatalogItem? item;
+ private int numInCart;
+ private bool isLoggedIn;
+ private bool notFound;
+
+ [Parameter]
+ public int ItemId { get; set; }
+
+ [CascadingParameter]
+ public required HttpContext HttpContext { get; set; }
+
+ protected override async Task OnInitializedAsync()
+ {
+ isLoggedIn = HttpContext.User.Identity?.IsAuthenticated == true;
+
+ try
+ {
+ item = await CatalogService.GetCatalogItem(ItemId);
+ await UpdateNumInCartAsync();
+ }
+ catch (HttpRequestException ex) when (ex.StatusCode == HttpStatusCode.NotFound)
+ {
+ HttpContext.Response.StatusCode = 404;
+ notFound = true;
+ }
+ }
+
+ private async Task AddToCartAsync()
+ {
+ if (!isLoggedIn)
+ {
+ Nav.NavigateTo(Pages.User.LogIn.Url(Nav));
+ return;
+ }
+
+ if (item is not null)
+ {
+ await BasketState.AddAsync(item);
+ await UpdateNumInCartAsync();
+ }
+ }
+
+ private async Task UpdateNumInCartAsync()
+ {
+ var items = await BasketState.GetBasketItemsAsync();
+ numInCart = items.FirstOrDefault(basketItem => basketItem.ProductId == ItemId)?.Quantity ?? 0;
+ }
+}
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor.css b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor.css
new file mode 100644
index 0000000..c21fa93
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/Item/ItemPage.razor.css
@@ -0,0 +1,75 @@
+.item-details {
+ padding: 0 5rem 0 10rem;
+ display: flex;
+ align-items: flex-start;
+ gap: 4rem;
+ line-height: 1.7rem;
+}
+
+p:first-of-type {
+ margin-top: 0;
+}
+
+img {
+ width: 25rem;
+ max-width: 50%;
+}
+
+.description {
+ max-width: 30rem;
+}
+
+.add-to-cart {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+}
+
+.price {
+ font-size: 1.6rem;
+ font-weight: 600;
+}
+
+.add-to-cart button {
+ background-color: black;
+ color: white;
+ border-radius: .25rem;
+ border: 0;
+ padding: 0.5rem 1.25rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.add-to-cart button:hover {
+ background-color: #666;
+}
+
+ .add-to-cart button:active {
+ background-color: #333;
+ }
+
+a {
+ color: black;
+}
+
+@media only screen and (max-width: 480px) {
+ .item-details {
+ padding: 1.5rem 1rem 0 1rem;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .item-details img {
+ width: 100%;
+ max-width: none;
+ }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 1024px) {
+ .item-details {
+ gap: 1rem;
+ padding: 0 3rem 0 3rem;
+ }
+}
\ No newline at end of file
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogIn.razor b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogIn.razor
new file mode 100644
index 0000000..87a5925
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogIn.razor
@@ -0,0 +1,71 @@
+@page "/user/login"
+
+@using Microsoft.AspNetCore.Authentication
+@using Microsoft.AspNetCore.WebUtilities
+
+@attribute [Authorize]
+
+@inject LogOutService LogOutService
+@inject NavigationManager Nav
+
+@code {
+ private static Uri _placeholderHostUri = new Uri("http://notused");
+
+ [SupplyParameterFromQuery]
+ public bool ForceLogIn { get; set; }
+
+ [SupplyParameterFromQuery]
+ public string? ReturnUrl { get; set; }
+
+ [CascadingParameter]
+ public required HttpContext HttpContext { get; set; }
+
+ protected override async Task OnInitializedAsync()
+ {
+ var returnUrl = ReturnUrl ?? "/";
+
+ if (ForceLogIn)
+ {
+ await LogOutService.LogOutAsync(HttpContext);
+ // Navigate back to the login page to force the user to log in again
+ var loginUrl = Url(Nav, returnUrl: returnUrl);
+ Nav.NavigateTo(loginUrl, forceLoad: true);
+ return;
+ }
+
+ // Ensure we only redirect to relative URLs (prevent open redirect attacks)
+ var url = new Uri(returnUrl, UriKind.RelativeOrAbsolute);
+ Nav.NavigateTo(url.IsAbsoluteUri ? "/" : returnUrl);
+ }
+
+ public static string Url(NavigationManager nav, string? returnUrl = null, bool preserveQuery = true, bool forceLogIn = false)
+ {
+ var loginUrl = "user/login";
+ returnUrl ??= nav.Uri;
+
+ if (Uri.TryCreate(returnUrl, UriKind.Absolute, out var returnUri))
+ {
+ if (!preserveQuery)
+ {
+ // Remove the query string from the return URL
+ returnUrl = returnUri.GetComponents(UriComponents.SchemeAndServer | UriComponents.Path, UriFormat.SafeUnescaped);
+ }
+ // Make the return URL relative
+ returnUrl = nav.ToBaseRelativePath(returnUrl);
+ }
+ else if (!preserveQuery)
+ {
+ // It's a relative URL so use a placeholder host
+ returnUrl = new Uri(_placeholderHostUri, returnUrl).GetComponents(UriComponents.Path, UriFormat.SafeUnescaped);
+ }
+
+ if (forceLogIn)
+ {
+ loginUrl = QueryHelpers.AddQueryString(loginUrl, nameof(ForceLogIn), bool.TrueString);
+ }
+
+ loginUrl = QueryHelpers.AddQueryString(loginUrl, nameof(ReturnUrl), returnUrl);
+
+ return loginUrl;
+ }
+}
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogOut.razor b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogOut.razor
new file mode 100644
index 0000000..5d95386
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Pages/User/LogOut.razor
@@ -0,0 +1,5 @@
+@page "/user/logout"
+@*
+ When the 'log out' form is posted, it is handled inside UserMenu.razor.
+ This page only exists to create an endpoint that accepts the form post.
+*@
diff --git a/labs/4-Add-Shopping-Basket/end/WebApp/Components/Routes.razor b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Routes.razor
new file mode 100644
index 0000000..d0df781
--- /dev/null
+++ b/labs/4-Add-Shopping-Basket/end/WebApp/Components/Routes.razor
@@ -0,0 +1,6 @@
+Sorry, we couldn't find any such product.
+
+ @if (basketItems?.Count > 0)
+ {
+ @TotalQuantity
+ }
+
+
+@code {
+ IDisposable? basketStateSubscription;
+ private IReadOnlyCollection
+ @if (basketUnavailable == true)
+ {
+
+ }
+ else if (basketItems is null)
+ {
+
+
+
+
+@code {
+ private IReadOnlyCollectionLoading...
+ } + else if (basketItems.Count == 0) + { ++ Your shopping bag is empty. Continue shopping. +
+ } + else + { +
+
+
+
+
+ @foreach (var item in basketItems)
+ {
+ var quantity = CurrentOrPendingQuantity(item.ProductId, item.Quantity);
+ Products
+ Quantity
+ Total
+
+
+ }
+
+
+
+
+
+ @item.ProductName
+$@item.UnitPrice.ToString("0.00")
+
+
+
+
+ $@((item.UnitPrice * quantity).ToString("0.00"))
+
+
+
+ }
+
+
+
+
+
+ Your shopping bag
+ @TotalQuantity
+
+
+ Your shopping bag
+ @TotalQuantity
+
+
+ Check out
+
+ Total
+ $@TotalPrice?.ToString("0.00")
+
+ Continue shopping
+ +Brand: @item.CatalogBrand?.Brand
+ + @if (numInCart > 0) + { +@numInCart in shopping bag
+ }