Blazor - Call a recursive function inside code

Question

I am implementing a tree view using FluentUI. I have written a recursive function. For child nodes I am trying to call a function. There is no build error. But when I run the project it closes without any error.

void ShowTreeData(List<xxx> propertyList)
{
    @foreach (var property in propertyList)
    {       
        if (true)
        {            
            var children = xxx.ToList();
            <FluentTreeItem Text="@jsonName">
                @{
                    ShowTreeData(children);
                }
            </FluentTreeItem>
        }
        else
        {
            <FluentTreeItem Text="@jsonName"></FluentTreeItem>
        }
    }
}

The below part is not working

<FluentTreeItem Text="@jsonName">
     @{
      ShowTreeData(children);
      }
</FluentTreeItem>

But when we use plain HTML tags its working.

<div>
    @{
        ShowTreeData(children);
    }
</div>

Any solution to overcome the calling functions inside component?

Attaching the full code below

@using System.Text.Json
@using Microsoft.JSInterop
@using Newtonsoft.Json
@using Newtonsoft.Json.Linq
<h3>Json View</h3>

<FluentGrid Spacing="3" Justify="JustifyContent.FlexStart">
    <FluentGridItem xs="12" sm="6">
        <FluentTreeView>
            @BuildFirstFragment
        </FluentTreeView>
    </FluentGridItem>
</FluentGrid>

@code {

    private RenderFragment BuildFirstFragment => __builder =>
    {
        var jsonDoc = JsonDocument.Parse(json);
        JsonElement docRoot = jsonDoc.RootElement;
        List<JsonProperty> children = docRoot.EnumerateObject().OfType<JsonProperty>().ToList();

        BuildTreeItemFragment(children);

    };

    private RenderFragment<List<JsonProperty>> BuildTreeItemFragment => propertyList => __builder =>
    {
        @foreach (var property in propertyList)
        {
            var jsonName = property.Name;
            var jsonVal = property.Value;
            if (jsonVal.ValueKind == JsonValueKind.Object)
            {
                var jsonText = jsonVal.GetRawText();
                var jsonDoc = JsonDocument.Parse(jsonText);
                JsonElement docRoot = jsonDoc.RootElement;
                var children = docRoot.EnumerateObject().OfType<JsonProperty>().ToList();
                <FluentTreeItem Text="@jsonName">
                    @BuildTreeItemFragment(children)
                </FluentTreeItem>
            }
            else if (jsonVal.ValueKind == JsonValueKind.Array)
            {
                var jsonText = jsonVal.GetRawText();
                var jsonDoc = JsonDocument.Parse(jsonText);
                JsonElement docRoot = jsonDoc.RootElement;
                var arrayElements = docRoot.EnumerateArray().Select(x => x as Nullable<JsonElement>).ToList();
                foreach (JsonElement jElm in arrayElements)
                {
                    if (jElm.ValueKind == JsonValueKind.String)
                    {

                    }
                    else
                    {
                        var children = jElm.EnumerateObject().OfType<JsonProperty>().ToList();
                        <FluentTreeItem Text="@jsonName">
                            @BuildTreeItemFragment(children)
                        </FluentTreeItem>
                    }
                }
            }
            else
            {
                <FluentTreeItem Text="@jsonName"></FluentTreeItem>
            }
        };
    };
}

@code {
    string json = @"{
    ""name"": ""Adeel Solangi"",
    ""language"": ""Sindhi"",
    ""id"": ""V59OF92YF627HFY0"",
    ""bio"": ""Donec lobortis eleifend condimentum. Cras dictum dolor lacinia lectus vehicula rutrum. Maecenas quis nisi nunc. Nam tristique feugiat est vitae mollis. Maecenas quis nisi nunc."",
    ""version"": 6.1,
    ""subitmes"": {
        ""name"": ""Afzal Ghaffar"",
        ""language"": ""Sindhi"",
        ""id"": ""ENTOCR13RSCLZ6KU"",
        ""bio"": ""Aliquam sollicitudin ante ligula, eget malesuada nibh efficitur et. Pellentesque massa sem, scelerisque sit amet odio id, cursus tempor urna. Etiam congue dignissim volutpat. Vestibulum pharetra libero et velit gravida euismod."",
        ""version"": 1.88
    }
}";
}

Answer 1

Not sure why your code isn't working: without an MRE it's difficult to debug.

Here's a variant on an answer I did a short while ago on a similar issue with Mud Blazor's List View.

The original question: C# MudBlazor Trying to Populate a Treeview With List<T>

I've adapted the code to FluentUi.

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<p style="margin-bottom: 1rem;">
    Welcome to your new app.
</p>

<FluentTreeView @bind-CurrentSelected=currentSelected>
    @BuildTreeFragment
</FluentTreeView>

<FluentCard>
    <p>Current selected tree item is @currentSelected?.Text</p>
</FluentCard>


@code {
    FluentTreeItem? currentSelected;

    private IEnumerable<Taxonomy> _items = DataProvider.Items;

    private RenderFragment BuildTreeFragment => __builder =>
    {
        var subItems = _items.Where(item => item.ParentId == 0);

            @foreach (var item in subItems)
            {
                @BuildTreeItemFragment(item)
            }
    };

    private RenderFragment<Taxonomy> BuildTreeItemFragment => taxonomy => __builder =>
    {
        var items = _items.Where(item => item.ParentId == taxonomy.Id);

        <FluentTreeItem Text="@(taxonomy.Name)">
            @foreach (var item in items)
            {
                @BuildTreeItemFragment(item)
            }
    </FluentTreeItem>
    };
}

The data code:

public record Taxonomy(int Id, string Name, int? ParentId);

public static class DataProvider
{
    private static List<Taxonomy>? _taxonomies;

    public static IEnumerable<Taxonomy> Items
    {
        get
        {
            if (_taxonomies == null)
                Populate();

            return _taxonomies?.AsEnumerable() ?? Enumerable.Empty<Taxonomy>();
        }
    }

    private static void Populate()
    {
        _taxonomies = new List<Taxonomy>();

        _taxonomies.Add(new(1, "World", 0));
        _taxonomies.Add(new(2, "Europe", 1));
        _taxonomies.Add(new(3, "Asia", 1));
        _taxonomies.Add(new(4, "Africa", 1));
        _taxonomies.Add(new(5, "France", 2));
        _taxonomies.Add(new(6, "Spain", 2));
        _taxonomies.Add(new(7, "Portugal", 2));
        _taxonomies.Add(new(8, "Cordoba", 6));
        _taxonomies.Add(new(9, "Algeciras", 6));
    }
}