Blazor Components

Blazor components are fundamental building blocks for creating interactive web UIs with .NET. They are self-contained units of UI that can be composed together to form complex applications.

What are Blazor Components?

Blazor components are reusable .NET classes that encapsulate:

• UI rendering logic (HTML markup).
• Component state.
• Event handling for user interactions.

Components are typically defined as C# classes that inherit from Microsoft.AspNetCore.Components.ComponentBase. Their UI is defined using Razor syntax (.razor files), which blends HTML markup with C# code.

Creating Your First Component

Let's create a simple WelcomeMessage component:

<div>
    <h2>@Greeting</h2>
    <p>Welcome to Blazor Components!</p>
</div>

@code {
    [Parameter]
    public string Greeting { get; set; } = "Hello";
}

In this example:

• The component renders a div containing an h2 and a p tag.
• @Greeting is an expression that renders the value of the Greeting property.
• The @code block defines the component's C# logic.
• The [Parameter] attribute marks the Greeting property as a property that can be set by a parent component.

Component Parameters

Components can accept input through parameters. Parameters are public properties of a component class marked with the [Parameter] attribute. This allows parent components to pass data down to child components.

<WelcomeMessage Greeting="Good Morning" />
<WelcomeMessage Greeting="Welcome Back" />

In this scenario, the WelcomeMessage component will be rendered twice, each with a different value for the Greeting parameter.

Component Rendering

Blazor uses a diffing algorithm to efficiently update the DOM. When the state of a component changes, Blazor re-renders the component and compares the new output with the previous output. Only the differences are applied to the actual DOM, minimizing overhead.

Component Hierarchy and Composition

Components can be nested within other components, forming a hierarchical structure. This promotes reusability and maintainability.

Component Lifecycle

Blazor components have a lifecycle with several methods that are invoked at different stages of their existence:

• OnInitializedAsync(): Called when the component is initialized and its parameters are set. Ideal for fetching initial data.
• OnParametersSetAsync(): Called when parameters are set or changed.
• OnAfterRenderAsync(): Called after the component has been rendered to the DOM. Useful for interacting with JavaScript or performing DOM-specific actions.

<p>Count: @counter</p>

@code {
    private int counter;

    protected override void OnInitialized()
    {
        counter = 0;
        Console.WriteLine("Component Initialized");
    }

    protected override void OnParametersSet()
    {
        Console.WriteLine("Parameters Set");
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Console.WriteLine("Component Rendered for the first time");
        }
        else
        {
            Console.WriteLine("Component Re-rendered");
        }
    }
}

Conclusion

Blazor components provide a powerful and flexible way to build modern, interactive web applications using C# and .NET. By mastering components, you can build highly scalable and maintainable UIs.