Dynamic Component in Blazor

-
Dynamic Component in Blazor

This blog is going to explain what a Dynamic Component is and how to use it. It is a built-in component used to render components by type. The Dynamic Component has two arguments which are type and parameter. Type is a component type and parameter is the parameter to be sent to the component.

Let's see how to implement Dynamic Components in Blazor. Below is a basic example of how to implement Dynamic Components. The "typeof(Counter)" is assigned to the Type property. It will render the Counter component in the index page.

index.razor
@page "/"
 
<h3>Dynamic Component Demo</h3>
<h4>Index Page</h4>
 
<DynamicComponent Type="typeof(Counter)" />

The following image is the output of the code snippets above. You can see here the Counter Component is rendered by Dynamic Component.

Dynamic Componenet

Pass Parameter

Let us see how to send the parameter to the component. The Dynamic Component sends the parameter as IDictionary<string, object>. The string is the name of the parameter and the object is the value of the parameter.

The following is a counter.razor component. Here I have added two property variables Title and current number with [parameter] attribute. These property variables receive values from Dynamic Components.

Counter.razor
@page "/counter"
 
<PageTitle>Counter</PageTitle>
 
<h1>@Title</h1>
 
<p role="status">Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public int currentCount { get; set; }
 
    private void IncrementCount()
    {
        currentCount++;
    }
}

In the below coding the parameters are passed as a dictionary.

index.razor
@page "/"
 
<h3>Dynamic Component Demo</h3>
<h4>Index Page</h4>
 
<DynamicComponent Type="typeof(Counter)"
    Parameters="@(new Dictionary<string, object>(){
                  {"Title", "Counter Demo"},
                  {"currentCount", 20}})" />

The following image is the output of the code snippets above. In the image you can see the title "Counter Demo" and the current count "20" is displayed.

Dynamic Component with Parameters

Let’s see another example. Here I have created a ComponentMetadata.cs class file.

ComponentMetadata.cs
public class ComponentMetadata
{
  public Dictionary<string, object> Parameters { get; set; } = new();
}

In the below code, a dropdown is added to select a required component name. In the select element option I have added Counter and FetchData components.

index.razor
@page "/"
 
<select @onchange="dropdownChange">
            <option value="">Select a value</option>
            <option value="@nameof(Counter)">Counter</option>
            <option value="@nameof(FetchData)">FetchData</option>
</select>
 
@if(type is not null)
{
        <DynamicComponent Type="type" Parameters="@components[type.Name].Parameters"/>
}
 
@code {
        private Dictionary<string, ComponentMetadata> components =
        new()
        {
            {
                "Counter",
                new ComponentMetadata
                {
                    Parameters = new Dictionary<string, object>(){{"Title", "Counter Demo"},
                                                                  {"currentCount", 10}}
                }
            },
            {
                "FetchData",
                new ComponentMetadata
                {
                    Parameters = new Dictionary<string, object>(){{"Title", "Weather forecast"}}
                }
            }
        };
 
    private Type? type;
 
    private void dropdownChange(ChangeEventArgs e)
    {
        type = e.Value?.ToString()?.Length > 0  ? Type.GetType($"SampleBlazorApp.Pages.{e.Value}") : null;        
    }
}

The output of the code above is below. As you can see here, when the user selects a component from the drop-down, it renders to the page with its parameter.

Dynamic Componet in Blazor

I hope this helps you. Keep coding.

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored
Read more

Exploring EventCallback in Blazor: Building Interactive Components

-
Image
Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais
Read more

A Step-by-Step Guide to Implementing Identity in ASP.NET Core MVC

-
Image
Are you ready to enhance your ASP.NET Core MVC project with the power of Identity? In this comprehensive guide, we'll walk you through the process of setting up and customizing the Identity system in your web application. By the end of this tutorial, you'll be able to implement secure user authentication and authorization for your ASP.NET Core project. Step 1: Create a New ASP.NET Core Web App Begin by opening Visual Studio and selecting "ASP.NET Core Web App (Model-View-Controller)" as your project template. Follow these steps: 1. Open Visual Studio and create a new project, selecting "ASP.NET Core Web App (Model-View-Controller)". 2. In the "Configure your project" window, enter the project name and choose the project's location. 3. In the "Additional Information" window, select the framework and choose "Individual Accounts" as the Authentication type. 4. Click "Create" to generate your project.
Read more