[英]Tree View UI Relationship with Self Referencing Data Structure(Hierarchical[parent-child] Relationship)
I have a self referencing data structure and I want to show this data in my UI layer as a Tree View . 我有一个自引用数据结构,我想在我的UI层中以Tree View形式显示此数据。
My Model Class looks like: 我的模型类如下:
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; }
}
My action method in my controller class is look like: 我的控制器类中的操作方法如下所示:
public IActionResult HierarchicalDataStructure()
{
var people = new PersonListModel(_context)
{
People = _context.People.Include(i => i.Children).ToList()
};
return View(people);
}
After few tries I've decided to solve this problem with tag helpers(which I couldnt =) ) So my TagHelper class is looks like: 经过几次尝试,我决定使用标签助手来解决这个问题(我无法=),所以我的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());
}
In PeopleTreeView()
I have two notes about where did I tried to write some code. 在PeopleTreeView()
,有两个关于在哪里尝试编写代码的注释。
Another Point 另一点
If I change my Action method to: 如果我将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");
}
Now I have a proper JSON data without any view. 现在,我有一个正确的JSON数据,没有任何视图。
I would be so glad if someone help me about this situation.. Thank you. 如果有人帮助我解决这种情况,我将非常高兴。谢谢。
I've done it, but still dont know how to optimize this code, or add new data to my hierarchy or update the data on selected row, but here is my code, still need help to understand this situation correctly. 我已经完成了,但是仍然不知道如何优化此代码,或者将新数据添加到我的层次结构中或更新所选行上的数据,但这是我的代码,仍然需要帮助才能正确理解这种情况。
I've changed my PeopleTreeView()
to : 我已经将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());
}
Also I've add this new method called PeopleTreeViewLoopController()
which looks like: 另外,我还添加了名为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.