Render Episerver Page tree on View

Hi All,

I have a scenario on our website where I need to display the Episerver tree on our view.

Like-

So I thought that we can use the “GetDescendents” method and it will render the tree but I was wrong. It basically gives you all the page items in a single list so you need to build the tree by your own.

So to build the tree I wrote below code-

public class BlogItemTree
    {
        public int PageId { get; set; }

        public int? ParentPageId { get; set; }

        public PageData ContentPage { get; set; }

        public List<BlogItemTree> Children { get; set; }
    }
 
   public static class GenericExtensions
    {
        private static readonly IContentLoader _contentLoader;

        static GenericExtensions()
        {
            _contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
        }
        public static void FindDescendantsOfType<T>(PageData page, ICollection<T> descendants)
            where T : class
        {
            var children = _contentLoader.GetChildren<PageData>(page.PageLink);
            foreach (var child in children)
            {
                if (child is T)
                {
                    descendants.Add(child as T);
                }

                FindDescendantsOfType(child, descendants);
            }
        }

        public static List<BlogItemTree> BlogItemTrees(List<PageData> descendants)
        {
            var blogItemTree = new List<BlogItemTree>();
            foreach (var blogItem in descendants)
            {
                var item = new BlogItemTree() { PageId = blogItem.PageLink.ID, ParentPageId = blogItem.ParentLink.ID };
                blogItemTree.Add(item);
            }

            var tree = blogItemTree.BuildTree();
            return tree;
        }

        public static List<BlogItemTree> BuildTree(this IEnumerable<BlogItemTree> source)
        {
            var groups = source.GroupBy(i => i.ParentPageId);

            var roots = groups.FirstOrDefault().ToList();

            if (roots.Count > 0)
            {
                var dict = groups.Where(g => g.Key.HasValue).ToDictionary(g => g.Key.Value, g => g.ToList());
                for (int i = 0; i < roots.Count; i++)
                {
                    var pageRef = new PageReference(roots[i].PageId);

                    roots[i].ContentPage = _contentLoader.Get<PageData>(pageRef);
                    AddChildren(roots[i], dict);
                }
            }

            return roots;
        }

        private static void AddChildren(BlogItemTree node, IDictionary<int, List<BlogItemTree>> source)
        {
            if (source.ContainsKey(node.PageId))
            {
                node.Children = source[node.PageId];
                var pageRef = new PageReference(node.PageId);
                node.ContentPage = _contentLoader.Get<PageData>(pageRef);
                for (int i = 0; i < node.Children.Count; i++)
                {
                    AddChildren(node.Children[i], source);
                }
            }
            else
            {
                var pageRef = new PageReference(node.PageId);
                node.ContentPage = _contentLoader.Get<PageData>(pageRef);
                node.Children = new List<BlogItemTree>();
            }
        }
    }

And then created one more class to call these functions and get the proper output

public class BlogListByYearBlockService
    {
        public List<ContentPage> Descendants = new List<ContentPage>();

        private readonly IContentLoader _contentLoader;

        public BlogListByYearBlockService(IContentLoader contentLoader)
        {
            _contentLoader = contentLoader ?? throw new ArgumentNullException(nameof(contentLoader));
        }

        public List<BlogItemTree> GetTreeData(BlogListByYearBlock block)
        {
            GenericExtensions.FindDescendantsOfType(StartPage, Descendants);
            List<BlogItemTree> tree = GenericExtensions.BlogItemTrees(Descendants);
            return tree;
        }
    }

Now the tree object will give you the exact same tree that is in your Episerver you just need to render this.