Search⌘ K

Basic Parameters in Blazor

Explore how to pass and configure basic parameters in Blazor Razor components. Understand the use of class parameters set by parent components and route parameters configured via URL paths. This lesson helps you customize component behavior by managing parameter values both inside the component markup and through navigation paths.

Blazor allows us to pass parameters from parent components to child components. In this lesson, we will cover basic Razor component parameters that are passed directly into a specific Razor component.

Basic Razor parameters flow
Basic Razor parameters flow

We will see some examples of basic Razor component parameters in the following project setup. This project has been set up with examples of all basic parameter types supported by Razor components.

<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 parameters demonstration

Basic Razor component parameters can be divided into the following categories:

  • Class parameters

  • Route parameters

However, as we shall see, there is very little difference between how they are set in the target component. The main difference is in how the value is passed in the source.

Adding class parameters to Razor components

...