Entity framework 具有自引用数据结构的树视图UI关系(分层[父子]关系)

Entity framework 具有自引用数据结构的树视图UI关系(分层[父子]关系),entity-framework,asp.net-core,treeview,hierarchical-data,self-reference,Entity Framework,Asp.net Core,Treeview,Hierarchical Data,Self Reference,我有一个自引用的数据结构,我想在我的UI层中将这些数据显示为树状视图 我的模型类看起来像: public class Person { public Person() { Children = new List<Person>(); } public int Id { get; set; } public string Name { get; set; } public int? ParentId { g

我有一个自引用的数据结构,我想在我的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 override void Process(TagHelperContext context, TagHelperOutput output)
{
     PeopleTreeView(context, output);
     base.Process(context, output);
}
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>");
}
经过几次尝试之后,我决定用标记助手解决这个问题(我不能=) 因此,我的TagHelper类如下所示:

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 override void Process(TagHelperContext context, TagHelperOutput output)
{
     PeopleTreeView(context, output);
     base.Process(context, output);
}
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>");
}
现在我有了一个正确的JSON数据,没有任何视图。


如果有人能帮我解决这个问题,我将非常高兴。。谢谢。

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

我已将我的
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());
}