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

Posted 2023-05-07

【中文标题】使用 MVC 5 向 Kendo UI 控制器添加父级和子级

【英文标题】：Adding parent and child to Kendo UI controller using MVC 5

【发布时间】：2016-01-20 10:35:49

【问题描述】：

我正在使用带有 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

【参考方案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

【讨论】：

在序列化对象时获得循环引用后，您的解决方案进行了一些修改。在 Products 控制器操作中，我添加了以下行。 //return this.Json(from obj in model select new Id = obj.id, Name = obj.Name, JsonRequestBehavior.AllowGet); var list = JsonConvert.SerializeObject(model, Formatting.None, new JsonSerializerSettings() ReferenceLoopHandling = ReferenceLoopHandling.Ignore );返回内容（列表，“应用程序/json”）；

我的模型与 TreeViewItem 的属性不同，这有助于我使用自定义对象来显示树。谢谢。