Blazor Tutorial Blazor Components
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.
Component Class
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.
@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> @functions { int currentCount = 0; void IncrementCount() { currentCount++; } }
- 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.
Component Members
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
@functionsblock, 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 @.