CODEWITHSUNDEEP
.netmethodsblazorcomponentswebapi
JMS
JMS

Reputation: 13

How can one access methods in a child template from a parent in .NET core 8 Blazor (and vice versa)?

`

Environment: .Net 8 Blazor WebApp Interactive render mode is Auto (Server and WebAssembly) and Interactive locations is Per page/component. Situation: I have multiple razor pages using common components (templates). I have set a number of Parameters, including select EventCallbacks. Questions:

  1. How can I call a method in the Templated component from the Parent razor page's code?

  2. Another related question is about accessing the Parent razor's methods from the Templated component; namely, is it possible to have an EventCallback in the template to return a value? If so, how?

  3. I have tried Parameters and EventCallbacks. I have used the "Callback".InvokeAsync(parameter) to call a an EventCAllback method in the parent, however, I also need to return values from this InvokeAsync call.

  4. In terms of having the Parent call a method in the child (templated component) the only approach that I have discovered is to register the component's instance with the parent and then call a method that is public in the component (which may violate best practices).

I just believe that I must be missing something; an easier and better approach to directly accessing methods in the child component. If I were building this in MAUI, then Interfaces might be the answer, however, I suspect that in .NET 8 there is a better, built in structure to handle this. I am hopeful that someone might clear this up for me.

Upvotes: 0

Views: 171

Answers (1)

fcd9
fcd9

Reputation: 167

In Blazor, you can achieve communication between a parent component and a child component via different ways:

Calling a method in the Templated component from the Parent razor page's code:

  1. Using @ref attribute:

    In the parent Razor page:

    <TemplateComponent @ref="templateRef" />

@code {
    private TemplateComponent templateRef;

    private void CallMethodInTemplateComponent()
    {
        templateRef.MethodInTemplate();
    }
}

    In the Templated component:

    @code {
    public void MethodInTemplate()
    {
        // Your logic here
    }
}

Accessing the Parent razor's methods from the Templated component:

  1. Using Parameters and EventCallbacks:

    In the parent Razor page:

    <TemplateComponent ParentMethod="@ParentMethod" />

@code {
    private void ParentMethod()
    {
        // Your logic here
    }
}

    In the Templated component:

    @code {
    [Parameter]
    public Action ParentMethod { get; set; }
}

    You can then invoke ParentMethod.Invoke() in the Templated component to call the parent's method.

  2. Returning a value from an EventCallback:

    In the Templated component:

    <button @onclick="CallParentMethod">Call Parent Method</button>

@code {
    [Parameter]
    public EventCallback<int> ParentMethod { get; set; }

    private async Task CallParentMethod()
    {
        var result = 42; // Your value
        await ParentMethod.InvokeAsync(result);
    }
}

    In the parent Razor page:

    <TemplateComponent ParentMethod="@HandleParentMethod" />

@code {
    private void HandleParentMethod(int result)
    {
        // Use the result here
    }
}

This approach allows you to both call methods in the Templated component from the parent and return values from the Templated component to the parent using EventCallback with a specified type

Upvotes: 0

Related Questions