CODEWITHSUNDEEP
c#blazormaui-blazor
Vitaliy
Vitaliy

Reputation: 35

How to get parent component from child component in .Net Maui Blazor Hybrid/Blazor

For example, I have a home component, which is now shown in @body Inside home there is a child1 component, inside child1 there is a child2. In child2 I have a DoSomething method. How do I access child1 or home in this method? I only came up with the idea of creating a public static action DoSomethingInvoked in child2 and calling it in DoSomething. Accordingly, I can subscribe in home and child1 in onItialized and unsubscribe in Dispose. But it seems to me that this solution is clearly not the best and most likely there are some other implementation options. But I couldn't find anything special. Can you suggest some Microsoft documentation on this topic?

Upvotes: 0

Views: 745

Answers (2)

GeKu
GeKu

Reputation: 63

I did not clearly find out what you are exactly trying to do, so one way is what kurt already explained which is especially usefull when it comes to passing parameters down the tree.

If this is not the subject or you do not want to pass in a whole parent object, or it is more like every of some types of your component needs some shared functionality it would be a good approach to create an extended base component class all your relevant components inherit from and itselfe inherits from ComponentBase. You also may extend your MainLayout same way.

You could also, if you go with Kurts answer, only pass an Action, to limit access to only this particular functionality.

Upvotes: 0

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

You can use cascading values to pass values down a hierarchy of components - this includes references to the top-level components themselves.

Suppose you have a parent component that contains child components (you haven't posted any code, so I have to come up with my own example).

ParentComponent.razor

<ChildComponent></ChildComponent>

You can use a <CascadingValue Value="SOME_VALUE"> that allows any descendant component to use whatever value is set. In this case I am going to set the value to be a reference to the parent component itself.

ParentComponent.razor

<CascadingValue Value="this">
  <ChildComponent></ChildComponent>
</CascadingValue>

The reference to the parent component can then be injected into the child components using a CascadingParameter attribute.

ChildComponent.razor

<div>Some child content</div>

@code {
  // This value will automatically be set
  // because the type matches. 
  // You can also name cascading values to disambiguate.
  [CascadingParameter]
  public ParentComponent Parent {get; set;}
}

This allows you to interact with the parent component from the child component.

You could add a public method to the parent component:

ParentComponent.razor

<ChildComponent></ChildComponent>
<h3>Messages</h3>
@foreach (string message in Messages)
{
    <div>@message</div>
}

@code {
    private List<string> Messages {get; set;} = new();

    public void Notify(string message)
    {
        Messages.Add(message);
        StateHasChanged();
    }
}

This can be called from the child:

ChildComponent.razor

<button @onclick="@OnButtonClick">Notify parent</button>

@code {
    [CascadingParameter]
    public Parent Parent {get; set;}

    private void OnButtonClick()
    {
        Parent.Notify("Hello from the child component");
    }
}

Working example: https://blazorfiddle.com/s/g98zn4zk

The docs: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-8.0

Upvotes: 0

Related Questions