具有自引用数据结构的树视图 UI 关系（分层[父-子] 关系）答案

【问题标题】：Tree View UI Relationship with Self Referencing Data Structure(Hierarchical[parent-child] Relationship)具有自引用数据结构的树视图 UI 关系（分层[父-子] 关系）
【发布时间】：2019-09-09 12:58:39
【问题描述】：

我有一个自引用数据结构，我想在我的 UI 层中将此数据显示为 树形视图。

我的模型类看起来像：

public class Person
{
     public Person()
     {
         Children = new List<Person>();
     }

     public int Id { get; set; }
     public string Name { get; set; }
     public int? ParentId { get; set; }
     public virtual Person Parent { get; set; }
     public virtual List<Person> Children { get; set; }

}

我的控制器类中的操作方法如下所示：

public IActionResult HierarchicalDataStructure()
{        
      var people = new PersonListModel(_context)
      {
           People = _context.People.Include(i => i.Children).ToList()
      };
      return View(people);
}

经过几次尝试，我决定用标签助手解决这个问题（我不能=））所以我的 TagHelper 类看起来像：

public override void Process(TagHelperContext context, TagHelperOutput output)
{
     PeopleTreeView(context, output);
     base.Process(context, output);
}

void PeopleTreeView(TagHelperContext context, TagHelperOutput output)
{
    List<Person> temp = _context.People.Include(i => i.Children).ToList();

    output.TagName = "div";
    StringBuilder builder = new StringBuilder();
    builder.Append("<ul class='treeview mb - 1 pl - 3 pb - 2'>");
    foreach (var parent in temp)
    {
       if (parent.Parent == null)
       {
          builder.AppendFormat("<li><i class='fas fa-angle-right 
          rotate'id='rotate'></i><span><i class='far fa-envelope-open ic-w mx- 
          1'></i>{0}</span>", parent.Name);

          if (parent.Children.Count > 0)
          {
              //Tried some code in here...
              //In my possbile wrong opinion, something should've happen in 
              here so I tried to do something in this part.
          }
        }
     }
     builder.Append("</ul>");

     output.Content.SetHtmlContent(builder.ToString());
}

在PeopleTreeView() 我有两条关于我在哪里尝试编写代码的注释。

另一点

如果我将 Action 方法更改为：

public IActionResult HierarchicalDataStructure()
{
    List<Person> temp = _context.People
                         .Include(i => i.Children)
                         .Where(x => x.Parent == null).Select(f => 
                          new Person
                          {
                            Id = f.Id,
                            Name = f.Name,
                            ParentId = f.ParentId,
                            Children = f.Children
                          }).ToList();
 return Content(JsonConvert.SerializeObject(new { data = GetAll(temp) },
                              Formatting.Indented), "application/json");
}

现在我有一个没有任何视图的正确 JSON 数据。

如果有人帮助我解决这种情况，我会很高兴。谢谢。

【问题讨论】：

标签： entity-framework asp.net-core treeview hierarchical-data self-reference

【解决方案1】：

我已经完成了，但仍然不知道如何优化此代码，或向我的层次结构添加新数据或更新所选行上的数据，但这是我的代码，仍然需要帮助才能正确理解这种情况。

我已将PeopleTreeView() 更改为：

void PeopleTreeView(TagHelperContext context, TagHelperOutput output)
{
    List<Person> temp = _context.People.Include(i => i.Children).ToList();

    output.TagName = "div";
    StringBuilder builder = new StringBuilder();

    builder.Append("<ul class='treeview mb - 1 pl - 3 pb - 2'>");
    foreach (var parent in temp)
     {
        if (parent.Parent == null)
        {
           builder.AppendFormat("<li><i class='fas fa-angle-right rotate' id='rotate'> 
           </i><span><i class='far fa-envelope-open ic-w mx-1'></i>{0}</span>", 
           parent.Name);
               if (parent.Children.Count > 0)
               {
                   PeopleTreeViewLoopController(builder, parent.Children, 0);
               }
         }
      }
      builder.Append("</ul>");

      output.Content.SetHtmlContent(builder.ToString());
}

我还添加了这个名为 PeopleTreeViewLoopController() 的新方法，如下所示：

void PeopleTreeViewLoopController(StringBuilder builder, List<Person> people, int level)
{
    builder.AppendFormat("<ul class='nested'>");
    foreach (var person in people)
    {
        builder.AppendFormat("<li><i class='fas fa-angle-right rotate' id='rotate'></i> 
        <span><i class='far fa-calendar-alt ic-w mx-1'></i>{0}</span>", person.Name);

        builder.AppendFormat("<ul class='nested'>");
        foreach (var child in person.Children)
        {
            builder.AppendFormat("<li><i class='fas fa-angle-right rotate' id='rotate'> 
            </i> <span><i class='far fa-calendar-alt ic-w mx-1'></i>{0}</span>",child.Name);

            PeopleTreeViewLoopController(builder, child.Children, level);
         }
         builder.Append("</ul>");
     }
     builder.Append("</ul>");
}

【讨论】：