Tree view structure using asp.net mvc4 raxzor

You could build your tree dynamically in your view (or layout) by usingdiv , anchor tags, and CSS classes (for selected or unselected nodes) by using razor view code.

1. Each tree node will be associated with a div and the div will contains an anchor tag that will contains as href the URL to the action/page that you want to be invoked when you click on that node.

2.Each node from the same level will be a div at the same level.

3.If a tree node contains children nodes, each children node's div will be contained into the parent node's div

4. You can test this solution (built with ASP.NET MVC), and inspect the HTML generated in the next site: Online Site[^]

5. Here is the main part of the razor code that implements the tree UI (in the main layout) based on the given category tree data:

<div class="list">
                                @{
                                    
                                    int n = categoryList.Count;
                                    bool startList = false;
                                    //
                                    for (int i = 1; i < n; i++)
                                    {
                                        string categoryLongName, nextCategoryName;
                                        int level = Category.GetLevelAndName(categoryList[i].Text, out categoryLongName);
                                        string categoryName = Category.CategoryNameForUI(categoryLongName, 50);
                                        int nextItemLevel = 1;
                                        //
                                        if (i + 1 < n)
                                        {
                                            nextItemLevel = Category.GetLevelAndName(categoryList[i + 1].Text, out nextCategoryName);
                                        }
                                        //
                                        string selectedCategoryValue = categoryID.ToString();
                                        int index = categoryList[i].Text.LastIndexOf(".");
                                        string nodePath = categoryList[i].Text.Substring(0, index + 1);
                                        string action = Url.Content(string.Format("~/WarehouseArticle/QuickSearch/?Category={0}", categoryList[i].Value));
                                        bool isSelected = ((categoryID > 0 && categoryList[i].Value == selectedCategoryValue) || (selectedRoot != null && nextItemLevel > level && selectedNodePosition.StartsWith(nodePath)));
                                        string itemImageUrl = Url.Content(string.Format("~/Content/Images/{0}.png", isSelected ? "item-selected" : "item"));
                                        string itemClass = "link";
                                        string itemSelectorStyle = (level > 1 ? string.Format("padding-left:{0}px;", 20 * (level - 1)) : string.Empty);
                                        string itemClassStyle = (level == 1 ? "width:149px;" : string.Format("width:{0}px;", 150 - 10 * (level - 1)));
                                        string siblingClassItem = (startList ? "item first" : "item");
                                        startList = false;
                                        //
                                        if (categoryList[i].Value == selectedCategoryValue)
                                        {
                                            //
                                            // This is the last item from the selected root in the tree!
                                            //
                                            selectedRoot = null;
                                            itemClass = "selectedCategory";
                                        }
                                        //

                                        //
                                        if (nextItemLevel > level)
                                        {
                                            //
                                            // Next item is a subitem of the current item!
                                            //
                                            startList = true;
                                            <text><div class="item"> <a href="#" class="selector" style="@itemSelectorStyle">
                                                 <img src="@itemImageUrl" /> </a><a href="@action" class="@itemClass" style="@itemClassStyle" title="@categoryLongName">@(categoryName)</a>
                                            </div></text>
                                            if (isSelected)
                                            {
                                                 @:<div class="list" style="display: block">
                                            }
                                            else
                                            {
                                                    @:<div class="list" style="display: none">
                                            }
                                        }
                                        else if (nextItemLevel == level)
                                        {
                                            //
                                            // Next item is a sibling from the same level (so no children)!
                                            //
                                            <text><div class="@siblingClassItem"> <a href="#" class="selector" style="@itemSelectorStyle"> 
                                                </a> <a href="@action" class="@itemClass" style="@itemClassStyle" title="@categoryLongName">@(categoryName)</a>
                                                </div>
                                            </text>
                                        }
                                        else
                                        {
                                            //
                                            // Close all sub-leveles until the next subitem level (so no children)!
                                            //
                                            <text><div class="item last"> <a href="#" class="selector" style="@itemSelectorStyle"> 
                                                </a> <a href="@action" class="@itemClass" style="@itemClassStyle">@(categoryName)</a>
                                                </div>
                                            </text>
                                            for (int k = nextItemLevel; k < level; k++)
                                            {
                                                @:</div></div>
                                            }
                                        }
                                    }
                                }
                                </div>