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?

CodePudding user response：

Add indentation based on your values

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

CodePudding user response：

Here is two ways.

Using <pre> and '\t':

@foreach (var number in numbers)
{
    <div ><pre>@(new string('\t',number))</pre>@number</div>
}

or

Using a render a fragment of choice:

@foreach (var number in numbers)
{
    <div >
        @for (var i = 0; i < number; i  )
            @SomeGap

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

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