C#: How to send Dynamic Razor Components from Server to Client in Blazor Wasm Hosted?

Question

I want to render dynamic razor components in Blazor wasm hosted project. The components are created in Razor Class Library using the IDynamicComponent interface. The Blazor server-side loads the dlls and stores them into an IEnumerable<Type>. The issue is that I can't send individual components of System.Type to the client-side via SignalR and cast to IDynamicComponent.

IDynamicComponent.cs

public interface IDynamicComponent
{
    IDictionary<Type,Type> InjectableDependencies { get; }
    IDictionary<string,string> Parameters { get; }
    string Name { get; }
    Type Component { get;}
}

Component Example

MyComponent.cs

public class MyComponent : IDynamicComponent
{
    public IDictionary<Type, Type> InjectableDependencies => new Dictionary<Type, Type>();
    public IDictionary<string, string> Parameters => new Dictionary<string, string>();
    public string Name => "Example1";
    public Type Component => typeof(Component1);

}

Component1.razor

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

Blazor Server-Side Loading the components

public IEnumerable<Type> Components { get; private set; }

// Loads the dlls and stores the components in the 'IEnumerable<Type>'
public void LoadComponents(string path)
{
    var components = new List<Type>();
    var assemblies = LoadAssemblies(path);

    foreach (var asm in assemblies)
    {
        var types = GetTypesWithInterface(asm);
        foreach (var typ in types) components.Add(typ);
    }
    Components = components;
}

// Gets the component by name
public IDynamicComponent GetComponentByName(string name)
{
     return Components.Select(x => (IDynamicComponent)Activator.CreateInstance(x))
            .SingleOrDefault(x => x.Name == name);
}

SignalR Function at the Server

 // Sends a component to client via SignalR when requested.
 public async Task GetPlugin()
 {
    // Converting component of System.Type to object to send to client
    string typeName = Component.FullName;
    Type type = GetTypeFrom(typeName);
    object obj = Activator.CreateInstance(type);
    string component = JsonConvert.SerializeObject(obj);
    
    await myHub.Clients.All.SendAsync("Plugin", component);
 }

private Type GetTypeFrom(string valueType)
        {
            var type = Type.GetType(valueType);
            if (type != null)
                return type;

            try
            {
                var assemblies = AppDomain.CurrentDomain.GetAssemblies();

                //To speed things up, we check first in the already loaded assemblies.
                foreach (var assembly in assemblies)
                {
                    type = assembly.GetType(valueType);
                    if (type != null)
                        break;
                }
                if (type != null)
                    return type;

                var loadedAssemblies = assemblies.ToList();

                foreach (var loadedAssembly in assemblies)
                {
                    foreach (AssemblyName referencedAssemblyName in loadedAssembly.GetReferencedAssemblies())
                    {
                        var found = loadedAssemblies.All(x => x.GetName() != referencedAssemblyName);

                        if (!found)
                        {
                            try
                            {
                                var referencedAssembly = Assembly.Load(referencedAssemblyName);
                                type = referencedAssembly.GetType(valueType);
                                if (type != null)
                                    break;
                                loadedAssemblies.Add(referencedAssembly);
                            }
                            catch
                            {
                                //We will ignore this, because the Type might still be in one of the other Assemblies.
                            }
                        }
                    }
                }
            }
            catch (Exception exception)
            {
                //throw my custom exception    
            }

            if (type == null)
            {
                //throw my custom exception.
            }

            return type;
        }

SignalR at Client-Side

The error occurs when trying to cast object to IDynamicComponent.

public IDynamicComponent Component;
    
hubConnection.On<string>("Plugin", (component) =>
{
    object obj = JsonConvert.DeserializeObject<object>(component);
    Console.WriteLine(obj.ToString());

    // Casting object to 'IDynamicComponent' to be able to render
    Component = (IDynamicComponent)obj; // Error occurs here

    UpdateBlazorUIEvent?.Invoke();
});

Browser Console Output

{ 
  "InjectableDependencies": {}, 
  "Parameters": {},
  "Name": "Counter",
  "Component": "PluginOne.Component1, PluginOne, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null",
}

Specified cast is not valid.

How can I successfully send a component (System.Type) to the client-side and cast to IDynamicComponent to render the UI?

MrC aka Shaun Curtis MrC aka Shaun Curtis · Accepted Answer · 2021-02-08T18:18:00

You can't pass Types through Json. That's exactly what the error says - Serialization and deserialization of 'System.Type' instances are not supported.

You need to use reflection to get the actual fully qualified class name as a string, pass that via IDynamicComponent, say myassembly.myclass, and then get a new instance of the object at the other end.

The code looks something like:

// In Code
var myclass = typeof(myComponent).AssemblyQualifiedName;

// Out code
var assembly = Assembly.GetExecutingAssembly();
var mytype = assembly.GetTypes().First(item => item.Name.Equals(className));
var myclass = Activator.CreateInstance(type);

There are similar problems with passing the generic type object. It bit me recently!

C#: How to send Dynamic Razor Components from Server to Client in Blazor Wasm Hosted?

1 Answers