Post
Ask Question

How to Use EventCallBacks for Two-Way Communication Between Blazor Components

Blazor, a web framework by Microsoft that enables building interactive web applications using C# and .NET, provides a powerful way to communicate between child and parent components using EventCallbacks. EventCallbacks allow child components to raise events and send data to their parent components, enabling seamless communication and interaction between components in a Blazor application.

Let’s walk through an example demonstrating how to use EventCallbacks to communicate from a child component to a parent component in Blazor.

Consider a simple scenario where we have a parent component called “ParentComponent” and a child component called “ChildComponent”. The child component displays a button, and when the button is clicked, it raises an event to notify the parent component.

First, let’s create the ChildComponent:

<!-- ChildComponent.razor -->

<button @onclick="HandleButtonClick">Click me</button>

@code {
    // Define an EventCallback that will be used to raise an event to the parent component
    [Parameter] public EventCallback<string> OnButtonClick { get; set; }

    private async Task HandleButtonClick()
    {
        // Raise the event with a custom string value
        await OnButtonClick.InvokeAsync("Button clicked!");
    }
}

In this example, we’ve defined an EventCallback property called “OnButtonClick” that will be used to raise an event to the parent component. The child component has a button element with an @onclick directive that points to the “HandleButtonClick” method. When the button is clicked, the “HandleButtonClick” method is called, which raises the “OnButtonClick” event using the “InvokeAsync” method with a custom string value as the event argument.

Next, let’s create the ParentComponent that consumes the ChildComponent and handles the event:

<!-- ParentComponent.razor -->

<h1>Parent Component</h1>

<ChildComponent OnButtonClick="HandleChildButtonClick"></ChildComponent>

<p>@message</p>

@code {
    private string message;

    private void HandleChildButtonClick(string arg)
    {
        // Handle the event from the child component
        message = arg;
    }
}

In the ParentComponent, we’ve used the ChildComponent and passed the “HandleChildButtonClick” method as an event handler for the “OnButtonClick” event of the child component. When the event is raised by the child component, the “HandleChildButtonClick” method is called, which sets the “message” property to the event argument.

Now, when the button in the ChildComponent is clicked, the “HandleChildButtonClick” method in the ParentComponent will be called, and the “message” property will be updated with the event argument. As a result, the updated message will be displayed in the paragraph element in the ParentComponent.

In conclusion, Blazor’s EventCallbacks provide a convenient way to communicate between child and parent components in a Blazor application. Using EventCallbacks, child components can raise events and send data to their parent components, enabling seamless communication and interaction between components. This allows for more flexible and dynamic web applications that can respond to events and update their state accordingly.


Similar Articles