Как распечатать дерево с помощью Razor

Question

Я пытаюсь напечатать простую структуру дерева HTML, состоящую из ul и li элементов. Я хочу быть в состоянии передать представление IEnumerable<T>, где у T есть некоторая информация hiearchy (например, родитель). Теперь я хочу, чтобы представление выводило элемент управления Tree , очень похожий на дерево ASP.NET, используемое для работы. Есть ли способ сделать это в MVC3 с помощью Razor?

Answer 1

Я до сих пор делал это так:

@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());
    }
}

Причина в том, что это все еще в Razor View. И я могу держать свою логику представления в своем представлении. Это не совсем то, на что я надеялся, но я решил поделиться этим с вами, ребята, в любом случае.

Answer 2

Конечно, это возможно.:) Вы можете сделать это несколькими способами.

1. Используйте что-то вроде jsTree и выводите только первый уровень дерева.Когда пользователь расширяет узел, jsTree выдает обратный вызов AJAX, чтобы получить больше, и это всего лишь вопрос загрузки узлов под тем, что они открыли.Я знаю, что это не совсем то, что вы просили, но я хотел упомянуть об этом.

2. Если вы можете либо изменить запрос, либо выполнить небольшую предварительную обработку данных перед его передачейБритва, измените каждый элемент в IEnumberable так, чтобы он также включал его «уровень» в дереве (1 для корневого узла, 2 для его дочернего элемента, 3 для дочернего элемента дочернего элемента и т. д.).Вывести его в этот момент довольно легко.Создайте переменную в представлении, содержащем текущий уровень.Когда вы переходите к следующему ряду, проверьте, совпадает ли новый уровень со старым.Если это не так, либо откройте или закройте достаточно тегов <ul>, чтобы получить правильный для этого элемента.

3. Если вы не можете сделать это либо, вам нужноотслеживать узлы, как вы видите их в бритве.Причина в том, что когда вы находите ребенка из узла, который не является последним, который вы видели, вам нужно вернуть этот узел, чтобы выяснить, сколько тегов </ul> нужно добавить, чтобы попасть вправо.уровень.Вдобавок ко всему, вы могли бы сделать это, создав представление, создающее Hashtable с ключом и уровнем строки для каждой строки, которую вы нажали.Затем, когда вы нажимаете на элемент и не знаете, куда его поместить, найдите его родительский элемент в хеш-таблице (поскольку вы уже видели родительский элемент, предполагая, что они упорядочены правильно).

Насколько я знаю, нет команды "отобразить этот объект в виде дерева", поэтому вам нужно написать некоторую логику, чтобы получить количество тегов для построения правильных уровней.Но, надеюсь, это поможет вам начать.:)