使用 MVC 5 向 Kendo UI 控制器添加父级和子级

Question

我正在使用带有 Kendo UI（最新版本）和 SQL Server 2014 的 MVC 5，并且我想添加一个树视图控制器，当用户单击父项时将显示父项和子项。我有两个班级：

1.类别

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ProductTreeView.Models
{
    public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual ICollection<Product> Products { get; set; }
    }
}

2.产品

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ProductTreeView.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual Category Category { get; set; }
        public int CategoryId { get; set; }
    }
}

我的控制器动作如下所示：

public ActionResult Products(int? id)
{
    var model = db.Categories
            .Select(p => new {
                id = p.Id,
                Name = p.Name,
                hasChildren = p.Products.Any()
            });
        return this.Json(model, JsonRequestBehavior.AllowGet);
}

HTML 看起来像这样：

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="row">
    <div class="col-md-3">
        <label class="k-label-top">TreeView</label>
        @(Html.Kendo().TreeView().Name("treeview")
        .DataSource(datasource => datasource
             .Read(read => read.Action("Products", "Categories"))
        ).DataTextField("Name")
        )
    </div>
</div>

结果是父项中的父项，循环。 Results

Answer 1

这是一个可用于员工/经理的自引用示例。您需要更经典的方式来提供集合中的子产品。

public ActionResult Products(int? id)
{
    var model = db.Categories
            .Select(p => new {
                id = p.Id,
                Name = p.Name,
                hasChildren = p.Products.Any(),
                Children = p.Products
            });
        return this.Json(model, JsonRequestBehavior.AllowGet);
}

然后是这样的：

@(Html.Kendo().TreeView().Name("treeview")
    .DataSource(d => d
        .Model(m => m
            .Id("Id")
            .HasChildren("hasChildren")
            .Children("Children"))
        .Read(r => r.Action("Products", "Categories")))
    .DataTextField("Name"))

http://demos.telerik.com/kendo-ui/treeview/local-data-binding