Building Web Applications with Blazor/

...

/

Razor Component Structure

Razor Component Structure

Learn the fundamentals of Razor component structure.

We'll cover the following...

A Blazor application, regardless of whether it's Blazor WebAssembly or Blazor Server, has a Razor component as its basic unit. Each Razor component is represented by a file with the .razor extension. Each component can serve as a page, an element inside another page, a common layout for any page, a repository of shared resources, or a template for other Razor components.

Regardless of its role, all Razor components use common syntax and structure. This is what we will cover in this lesson. We'll do this with the help of the following project setup in a fully interactive code widget.

This project represents the standard BlazorWebAssembly template. It consists of three pages: a home page to demonstrate the basic Razor component functionality, a counter page to demonstrate basic interaction between the markup and C# code, and a page that demonstrates the process of fetching data. 

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
Razor components demonstration setup

Here, we’re using the Blazor WebAssembly example. However, all concepts covered in this lesson are equally applicable to Blazor Server as well.

Basic Razor component structure

Each Razor component consists of three types of content:

    ...