Render component dynamically in Blazor using List

Question

I am trying to render component dynamically based on string List.

Let's List values which contains Component Name.

For example:

List<string> componentName = new List<string>() { "SurveyPrompt", "FetchData","Counter" };

Based on above list my component should render.

In Blazor, we have DynamicComponent in which it will generate Dynamic component based on component Type List. Below code is for reference.

Blazor page

<div class="container-fluid">
      <div class="row" >
            <div class="col-md-12">
                <div class="d-flex flex-wrap" style="height: 200px;">

                 @foreach (var component in components)
                {
                    <DynamicComponent Type=@component.type Parameters=@component.parameters />
                }
            </div>
        </div>
    </div>
</div>

Based on components list it going to render components

@code {
                
                 public List<(Type type, Dictionary<string, object> parameters)> components = new List<(Type type, Dictionary<string, object> parameters)>()
    { (typeof(SurveyPrompt), new Dictionary<string, object>() { }) };
                }

Here, how can I pass component name as string and convert it into Blazor Component?

So basically you are look for how to convert `string` to `Type`. This might help: https://stackoverflow.com/questions/11107536/convert-string-to-type-in-c-sharp — Dimitris Maragkos, Oct 12 '22 at 11:04

score 1 · Accepted Answer · answered Oct 13 '22 at 05:11

I have accomplish this by getting all assembly by default and check based on my string List data

 public List<(Type type, Dictionary<string, object> parameters)> components = new List<(Type type, Dictionary<string, object> parameters)>();



 Assembly assembly = Assembly.GetEntryAssembly();
                    Type[] assemblyType = assembly.GetTypes();
    
                    for (int i = 0; i < assignedFeatureList.Count; i++)
                    {
                        Type typeComponent = assemblyType.Where(x => x.Name.Contains(assignedFeatureList[i])).FirstOrDefault();
                        if (typeComponent != null)
                        {
                            (Type type, Dictionary<string, object> parameters) item;
    
                            item.type = typeComponent;
                            item.parameters = new Dictionary<string, object>();
    
                            components.Add(item);
    
                        }
                    }

score 1 · Answer 2 · answered Oct 15 '22 at 06:36

You can wrap this functionality into a collection class with error checking:

public record ComponentData(Type ComponentType, Dictionary<string, object> Parameters) { }

public class ComponentList : IEnumerable<ComponentData>
{
    private readonly List<ComponentData> _components = new List<ComponentData>();
    private readonly Assembly _assembly;

    public ComponentList(Assembly assembly)
        => _assembly = assembly;

    public bool TryAdd(string componentName, Dictionary<string, object> parameters)
    {
        var comp = _assembly.GetTypes()
            .SingleOrDefault(item => item.Name.Equals(componentName) && item.IsAssignableTo(typeof(Microsoft.AspNetCore.Components.IComponent)));

        if (comp is not null)
            _components.Add(new ComponentData(comp, parameters));

        return comp is not null;
    }

    public IEnumerator<ComponentData> GetEnumerator()
        => _components.GetEnumerator();

    IEnumerator IEnumerable.GetEnumerator()
        => this.GetEnumerator();
}

Awesome answer. Saved me a lot of time! – clamchoda May 07 '23 at 15:50 — clamchoda, May 07 '23 at 15:50

Render component dynamically in Blazor using List

2 Answers2