Building Web Applications with Blazor/

...

/

Using Layouts and Shared Components

Using Layouts and Shared Components

Learn how to apply layouts and reusable files in Razor components.

We'll cover the following...

In this lesson, we will cover the usage of layouts and shared components in Blazor. Layouts provide a common page template that Razor components are inserted into. Shared Razor components can be used in any Razor component inside the application.

Press + to interact
Razor component layout with page placeholder
Razor component layout with page placeholder

We will use the following project setup. It contains sufficient examples to demonstrate the concepts.

<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>
Blazor WebAssembly project

Razor component layouts

In the above setup, we have one example of a Razor component layout. It is represented by the MainLayout.razor ...