在c#中循环遍历列表时按数字父子关系对元素进行排序

Question

I have such a list;

List<int> numbers = new List<int>
    {
        2,
        4,
        4,
        2,
        4,
        4,
        6,
        6,
        8,
        2,
        4
    };

and i want to list it as below

2
        4
        4
2
        4
        4
            6
            6
                8
2
        4

Please note that these are a dynamic list. and the 2's are the main elements the 4's are the 2's child elements etc..

I've used this example for a simpler explanation, what I really want to do is list HTML elements by parent-child relationship with tag indexes.

What is the ideal way to list as in this solution?

Answer 1

Add indentation based on your values

var list = numbers
    .Select(i => new string('\t', i / 2 - 1) + i)
    .ToList();

Answer 2

Here is two ways.

Using <pre> and '\t':

@foreach (var number in numbers)
{
    <div class="d-flex flex-row"><pre>@(new string('\t',number))</pre>@number</div>
}

or

Using a render fragment of choice:

@foreach (var number in numbers)
{
    <div class="d-flex flex-row">
        @for (var i = 0; i < number; i++)
            @SomeGap

        @number
    </div>
}
@code {
    List<int> numbers = new List<int>
    {
        ...
    };

    RenderFragment SomeGap => @<div>gap</div>;
    
}

You could extend the second method further by making the render fragment a parameter or static. In a hierarchical arrangement you could pass the depth as a parameter;