'Blazor DynamicComponent In .Net 6 And RenderFragment

Based on this article, I implemented the following code

https://blog.elmah.io/rendering-dynamic-content-in-blazor-wasm-using-dynamiccomponent/

There is a problem implementing the RenderFragment in the DynamicComponent

File ComponentContainer.razor

<div @class="class">
    @Container_Content    
</div>

    [Parameter]
    public string class { get; set; };

    [Parameter]
    public RenderFragment RenderFragment_Content { get; set; }

File appsettings.json

{
  "content": [
    {
      "type": "ComponentContainer",
      "parameters": {
        "class": "container"
        "RenderFragment_Content": {
          "type": "ComponentContainer",
          "parameters": {
            "class": "container"
          }
        }
      }
  ]
}

File Index.razor

@using Microsoft.AspNetCore.Components;
@using Shahab.Client.Pages.Components
@using Shahab.Client.Pages.Components.Controls
@using Shahab.Client.Pages.Components.Controls.Container

    @foreach (var Component in Components)
    {
        <DynamicComponent [email protected] [email protected] />
    }

@code {
    protected List<(Type type, Dictionary<string, object> parameters)> components { get; set; }

    //OnInitializedAsync
    protected async override Task OnInitializedAsync()
    {
        components = Configuration
    .GetSection("content")
    .GetChildren()
    .Select(component =>
        (
            type: Type.GetType($"Shahab.Client.Pages.Components.Controls.Container.{component.GetValue<string>("type")}"),
            parameters: component
                .GetSection("parameters")
                .GetChildren()
                .ToDictionary(p => p.Key, p => p.Get<object>())
        )
    )
    .ToList();
    }
}

enter image description here

My goal is to put the components together in runtime, even nested.(like page designer sharepoint)

There are two incomplete ways to do this.

1- Using DynamicComponent 2- Using RenderTreeBuilder

Both of these solutions do not work in practice when used in nested(RenderFragment) components.

And a complete way to generate files in run time.(generate .razor)

But the problem with this method is that it is compile in runtime.

(in asp.net web-form and asp.net core/mvc you can use AddRazorRuntimeCompilation method But not work in Blazor)

What is your solution to this challenge ?

json blazor

Solution 1:^[1]

You try to deserialize the following to a RenderFragment:

{
   "type": "ComponentContainer",
   "parameters": {
      "class": "container"
   }
}

Firstly, you can't make a simple deserialisation from the following to a RenderFragment as RenderFragment is a Delegate type.

Secondly, I don't see how this would match the RenderFragment type if it could be deserialized.

Solution 2:^[2]

DynamicComponent Parameters accept a dictionary,So you need to create a RenderFragment delegate to add to the dictionary

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	kristoffer strube
Solution 2	GeLiang

'Blazor DynamicComponent In .Net 6 And RenderFragment

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]