3 level of lists in nested view

Question

I have these tables Pages, PageVersions and ElementsOnPageVersions.

I want to show this on a page all at once, in a collapsible kind of view.

Like this:

• Page 1

  • Version 1
  • Version 2
  • Version 3
  • Version 4
    • Element 1
    • Element 2
    • Element 3

• Page 2

  • Version 1
  • Version 2
  • Version 3
  • Version 4
    • Element 1
    • Element 2

• Page 3

  • Version 1
    • Element 1

• Page 4

  • Version 1
    • Element 1

I'm uncertain on what the best way to retrieve the data and easily show it in the collapsaple layout is.

I would do something like this:

1. Get all items, all at once. "select * from ElementsOnPageVersion e inner join PageVersions v on e.PageVersion = v.id inner join Pages p on v.PageId = p.id"
2. Iterate through all, and build hierachical structure of sorted list to look like the collapsaple layout. PageLists[PagesObject], PagesObject has a sorted list of PageVersionObjects, which has a sorted list of ElementObjects.
3. Iterate through the final PagesList list Building the page. Inside this iterating through pageversionslist showing versions for the page, and Again inside every version iterating through elementslist.

This would be the way I would do it, at this moment. But it seems too heavy, and a lot of iterating.

What would be the best way to do this?

Answer 1

I'd think about projecting your three different items to a single self-referencing list. Each item would need an Id, Description, and ParentId. I'd make a view model for this purpose.

public class TreeItem {
    public int Id {get; set;}
    public string Description {get; set;}
    public int ParentId {get; set;}
}

That would allow for you to leverage either an asp:TreeView in webforms or whatever flavor of jQuery tree / treeview if you're using MVC.