MSDN Documentation

Understanding Blazor Components

Blazor components are the fundamental building blocks of Blazor applications. They are reusable pieces of UI, built with C# and Razor syntax, that encapsulate logic and markup.

The Blazor Component Model

Blazor components are represented by .NET classes that inherit from Microsoft.AspNetCore.Components.ComponentBase. These classes can define:

• Razor Markup: HTML-like markup that defines the structure of the component.
• C# Logic: Code that handles component behavior, state, and event handling.
• Parameters: Properties that allow parent components to pass data down to child components.
• Event Callbacks: Mechanisms for child components to communicate events back to parent components.

Component Hierarchy

Blazor applications are structured as a tree of components. A parent component can render child components, and data flows down the hierarchy through parameters. Events can bubble up from child to parent using event callbacks.

Rendering Components

Components are rendered by Blazor's rendering engine, which updates the UI efficiently. This can be done:

• Server-Side (Blazor Server): Components render on the server, and the UI updates are sent to the client via SignalR.
• WebAssembly (Blazor WebAssembly): Components run entirely in the browser using WebAssembly.

Component Parameters

Parameters are used to pass data into components. They are defined as public properties decorated with the [Parameter] attribute.

<div>
    <h3>Hello, @Name!</h3>
    <p>@Message</p>
</div>

@code {
    [Parameter]
    public string Name { get; set; } = "World";

    [Parameter]
    public string Message { get; set; }
}

<WelcomeMessage Name="Blazor User" Message="Welcome to our Blazor application!" />
<WelcomeMessage Name="Developer" />

Component Events

Components can raise events to notify their parents about specific actions. This is typically done using EventCallback.

<button @onclick="OnClickHandler">@Text</button>

@code {
    [Parameter]
    public string Text { get; set; } = "Click Me";

    [Parameter]
    public EventCallback OnClickCallback { get; set; }

    private void OnClickHandler()
    {
        OnClickCallback.InvokeAsync();
    }
}

<MyButton Text="Save" OnClickCallback="@SaveData" />

@code {
    private void SaveData()
    {
        Console.WriteLine("Data saved!");
        // Implement save logic here
    }
}

Component Templates

Blazor supports component templates, allowing components to be more flexible by accepting content from their parent. This is often achieved using RenderFragment.

<div class="card">
    <div class="card-header">
        @Header
    </div>
    <div class="card-body">
        @ChildContent
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment Header { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

<Card>
    <Header>
        <h3>My Custom Card</h3>
    </Header>
    <ChildContent>
        <p>This is the content of the card body.</p>
        <button>Action</button>
    </ChildContent>
</Card>

Common Blazor Built-in Components

Blazor provides several useful built-in components to streamline development:

• ComponentBase: The base class for all Blazor components.
• EditForm: For handling form submissions and validation.
• InputBase: Base class for input components like InputText, InputNumber, etc.
• ValidationSummary and ValidationMessage: For displaying validation errors.
• NavLink: Similar to an anchor tag but automatically applies an "active" CSS class when the current URL matches its href.

Explore the official documentation for a comprehensive list and examples of built-in components.