Multiple RenderFragments In Blazor | Learn Blazor

Introduction

In this article, we will learn how we implement multiple render fragments in Blazor. A piece of the UI to be rendered is represented by a render fragment in Blazor, a single RenderFragment is used to specify the location of a component's children. Moreover, providing multiple RenderFragments is also possible with Blazor in your component, you added several RenderFragment attributes. The [Parameter] attributes must be used. The Blazor framework is aware enough to understand the proper definition of a RenderFragment and can assist you if there are any compilation or usage difficulties with the Component.

Step 1

create a new project in visual studio and select Blazor WebAssembly App. Create two razor components first one is ParentComponent and the second one is ChildComponent.Now we have to define a page directive to give the path. 

@page "/ParentComponent"
<h3>Parent Child relation</h3>
@code {
}

we will add one new nav link in Navmenu.razor. 

<div class="nav-item px-3">
    <NavLink class="nav-link" href="ParentComponent">
            <span class="oi oi-people" aria-hidden="true"></span> parent-child 
    </NavLink>
</div>

Output

Step 2

In ChildComponent we will create one string property name as Title with [parameter]. Then create a div and pass the property as @Title

<div>
    <div class="alert alert-info">@Title</div>
</div>
@code {
    [Parameter]
    public string Title{ get; set; }
}

In Parent.razor page we have to pass ChildComponent  

<ProjectWeb_Server.Pages.component.NewFolder.ChildComponent Title="HEY !! From Parent Component"></ProjectWeb_Server.Pages.component.NewFolder.ChildComponent>

add this in _imports.razor to reduce component name 

@using ProjectWeb_Server.Pages.component.NewFolder

In Parent.razor 

<ChildComponent Title="HEY !! From Parent Component"></ChildComponent>

Output

Step 3

We will add RenderFragment property name as firstfragment which we use in Parent.razor page as a component.

  [Parameter]
    public RenderFragment firstfragment{ get; set; }

add one more piece of code in Child.razor page.

 <div class="alert alert-danger">@firstfragment</div>

And add this code to Parent.razor page.

  <firstfragment> hii !! render fragement this is from  parent side </firstfragment>

This is the way we can implement single render fragment in blazor.

Multiple RenderFragment 

Add one more renderfragment property in Child.razor page name as secondfragment 

[Parameter]
public RenderFragment secondfragment{ get; set; }

 Add one more piece of code in Child.razor page.

<div class="alert alert-success">@secondfragment</div>

Then use this property as component in Parent.razor page 

<secondfragment> multiple render fragement</secondfragment>

Output

ChildComponent.razor page 

<div>
     <div class="alert alert-info">@Title</div>
     <div class="alert alert-danger">@firstfragment</div>
     <div class="alert alert-success">@secondfragment</div>
</div>
@code {
    [Parameter]
    public string Title{ get; set; }
    [Parameter]
    public RenderFragment firstfragment{ get; set; }
    [Parameter]
    public RenderFragment secondfragment{ get; set; }
}

ParentComponent.razor page

@page "/ParentComponent"

<h3>Parent Child relation</h3>
<ChildComponent Title="HEY !! From Parent Component">
   <firstfragment> hii !! render fragement this is from  parent side </firstfragment>
   <secondfragment> multiple render fragement</secondfragment>
</ChildComponent>

@code {
}

Conclusion

This article was about Render Fragment with some examples to clear the concept of Render Fragment in Blazor.

If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below. Follow C# Corner to learn more new and amazing things about Blazor or to explore more technologies.

Thanks for reading and I hope you like it.