How to Dynamically Render a Component in a Blazor Application

How to Dynamically Render a Component in a Blazor Application

This article explains about how to render dynamic components in a Blazor application based on the custom type specified with code examples. How to Dynamically Render a Component in a Blazor Application. In Blazor, we typically use either RenderTreeBuilder or Razor syntax (RenderFragment) to create dynamic components.

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

  • Visual Studio 2019
  • .NET 6 Preview 1

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.

blazor tips and tricks web productivity webassembly

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

top 30 Python Tips and Tricks for Beginners

In this post, we'll learn top 30 Python Tips and Tricks for Beginners

Blazor for ASP.NET Web Forms Developers PDF

In this blog post, I will share the Free e-book: Blazor for ASP.NET Web Forms Developers PDF. This book is great for ASP.NET Web Forms developers looking for guidelines. As well as strategies for migrating their existing apps to a modern, open-source, and cross-platform web framework.

5 Top Web Design and Development Tips for an Awesome Web App

Web application development has come a long way since the beginning of the World Wide Web. The web environment today uses HTML and CSS to view data and...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

10 Steps to Replace REST Services with gRPC-Web in Blazor WebAssembly

In modern web applications, the common way data is exchanged between client and server is through REST (representational state transfer) services. JSON is the standard file format for this two-way communication.