Question

I’m trying to print a simple HTML tree structure, consisting of ul and li elements. I want to be able to pass the view an IEnumerable<T> where T has some hiearchy information (e.g. parent). Now I want the view to output the Tree control much like ASP.NET’s Tree used to work. Is there any way to do this in MVC3 using Razor?

Answer 1

I’ve so far ended up doing it like this:

@PrintCategoryTree(Model.Where(x => !x.ParentCategoryID.HasValue))

@functions{
    public IHtmlString PrintCategoryTree(IEnumerable<Aurora.Models.Category> levelCategories) {
        if (levelCategories.Count() == 0) { return new HtmlString(String.Empty);  }

        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        TagBuilder childBuilder = new TagBuilder("li");

        foreach(var item in levelCategories.OrderBy(x => x.Name)) {
            childBuilder.Attributes.Clear();
            childBuilder.Attributes.Add("id", item.CategoryID.ToString("N"))
            var sub = PrintCategoryTree(Model.Where(x => x.ParentCategoryID == item.CategoryID));

            childBuilder.InnerHtml = item.Name + sub.ToString();
            sb.AppendLine(childBuilder.ToString());
        }

        TagBuilder tagBuilder = new TagBuilder("ul")
        {
            InnerHtml = sb.ToString()
        };

        return Html.Raw(tagBuilder.ToString());
    }
}

The reason being, this is still in the Razor View. And I can keep my presentation logic in my view. It’s not exactly what I’d hoped, but I thought I’d share it with you guys here anyway.