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

Examining the Routable Razor Components

Explore the key routable Razor components in a Blazor WebAssembly application, including Index, Counter, and FetchData. Learn routing with @page directives, handling events, asynchronous data loading with HttpClient, and component lifecycle methods to build responsive single-page apps.

We'll cover the following...

The routable Razor components are in the Pages folder. There are three routable Razor components in the Demo project:

  • The Index component
  • The Counter component
  • The FetchData component

The Index component

The “Home” page of the Demo project uses the Index component that is defined in the Pages\Index.razor file:

C++
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

The preceding code includes an @page directive that references the root of the web app and some markup. The markup includes a SurveyPrompt component.

The Counter component

The Counter component is more complex than the ...