Getting started with Blazor WebAssembly

Welcome to Blazor WebAssembly!

This tuttorial introduces you to the essentials of Blazor WebAssembly by walking you through building an online shop with a catalogue, shopping cart and check-out form.

You can download the example code used in this topic on GitHub.

Prerequisites

To get the most out of this tutorial, you should already have a basic understanding of the following:


Take a tour of the example website

In Blazor WebAssembly, components are the basic UI units that let you reuse sets of UI functionality. Each component consists of:
  • HTML tags: define how the user sees the component.
  • @code{ } section: handle data and functionality.
  • CSS: improve the look and feel for the user.

In this example we have the following components:

  • App.razor - the first component to load the container for other components.
  • ProductList.razor - display a list of products.
  • ProductDetail.razor - display details of the product.


Create a blank project

To create a blank project, you will need Visual Studio 2019 or later with ASP.NET Web and .NET 5 Runtime.

After that, you will see the template for Blazor WebAssembly:


Next step

Continue to explore Blazor WebAssembly by Creating the API for the online shop example.

BLAZOR SCHOOL
Designed and built with care by our dedicated team, with contributions from a supportive community. We strive to provide the best learning experience for our users.
Docs licensed CC-BY-SA-4.0
Copyright © 2021-2025 Blazor School
An unhandled error has occurred. Reload 🗙