Components, Razor Syntax & Data Binding

C# Instead of JavaScript

Blazor lets .NET developers build interactive web UI in C#, without writing JavaScript for application logic — components combine HTML-like markup with embedded C# using Razor syntax, in one .razor file per component.

A Component

@* Counter.razor *@
<h3>Count: @count</h3>
<button @onclick="Increment">Click me</button>

@code {
    private int count = 0;
    private void Increment() => count++;
}

@ embeds C# expressions/logic directly in markup — similar in spirit to JSX in React or a Vue single-file component combining template and logic.

Parameters & Two-Way Binding

@* Child component *@
[Parameter] public string Title { get; set; }

@* Used from a parent *@
<MyComponent Title="Hello" />

@* Two-way binding — keeps UI and C# variable in sync automatically *@
<input @bind="userName" />
@code { private string userName; }

[Parameter] passes data parent → child, like React props. @bind synchronizes an input's value with a C# variable both ways without manual event-handling code.

Lifecycle Methods

OnInitializedAsync, OnParametersSetAsync run at well-defined points in a component's life — commonly used to fetch initial data — the same general pattern as React's useEffect or Vue lifecycle hooks.