Dynamically-rendered ASP.NET Core Blazor components

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();
    }

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru