What is a Component
A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. Blazor applications are created using components which are flexible, lightweight, and can be nested, reused, and shared between projects.
- A component is the base element of the Blazor application, i.e., every page is considered as a component in Blazor.
- It uses the combination of Razor, HTML and C# code as a component.
A component in Blazor ends up as a class including both the HTML markup to render along with the processing logic needed to inject data or respond to UI events.
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
int currentCount = 0;
- Blazor components are implemented in *.cshtml files using a combination of C# and HTML markup.
- The UI for a component is defined using HTML while dynamic rendering logic like loops, conditionals, expressions are added using an embedded C# syntax called Razor.
- In function block, we can define all the properties that are used in view markup, and the methods are bound with control as an event.
- When a Blazor app is compiled, the HTML markup and C# rendering logic are converted into a component class, and the name of the generated class matches the name of the file.
Members of the component class are defined in a
@functions block, and you can use more than one
@functions block in a component.
- In the
@functions block, component state such as properties and fields are specified along with methods for event handling or for defining other component logics.
- Component members can then be used as part of the component's rendering logic using C# expressions that start with @.