[英]Tree View UI Relationship with Self Referencing Data Structure(Hierarchical[parent-child] Relationship)
我有一个自引用数据结构,我想在我的UI层中以Tree View形式显示此数据。
我的模型类如下:
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数据,没有任何视图。
如果有人帮助我解决这种情况,我将非常高兴。谢谢。
我已经完成了,但是仍然不知道如何优化此代码,或者将新数据添加到我的层次结构中或更新所选行上的数据,但这是我的代码,仍然需要帮助才能正确理解这种情况。
我已经将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>");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.