Blazor Blazor Components

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9

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"


<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
  • 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 @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 @.

Got any Blazor Question?