Render tree structure of unknown depth using Blazor

Question

I'm using the following recursive function to try and render out an html accordion. It uses reflection to gather all property names and values of a given object. The object is a data tree structure of unknown depth/children etc.

@* Accordoin HTML Template *@

  
   
    
    Title
   

    



@code { 
public void BuildTree(object obj)
{
    if (obj == null) return;
    Type objType = obj.GetType();
    PropertyInfo[] properties = objType.GetProperties();
    foreach (PropertyInfo property in properties)
    {
        object propValue = property.GetValue(obj, null);
        if (property.PropertyType.IsPrimitive || property.PropertyType == typeof(string))
        {
            //Build accordion body
        }
        else if (typeof(IEnumerable).IsAssignableFrom(property.PropertyType))
        {
            //Build accordion header
            IEnumerable enumerable = (IEnumerable)propValue;
            if (enumerable != null)
                foreach (object child in enumerable)
                    BuildTree(child);
        }
        else
        {
            //Build accordion header
            BuildTree(propValue);
        }
    }
}

My question is how would I go about rendering the html in a recursive way?

I have tried using a RenderFragment as follows :

RenderFragment BuildTree(object obj)
{
if (obj == null) return @test;
Type objType = obj.GetType();
PropertyInfo[] properties = objType.GetProperties();
foreach (PropertyInfo property in properties)
{
    object propValue = property.GetValue(obj, null);
    if (property.PropertyType.IsPrimitive || property.PropertyType == typeof(string))
    {
       return @Some test markup
    }
    else if (typeof(IEnumerable).IsAssignableFrom(property.PropertyType))
    {
        IEnumerable enumerable = (IEnumerable)propValue;
        if (enumerable != null)
            foreach (object child in enumerable)
                BuildTree(child);
    }
    else
    {
        BuildTree(propValue);
    }
}
return @Done;
}

It builds but gives an error on runtime :

Unhandled exception rendering component: Cannot bind to the target method because its signature is not compatible with that of the delegate type.

I know there must be an idiomatic way to do this in blazor but I can't wrap my head around how recursion would work with render fragments.

user_3433178 · Answer

My 2 cents: components can be self-nested. For my brain, this is the easiest way to render nested components-- a kind of very physical recursion. I'm at work, so I couldn't finish a working solution for you, but hopefully the following template will be clear enough. If you want all branches to display, then drop the boolean logic completely or initialize ShowChildren to true instead of false;

Nestable.Razor

@if(ChildCollection is not null){
    
        @DisplayForThisObject
    
     @if(ShowChildren){
         foreach (var Child in ChildCollection){
            
         }
     }
}
else {
    @DisplayForThisObject;
}

@code {
    [Parameter]
    public object PassedObject {get; set;}
    IEnumerable

Render tree structure of unknown depth using Blazor

1 Answers