Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Adding the Store Page

Explore how to add a Store page component in a Blazor WebAssembly app to display products and enable adding or deleting items from a shopping cart. Understand how to test the store page and recognize state loss when navigating. Gain insights into preserving application state using the AppState pattern for a persistent shopping cart experience.

We'll cover the following...

To add a store, we need to add a Store component to our web app. We do this as follows:

  1. Open the Shared\NavMenu.razor page.
  2. Add the following markup before the closing ul tag:
HTML
<div class="nav-item px-3">
    <NavLink class="nav-link" href="store">
        <span class="oi oi-home" aria-hidden="true">
        </span>
        Store
    </NavLink>
</div>

The preceding markup adds a menu option for the “Store” page.

  1. Right-click the Pages folder and select the “Add, Razor Component” option from the menu.

  2. Name the new component Store. ...