How to Dynamically Render a Component in a Blazor Application

Gopi Govindasamy
June 2, 2021

In Blazor, we typically use either RenderTreeBuilder or Razor syntax (RenderFragment) to create dynamic components. In the classic approach, we check for the data type or for a condition to dynamically render a component. This necessitates manually maintaining the component’s state of visibility based on whether the component should be displayed or hidden, which is more complicated for complex data.

Beginning with .NET 6 Preview 1, the ASP.NET Core team introduced DynamicComponent. The use of DynamicComponent greatly reduces the complexity of dynamic component rendering when dealing with large amounts of complex data.

What is DynamicComponent?

DynamicComponent is a new built-in Blazor component that can be used to render dynamic components using its type and optional parameters. Let’s take a look at it with some code examples!

<DynamicComponent Type="@someType" />

The optional Parameters property is used to define the component properties as dictionary.

<DynamicComponent Type="@someType" Parameters="@param" />

@code {

  public Dictionary<string, object> param { get; set; }

}

Let’s see DynamicComponent in action.

Developing an expense tracker application

For this blog, we have developed an expense tracker application with dynamically created components by specifying their type.

A DropDownList contains four options for dynamically displaying the expense report. We render the expense tracker pages using several Syncfusion Blazor UI components.

Prerequisites

Refer to the Getting Started with Syncfusion Blazor Components in Blazor Server-Side App in Visual Studio 2019 documentation. It will provide a step-by-step procedure to create a Blazor server application and configure it with Syncfusion Blazor components.

The Blazor DropDownList includes object value binding support, allowing us to bind the data source object to the Value property. We obtain the name of the component class using the nameof() method and set it directly to the Type property of DynamicComponent by using the Type.GetType() method. Since we bind the data in the DropDownList, any change in the DropDownList component values will automatically update the DynamicComponent.

Refer to the following code example:

<SfDropDownList DataSource="@componentList" @bind-Value="@componentValue">
   <DropDownListFieldSettings Text="ComponentName" Value="ComponentType"></DropDownListFieldSettings>
</SfDropDownList>

<DynamicComponent Type="@(Type.GetType(componentValue.ComponentType))" Parameters="@componentValue.Param" />

@code {

    private Components componentValue { get; set; }
    public class Components
    {
        public string ComponentName { get; set; }

        public string ComponentType { get; set; }

        public Dictionary<string, object> Param { get; set; }
    }
   protected override async Task OnInitializedAsync()
    {
        this.componentList = new List<Components>()
        {
            new Components() { ComponentName = "Total Expenses", ComponentType = typeof(ExpPieChart).AssemblyQualifiedName, Param = new Dictionary<string, object>() { { "ExpenseData", ExpenseData } } }

            . . . 

            . . .
        };
        this.componentValue = componentList[0];
        await base.OnInitializedAsync();
    }
}

Dynamically rendering a component in a Blazor application

Resources

For more information, refer to the How to render dynamic components in Blazor application project demo.

Summary

Thank you for reading! In this article, we demonstrated how to use DynamicComponent in a Blazor server application to dynamically render new components. We also explained some details about sending parameters to the DynamicComponent.

Essential Studio for Blazor offers the largest collection of components for the Blazor platform. It has popular components like Charts, DataGrid, Scheduler, Diagram, Word Processor, and Maps. It also includes unique file-format libraries for manipulating Excel, Word, PDF, and PowerPoint files. Use them to build world-class applications!

Also, try our Blazor components by downloading a free 30-day trial, or check out our NuGet package. Feel free to peruse our online examples and documentation to explore other available features.

If you have questions, you can also contact us through our feedback portal, support forums, or Direct-Trac. We are always happy to assist you!

If you enjoyed reading this blog, then we think you shouldn’t miss the following,