1

I managed to display a folder tree with Parent/Child relationships between them. But the way I did it is really not optimized and very ugly.

My tree

I have an @model which contains items with the following attributes:

  • Id (item id)
  • Libelle (item name)
  • Pere (Id of the parent of the item)
  • Niveau (Place of the item in the hierarchy of the tree)

Here is the code that works:

@foreach (var item in Model) 
{
    <div class="bloc-mise-en-page">
        <div id="arbo-dossier-2">
                    @if (item.Niveau == 1)
                    {
                      <ul>
                        <li>
                          <input type="checkbox" id=@item.Libelle><label for=@item.Libelle>@item.Libelle</label>
                                @foreach (var item1 in Model)
                                {
                                @if ((item1.Niveau == 2) && (item1.Pere == item.Id)) 
                                {
                                  <ul>
                                    <li>
                                        <input type="checkbox" id=@item1.Libelle><label for=@item1.Libelle>@item1.Libelle</label>
                                        @foreach (var item2 in Model)
                                        {
                                            @if ((item2.Niveau == 3) && (item2.Pere == item1.Id))
                                            {
                                            <ul>
                                                <li>
                                                    <input type="checkbox" id=@item2.Libelle><label for=@item2.Libelle>@item2.Libelle</label>
                                                </li>
                                            </ul> 
                                            }
                                        }
                                    </li>
                                   </ul>
                                }
                            }
                        </li>
                      </ul>
                    }
         </div>
    </div>
}

What is the most optimized way to do this? Can we do recursive in html? Thank you for your reply

Jules Valignat
  • 27
  • 3
  • since I not know what interprets your template but every tech i know allows this, I'd just say: yes – Patrick Beynio Apr 26 '22 at 11:36
  • sorry for the sarcasm, that's not plain or pure html and it might drastically help if we'd know what kind of file we're looking at. it at least looks like a `.cshtml` or `.razor` file – Patrick Beynio Apr 26 '22 at 11:43
  • np, it is true that some information are missing. I use a razor page (the page is called by an action in a controller). I'm wondering how to avoid iterating through my entire list on each iteration as this will affect performance. – Jules Valignat Apr 26 '22 at 12:03
  • btw, the "Niveau" attribute is useless, i manage to have the same result using only the Father attribute (item parent id). – Jules Valignat Apr 26 '22 at 12:05
  • than, i think you could use [@helper](https://stackoverflow.com/questions/6422895/asp-net-mvc-3-razor-recursive-function) to recursively render and I'd probably presort the data using [Enumerable.ToLookup](https://learn.microsoft.com/en-us/dotnet/api/system.linq.Enumerable.ToLookup?view=net-6.0) and selecting the id of the parent as key, that you also have too pass to the `helper`, this will allow you to select the children way more efficiently than iterating the whole list on each level – Patrick Beynio Apr 26 '22 at 12:35

0 Answers0