Post
Ask Question

RenderFragment In Blazor

Introduction

If you have read previous article you'd know how 2 components in blazor communicate, either via "[parameters]" or events. There is another way you can achieve this. 

<Child>
    Message from Parent!
</Child>

Listing 1: Child component's instance in Parent component

If you run listing 1 as it is. It will throw you the following error!


Figure 1: Error of listing 1

So how do we enable this feature in Blazor?

This is where Render Fragment comes into the picture. Here, by using RenderFragment we can actually pass " Message from Parent! " to the child component. Let's see how?

In the child component we need a parameter, but it would be of RenderFragment type, there is one more thing you need to keep in mind, the name of the property should be ChildContent, as you can see in figure 1, it is expecting a property named " ChildContent ". We will see what happens if I try to change this name, but for now. let's code RenderFragment in the child component. 

[Parameter]
public RenderFragment? ChildContent { get; set; }

Listing 2: ChildContent in child component

Let me give you full disclosure of Parent.razor and Child.razor files with CSS and basic HTML.

@page "/Parent"
<style>
.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}
</style>
<h3 class="box" style="width:300px;padding:5px;">Parent</h3>
<br/>
<Child>
    Message from Parent!
</Child>
@code {
}

Listing 3: Parent.razor

<style>
    .boxChild {
        background-color: rgb(220, 210, 240);
        border: 5px solid #123524;
        width: 210px;
        margin-left: 30px;
        margin-bottom: 10px;
        padding:5px;
    }
</style>
<div class="box" style="width:300px;">
    <h3 style="padding:5px;">Child</h3>
    <div class="boxChild">
        <h4>@ChildContent</h4>
    </div>
</div>
@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Listing 4: Child.razor

Now run the project with these 2 components and get ready to see the results as below. 


Figure 2: Output of listing 3 and 4

Multiple Render Fragments

Let's make the most out of this feature while we're at it. Let's try to send multiple parameters at once.

@code {
    [Parameter]
    public RenderFragment? First_ChildContent { get; set; }
    [Parameter]
    public RenderFragment? Another_ChildContent { get; set; }
}

Listing 5: Child component - assigning multiple RenderFragments

In the Child component you can create multiple RenderFragments and with their name you can access them in the parent component.

<Child>
    <First_ChildContent>This is first child!!</First_ChildContent>
    <Another_ChildContent>Sent from second child.</Another_ChildContent> 
</Child>

Listing 6: Parent component - calling multiple RenderFragments


Figure 2: Multiple RenderFragments

Note
There is a subtle difference. When we had only one RenderFragment we explicitly had to mention the parameter name as ChildContent, that is because Blazor reads all the markup inside tag as one single content and then binds it with only RenderFragment available there. 

But when we have multiple RenderFragments it gets confused with whom to assign what, that's why we need to use child properties names as tags instead.


Similar Articles