Calling a method in the parent component from a child component using blazor server

Question

I am using Blazor server for my development and have a Parent component below called EventCallBackParent.

        @page "/eventcallbackparent"

        <h3>EventCallBackParent</h3>

        <div>
            <EventCallBackChild onDoneButtonClicked=" "></EventCallBackChild>
        </div>

Here is the c# class/code for my Parent component

        public partial class EventCallBackParent
            {

                public async void Done()
                {
                    //Call a method here
                    ModalDisplay = "none";
                    ModalClass = "";
                    StateHasChanged();
                }
            }

Here is what my child component looks like

        <h3>EventCallBackChild</h3>

        <div class="row align-items-center py-3">
            <div class="col-auto d-flex align-items-center">
                <div class="card" @onclick="DoneButtonClicked">
                    <div class="card-body">
                        <p>Standard</p>
                    </div>
                </div>
            </div>
        </div>


        @code {
         
            [Parameter]
            public EventCallback onDoneButtonClicked { get; set; }

            protected async Task DoneButtonClicked()
            {

            }
        }

Here is what I want to happen. When the standard card is clicked I want to call the Done method in my parent component. Is this possible? If yes, how can I go about it?

Answer 1

Since you have already declared an EventCallback parameter in your child component, you just need to invoke that callback within the DoneButtonClicked method:

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

protected async Task DoneButtonClicked()
{
    await onDoneButtonClicked.InvokeAsync();
}

Inside your parent component, you will then have to link this onDoneButtonClicked parameter of the child component with your parent component’s Done method:

<div>
    <EventCallBackChild onDoneButtonClicked="Done"></EventCallBackChild>
</div>