In this article, we will understand about a .NET6 feature that is built-in 'DynamicComponent' in the Blazor application.
DynamicComponent:
In Blazor from .NET6 introduced a built-in component that is 'DynamicComponent' for dynamic rendering of the razor components. So using DynamicComponent we can render different types of components very easily without using any conditional logic. Also can pass appropriate parameters to their respective components on rendering dynamically.
Create A .NET6 Blazor WebAssembly Application:
Let's create a .Net6 Blazor WebAssembly sample application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code(using .NET CLI commands) to create any.Net6 application. For this demo, I'm using the 'Visual Studio Code'(using the .NET CLI command) editor.
CLI command
dotnet new blazorwasm -o Your_Project_Name
dotnet new blazorwasm -o Your_Project_Name
Example Using DynicComponent:
By default on creating project we have 3 components like 'Index.razor', 'Counter.razor', 'FetchData.raozr'. Now in 'Index.rzor' we are going to add a dropdown whose values are our component types of 'Counter.razor', 'FetchData.razor'. So on changing the dropdown value we have to dynamically render the component.
Index.razor:(Html Part)
@page "/" <PageTitle>Index</PageTitle> <div class="container"> <div class="row"> <div class="col col-md-4 offset-md-3"> <select class="form-select" aria-label="Default select example" @onchange="OnComponentSelect"> <option value="">-Select-</option> <option value="@(nameof(Counter))">Counter Component</option> <option value="@(nameof(FetchData))">Fetch Data Component</option> </select> </div> </div> <div class="col mt-4"> @if (selectedComponent != null) { <DynamicComponent Type="@selectedComponent"></DynamicComponent> } </div> </div>
- (Line: 8-12) Rendered the dropdown whose values are the names of the components. The 'onchange' event is registered with the 'OnComponentSelect' method.
- (Line: 16-19) The 'selectedComponent' is a 'System.Type' variable that stores the component selected type. The 'DynamicComponent' rendered and its 'Type' property used input our selected component type.
@code { private Type? selectedComponent; private void OnComponentSelect(ChangeEventArgs e) { selectedComponent = e?.Value?.ToString()?.Length > 0 ? Type.GetType($"Dot6.Bwasm.DynamicComp.Demo.Pages.{e.Value}") : null; } }
- (Line: 2) Declared variable 'selectedComponent' of type 'System.Type'.
- (Line: 3-7) The 'OnComponentSelect' invokes on dropdown change. Assigning the selected component type to 'selectedComponent' variable.
Parameters:
Sometimes we have to pass parameters to our component, the 'DynamicComponent' also supports the parameter and we can pass the parameters of the respective component very easily.
First, let's update our 'Counter.razor' and 'FetchData.razor' to accept the input parameter by decorating their properties with the '[Parameter]' attribute.
Counter.razor:
<!-- existing code hidden for display purpose --> <h1>@Title</h1> @code { [Parameter] public string Title{get;set;} = "Counter"; [Parameter] public int currentCount { get; set; } }FetchData.razor:
<!-- Code hidden for display purpose --> <h1>@Title</h1> @code { [Parameter] public string Title { get; set; } = "Weather forecast"; }Now let's create a model to store the component property name and their value.
Models/ComponentProp.cs:
namespace Dot6.Bwasm.DynamicComp.Demo.Models; public class ComponentProps { public Dictionary<string, object> Props { get; set; } = new Dictionary<string, object>(); }Now let's update our 'Index.razor' component to pass component properties dynamically.
Index.razor:
<!-- --> <div class="container"> <div class="col mt-4"> @if (selectedComponent != null) { <DynamicComponent Type="@selectedComponent" Parameters="@componentProps[selectedComponent.Name].Props"></DynamicComponent> } </div> </div> @code { private Dictionary<string, ComponentProps> componentProps = new() { { "Counter", new ComponentProps() { Props = new() {{"Title", "My Counter"}, {"currentCount", 5}} } }, { "FetchData", new ComponentProps() { Props = new() {{"Title", "My Fetch Data"}} } } }; }
- (Line: 9) Passing the dictionary of selected component properties.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information built-in DynamicComponent in the Blazor application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment