How to create a component dynamically through its assembly type path and reflection?

[CuteLeon]

Hi:
I am going to show a component in my page dynamically. I can create a component instance via reflection, but how can I render this instance to the page?
Thanks.

[SteveSandersonMS]

You shouldn't instantiate the component yourself. You need the renderer to instantiate it for you, because then it becomes part of the component hierarchy, gets wired into all the re-rendering logic, and has its lifecycle managed by the framework.

One way to do this is create a class called RenderingHelpers containing:

public static class RenderingHelpers
{
    public static readonly Func<Type, IDictionary<string, object>, RenderFragment> RenderComponent = (componentType, parameters) => builder =>
    {
        builder.OpenComponent(0, componentType);

        if (parameters != null)
        {
            foreach (var kvp in parameters)
            {
                builder.AddAttribute(1, kvp.Key, kvp.Value);
            }
        }

        builder.CloseComponent();
    };
}

Then inside any of your .razor components, you can do things like:

@RenderingHelpers.RenderComponent(typeof (Counter), null)

... to render a component by type name and optionally pass a dictionary of parameters.

[CuteLeon]

Hi @SteveSandersonMS :
Thanks for reply.
I readed document on MSDN, and find that RenderTreeBuilder is the best way to do what I want.
I implemented this in my project:
https://github.com/CuteLeon/HackSystem/blob/master/HackSystem.Web.Scheduler.Program/Launcher/ProgramLauncher.cs

    public class ProgramLauncher : IProgramLauncher
    {
        private int availablePID = 0;
        private readonly ILogger<ProgramLauncher> logger;
        private readonly IPublisher<ProgramLaunchMessage> publisher;
        private readonly IProgramContainer programContainer;

        public ProgramLauncher(
            ILogger<ProgramLauncher> logger,
            IPublisher<ProgramLaunchMessage> publisher,
            IProgramContainer programContainer)
        {
            this.logger = logger;
            this.publisher = publisher;
            this.programContainer = programContainer;
        }

        private int GetAvailablePID()
            => this.availablePID++;

        public ProcessEntity LaunchProgram(QueryBasicProgramDTO basicProgram)
        {
            var process = new ProcessEntity()
            {
                PID = this.GetAvailablePID(),
            };
            this.logger.LogInformation($"Program Launcher：Name={basicProgram.Name} ({process.PID})");

            var programComponentType = this.GetProgramComponentType(basicProgram.AssemblyName, basicProgram.TypeName);
            var programEntity = new ProgramEntity() { Name = basicProgram.Name };

            this.logger.LogInformation($"Program Launcher：Type={programComponentType.FullName}");
            process.ProgramRenderFramgment = builder =>
            {
                builder.OpenRegion(process.PID);
                builder.OpenComponent(0, programComponentType);
                builder.AddAttribute(1, nameof(ProgramComponentBase.ProgramEntity), programEntity);
                builder.AddComponentReferenceCapture(2, reference =>
                {
                    process.ProgramComponent = (ProgramComponentBase)reference;
                });
                builder.SetKey(process.PID);
                builder.CloseComponent();
                builder.CloseRegion();
            };

            this.logger.LogInformation($"Program Launcher：Program launched.");
            this.programContainer.AddProcess(process);
            this.publisher.Publish(new ProgramLaunchMessage());
            return process;
        }

        private Type GetProgramComponentType(string assemblyName, string typeName)
        {
            var assembly = Assembly.Load(new AssemblyName(assemblyName));
            var type = assembly.GetType(typeName);
            return !typeof(ProgramComponentBase).IsAssignableFrom(type)
                ? throw new TypeLoadException($"The target program type must derive from {typeof(ProgramComponentBase).Name}")
                : type;
        }
    }

[SteveSandersonMS]

I would generally recommend trying to minimize the amount of manual rendertreebuilder logic you write. It's easy to make small mistakes that would result in suboptimal diffing performance, or even illegal trees and undefined behavior. For example there is a mistake in the logic you've posted above (passing process.PID as a region sequence number instead of a constant, which can result in suboptimal diffing performance). It's much better to use .razor syntax to define rendering logic as the compiler will produce the desired results.

The RenderComponent fragment I suggested above is as minimal as possible to avoid risks of such mistakes.

[CuteLeon]

Hi @SteveSandersonMS:
If you're interested in looking at my open source project, you'll see that I'm going to design and implement a web operating system.https://github.com/CuteLeon/HackSystem
In this project, every "program" is a component. When I want to start a program, I will get the type name of the component required by the program, instantiate and render the component through RenderTreeBuilder, and assign a PID to the component instance, that is process ID. So PID won't be a constant because you don't know when the user will start what program.
But the PID will be bound to an instance of the component and incremented when a new program is started, just like a real operating system does.
Every time system need to render again, the render tree can find the section corresponding to the component instance through PID. I don't think this design will cause performance problems of the rendering tree?
I want to hear your opinion. Thanks.

[CuteLeon]

ProgramComponents:
https://github.com/CuteLeon/HackSystem/tree/master/HackSystem.Web.SystemProgram

Scheduler of Program (Not finish):
https://github.com/CuteLeon/HackSystem/tree/master/HackSystem.Web.Scheduler.Program

[SteveSandersonMS]

https://gist.github.com/SteveSandersonMS/ec232992c2446ab9a0059dd0fbc5d0c3

[CuteLeon]

I have readed this document and the exmple in it before, and I understand why the sequencenumber should be a fixed value, but in my project, I can make sure the PID of component instance will be fixed during the system running, and the PID will not be duplicated, I think it's enough to protect pefermance of RenderTree.
Ro do you have any other way to do this: render components dynamically and randomly according to their types and capture references to component instances during the project run?