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

Component Structure

Explore the structure of Blazor WebAssembly components by learning about Razor directives, HTML markup with C# integration, and code blocks. Understand how these elements come together to build reusable components in your web applications.

We'll cover the following...

The following diagram shows code from the Counter component of the Demo project that we will create in this chapter:

Component structure
Component structure

The code in the preceding example is divided into three sections:

  • Directives
  • Markup
  • Code block

Each of the sections has a different purpose.

Directives

Directives are used to add special functionality, such as routing, layout, and dependency injection. They are defined within Razor and we cannot define own own directives.

In the preceding example, there is only one directive used—the @page directive. The @page directive is used for routing. In this example, the following URL will route the user to the Counter component:

C#
/counter

A typical page can include many directives at the top of the page. Also, many pages have more than one @page directive.

Most of the directives in Razor can be used in a Blazor WebAssembly application. These are the Razor directives that are used in Blazor, in alphabetical order:

  • @attribute: This directive adds a class-level attribute to the component. The following example adds the [Authorize] attribute:
C++
@attribute [Authorize]
  • @code: This directive adds class members to the component. In the example, it is used to distinguish the code block.
  • @implements: This directive implements the specified class.
  • @inherits: This directive provides full control of the class that the view inherits.
  • @inject: This directive is used for dependency injection. It enables the component to inject a service from the dependency injection container into the view. The following example injects HttpClient defined in the Program.cs file into the component:
C#
@inject HttpClient Http

  • @layout: This directive is used to specify a layout for the Razor component.

  • @namespace: This directive sets the component’s namespace. We only need to use this directive if we do not want to use the default namespace for the component. The default namespace is based on the location of the component.

  • @page: This directive is used for routing.

  • @typeparam: This directive sets a type parameter for the component.

  • @using: This directive controls the components that are in scope.

Markup

This is HTML with Razor syntax. The Razor syntax can be used to render text and allows C# to be used as part of the markup. We will cover more about Razor syntax in later lessons.

Code block

The code block contains the logic for the page. It begins with the @code directive. By convention, the @code directive is at the bottom of the page. It is the only file-level directive that is not placed at the top of the page.

The code block is where we add C# fields, properties, and methods to the component. In upcoming lessons, we will move the code block to a separate code-behind file.

Razor components are the building blocks of a Blazor WebAssembly application. They are easy to use since they are simply a combination of HTML markup and C# code.