Your First Razor Component

Analogy categoryAnalogies

A Razor component is created by adding a .razor file whose name matches the component's class name (Pascal case, e.g. GreetingCard.razor); if you want it directly reachable by URL, you add an @page directive specifying the route at the top of the file. Once created, it can be dropped into any other component's markup simply by using its tag name, e.g. <GreetingCard Name="Ada" />, making component reuse as simple as writing an HTML-like tag.

🏏

Cricket analogy: Creating a component is like drafting a new player into your squad: once GreetingCard.razor is registered, you can 'select' it into any lineup (page) just by writing its name, the same way a captain slots a specialist bowler like Rashid Khan into any match XI.

Building GreetingCard.razor

A component receives input via parameters: public C# properties decorated with [Parameter] that the parent assigns as attributes when using the tag. Inside the markup, you reference these properties with @ (e.g. @Name), and any C# expression is fair game — string interpolation, method calls, conditional operators — as long as it's a valid expression rather than a statement.

🏏

Cricket analogy: Passing Name="Ada" into GreetingCard is like a team management assigning a specific role to a player before the toss — the component (player) is generic until parameters (role, batting order) are set for that particular match.

Handling Events and State

Components become interactive by wiring DOM events to C# methods using the @onclick, @oninput, @onsubmit, and similar attributes, and by storing mutable state in private fields that the markup reads. When an event handler mutates a field that markup depends on, Blazor automatically re-renders the component after the handler completes — you don't manually trigger a re-render for state changes made directly inside an event handler, though StateHasChanged() exists for cases like async callbacks outside the normal event pipeline.

🏏

Cricket analogy: It's like a scoreboard operator whose job is triggered automatically the instant a boundary is signalled by the umpire — you don't have to manually shout 'update the score,' the event (four runs) itself causes the board (UI) to refresh.

razor

@* Components/GreetingCard.razor *@
<div class="card">
    <h3>Hello, @Name!</h3>
    <p>You've clicked @clickCount times.</p>
    <button @onclick="HandleClick">Say hi again</button>
</div>

@code {
    [Parameter]
    public string Name { get; set; } = "World";

    private int clickCount = 0;

    private void HandleClick()
    {
        clickCount++;
    }
}

@* Usage from another page: *@
@* <GreetingCard Name="Ada" /> *@

Component names and their file names must match exactly and use Pascal case (e.g., GreetingCard.razor, not greetingCard.razor or greeting-card.razor). A lowercase-starting file name will not be recognized as a component tag and will instead be parsed as a literal HTML element, which is a common source of confusion for beginners.

A component's .razor file name (Pascal case) becomes its usable tag name in other components' markup.
The @page directive at the top of a component makes it directly routable by URL.
Public properties marked [Parameter] let a parent component pass data in as attributes.
Event attributes like @onclick and @oninput wire DOM events directly to C# methods.
Blazor automatically re-renders a component after an event handler that mutates render-relevant state finishes.
StateHasChanged() manually triggers a re-render for state changes outside the normal event pipeline, like async callbacks.
Component file names must start with an uppercase letter or they won't be recognized as components.

Practice what you learned

1. What naming convention must a Blazor component's .razor file follow to be usable as a tag?

2. How does a parent component pass data into a child component?

3. Which directive makes a component directly reachable by URL?

4. What happens after an event handler like an @onclick method finishes mutating a field used in markup?

5. When is StateHasChanged() typically needed?

Was this page helpful?

Project Structure and App.razor

Razor Syntax Basics

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

XAML Study Notes

.NET · 30 topics

Microsoft Technologies

WPF (Windows Presentation Foundation) Study Notes

.NET · 30 topics

Topics covered

#BlazorStudyNotes#MicrosoftTechnologies#YourFirstRazorComponent#Razor#Component#Building#GreetingCard#StudyNotes#SkillVeris#ExamPrep

Your First Razor Component