✅ Similar to Blazor Server
In Blazor, a component is a reusable piece of user interface (UI) that plays a vital role in defining specific sections of a web page or application. These components are created once and can be utilized multiple times, significantly increasing the development speed. This tutorial will cover the following topics:
A component in Blazor is a reusable piece of user interface that encapsulates logic and functionality. In other words, we can say that every application you will develop in Blazor will be made up of pieces called components. Components make the task of building UIs much easier and faster. You can see a UI broken down into multiple individual pieces call components and work on them independently and merge them all in a parent component which will be your final UI.
You can see in the below image, we have broken down the UI of Blazor School's homepage into individual components.
Components in Blazor consist of two main parts: an HTML template that defines what is rendered on the screen, and a collection of C# methods that handle logic and user interactions. The HTML template provides the visual structure of the component, while the C# methods define the component's behaviour and functionality. Together, these elements work in tandem to create a cohesive, interactive user interface.
It is important to note that a Razor Component (.razor) is not the same as a Razor Page (.cshtml). While both use Razor syntax, they serve different purposes and are used in different contexts. A Razor Page is used in ASP.NET MVC, while a Razor Component is used for building reusable UI elements in Blazor. Additionally, Blazor does not utilize Razor Pages as components, therefore it is crucial to not confuse the two.
The structure of a component typically consists of three sections:
There are four types of components:
@page
directive and allows for URL parameters to be passed to it. It is intended to be used on its own and not within another component.@page
directive and is intended to be used within another component to solve specific problems.LayoutComponentBase
and determines the layout of a page or website.