In this blog post, I will show you how to load the blazor component dynamically.
Assume you have two components, ComOne and ComTwo in the component folders and there is a select list on the page. When user select the component from the select list selected component will be dynamically loaded and render on the page.
Components/ComOne.razor
<h1>Com1</h1>
<p>@count</p>
<button @onclick="Increment">Increment</button>
@code{
private int count=0;
private void Increment(){
count++;
StateHasChanged();
}
}
Components/ComTwo.razor
<h1 style="color:red;">ComTwo</h1>
DynamicComponent.razor
@page "/dynamic"
@using DotNetGuru.Pages.Components
@using System.Reflection
<h1>DotNet Guru</h1>
<select @onchange="LoadComponent">
@foreach (var c in new[] {"Select Component", "ComOne", "ComTwo" })
{
<option>@c</option>
}
</select>
<h6>Component Will Be Loaded Here</h6>
@RenderFragment
@code {
private RenderFragment RenderFragment;
private readonly List<ComponentBase> componentList = new List<ComponentBase> { new ComOne(), new ComTwo() };
protected override void OnInitialized()
{
}
public void LoadComponent(ChangeEventArgs e)
{
RenderFragment = builder =>
{
var currentComponent = FilterByType(typeof(ComponentBase), e.Value.ToString());
if (currentComponent != null)
{
builder.OpenComponent(0, currentComponent);
builder.CloseComponent();
}
};
StateHasChanged();
}
public Type FilterByType(Type BaseType,string name)
{
return Assembly.GetExecutingAssembly().GetTypes()
.FirstOrDefault(t => BaseType.IsAssignableFrom(t) && t.Name == name);
;
}
}
In order to make demo simple I have already created a list of component as a string array in UI but you can scan the assembly and load the components.
Represents a segment of UI content, implemented as a delegate that writes the content to a RenderTreeBuilder.
Let’s understand the above code; most of the code is boilerplate. The only method related to the dynamic loading of components is LoadComponent. Blazor provides a powerful API RenderFragment delegate that rhat writes the content to a [RenderTreeBuilder]. In the following code, I am finding the component from the assembly, and then I am adding the component in RenderTree dynamically based on the type selected from the DropDown list
public void LoadComponent(ChangeEventArgs e)
{
RenderFragment = builder =>
{
var currentComponent = FilterByType(typeof(ComponentBase), e.Value.ToString());
if (currentComponent != null)
{
builder.OpenComponent(0, currentComponent);
builder.CloseComponent();
}
};
StateHasChanged();
}