Blazor Tour Of Heroes App and Tutorial

This Tour of Heroes tutorial provides an introduction to the fundamentals of Blazor. It shows you how to set up your local development environment and develop a Blazor client-side application using Visual Studio.

This tutorial is a derivative of the canonical Tour Of Heroes App and Tutorial produced by the team at Angular and used under CC BY 4.0.. This version keeps as close to the original text as possible, varying where necessary because of the technical differences between Angular and Blazor. The resulting Blazor application includes all of the features of the original.

In this Tour of Heroes tutorial, you will build an app that helps a staffing agency manage its stable of heroes.

This app has many of the features you'd expect to find in a data-driven application. It acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.

By the end of this tutorial you will be able to do the following:

  • Use Razor syntax to show and hide elements and display lists of hero data.
  • Create Razor components to display hero details and show an array of heroes.
  • Use one-way data binding for read-only data.
  • Add editable fields to update a model with two-way data binding.
  • Bind component methods to user events, like keystrokes and clicks.
  • Enable users to select a hero from a master list and edit that hero in the details view.
  • Format data with C#.
  • Create a shared service to assemble the heroes.
  • Use routing to navigate among different views and their components.

You'll learn enough Blazor to get started and gain confidence that Blazor can do whatever you need it to do.

Last updated: 15/02/2023 09:03:59

Latest Updates

© 2023 - 2024 - Mike Brind.
All rights reserved.
Contact me at