Blazor components and linkage

Question

Just hoping to get some help with some of this Blazor functionality. I'm building a true SPA app with no navigation, which means I'm going to need a fair bit of linkage.

Im going to follow some fundamentals of say Winforms or UWP were you have access to controls. And treat Blazor components as if they were controls. Do as much work in C# as I can.

So far I know:

• For a child component, I can create an event callback, and register to it in the parent.
• I can store a reference to the child component with the @ref tag. Then access functions of the child component after OnRender has been completed.
• I can dynamically build a component using the builder.

But how do I pass a reference of the parent to the child? Like set a parameter of the child and pass "this".

The idea is that every child component of Index has a reference to the Index component. And the Index component has a reference to every child of Index.

So that way I can do things like when I click a button in the Header component. I can call parent.PopupComponent.Show("Title");

I know it can be achieved with callbacks, but I would like to be able to make any call I need, access any variable etc. Through the linkage of components. Without needing to set up an extra callback function for each step.

Thank you in advance :)

Answer 1

You can pass a reference to the parent component to a child component as a regular parameter, as for instance:

Child.razor

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

Parent.razor

@* Passing a parent reference to the child component*@
<Child Parent="this" />

@code {

} 

You can also pass a CascadingParameter to child components. This is useful when you want to pass a reference to the parent component to all the children, as for instance:

Child.razor

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

Parent.razor

 @* Passing a parent reference to the child components in the form of 
                                                           CascadingValue*@
 <CascadingValue Value=this>
 @ChildContent
 </CascadingValue>

 @code {

}

And this is bonus:

The following code snippet illustrate how to add a child component to a parent component, from which you can call properties of the child component :

protected override void OnInitialized()
{
    Parent.AddChild(this);
}

Note: The OnInitialized method is implemented on the child component, right ? And the word this refers to the current object; that is the child component, right ?

Hope this helps...

Answer 2

I just wanted to add this in as some people may find it useful when trying to build a Blazor app the same way I am.

Here is how I found a way to control what content is being loaded into a component, in my case I made an empty Flyout/Window component, with the content set as a render fragment. Note that the render fragment is private, the is because the content will be a BlazorComponent, defined in the ShowPopup() call.

Also worth noting that the component builder stuff will most likely become obsolete as they build on Blazor. This is low-level API, and as mentioned by the Developers. They will have something more useful in the future.

Child Component Code

<div>
    ...
    @childContent
</div>

@code
{
    private RenderFragment childContent { get; set; }

    public void ShowPopup(Type ComponentType)
    {
        childContent = CreateDynamicComponent(ComponentType);
        //Show popup logic....  
    }

    RenderFragment CreateDynamicComponent(Type T) => builder =>
    {
        builder.OpenComponent(0, T);
        builder.CloseComponent();
    };
}

Then the parent Code

<div>
    ...
    <button @onclick="@(e => PopupWindow.ShowPopup(typeof(BlazorComponentX)))">Load BlazorComponentX into Popup</button>
    <PopupWindow @ref="PopupWindow"></PopupWindow>
    ...
</div>


@code
{
    Public PopupWindow PopupWindow {get; set;}
}