A Razor component is a reusable Blazor UI unit. Its view uses Razor syntax to produce HTML, while C# properties and methods supply data and handle interaction. In Blazor Server, browser events reach server-side C# over a persistent connection, and updates return to the browser. That connection matters: if it is interrupted, the interactive UI cannot function. section 33.3.2 section 33.0
Define the usual component in a capitalized .razor file. Put markup and Razor expressions in the view; put supporting properties and methods in @code. Unlike a Razor Page, it has no page model or @model expression. Mark a property [Inject] to receive an application service. A component can instead use a separate C# class, or derive from ComponentBase and build its entire render tree in C#, though that is less expressive than markup. section 33.3.2 section 33.5.2
Wire components into an application according to where they appear:
- In a Razor Page or controller view, use a component element with its type and render mode. Server delivers the component’s displayed HTML over the persistent connection; Static renders HTML without client-side support. section 33.3.2
- Inside another component, use the child component’s name as an element, with matching capitalization. Mark configurable child properties [Parameter], then supply their values as element attributes. Parent and child can communicate through parameters and events. section 34.2 section 34.2.1
- For URL-selected content, configure a Router and give routed components @page directives. A [Parameter] property can receive a route segment; layouts supply shared content, and NavLink changes routes without reloading the document. section 10.1.3 section 35.2.4
An order table with two jobs
An administration screen can render the same OrderTable component twice: once for unshipped orders with a Ship button, and once for shipped orders with a Reset button. The parent supplies orders, labels and handlers as parameters. In the table, @onclick calls OrderSelected.InvokeAsync with the selected order ID. One table implementation serves both states instead of duplicating its markup. section 10.2.2
Events and bindings make the markup interactive: @onclick invokes a handler, while @bind connects an element value to a property. For forms, EditForm and input components update a model; OnValidSubmit calls a handler only after validation succeeds. A product editor can therefore share one component between create and edit routes. These interactions do not turn a Blazor form into an ordinary browser POST. section 33.3.2 section 10.3.5
Lifecycle methods provide places to initialize state, respond after parameters arrive and react to rendering. OnParametersSet is useful when setup depends on [Parameter] values; a routed component can implement IDisposable to clean up when it leaves the display. Service lifetime needs attention too: OwningComponentBase<T> aligns a repository’s lifetime with its component. section 35.3 section 10.4
The same core component syntax also works in Blazor WebAssembly, but execution and data access differ. Its generated C# runs in the browser; an editor uses HTTP requests to reach a web service rather than accessing Entity Framework Core through SQL. When navigating under a WebAssembly application’s base URL, use relative navigation targets to stay within that application. section 37.3.2 section 37.4.2
