带有 Kendo 树视图的 MVC - 远程数据 JSON 或 XML

Question

我正在尝试创建一个从我的控制器 (PropertyController) 填充的 Kendo 树视图。

我坚持的部分是如何在控制器中格式化我的数据。如何创建深度三个项目的树视图并将其传递给我的视图以显示在树视图中？

@(Html.Kendo().TreeView()
                .Name("treeview")
                .Events(events => events
                                        .DragStart("PartnershipPage.OnDragStart")
                                        .Drop("PartnershipPage.OnDrop")
                                        .DragEnd("PartnershipPage.OnDragEnd")
                  )
                  .HighlightPath(true)
                  .DragAndDrop(true)
                  .DataSource(dataSource => dataSource
                    .Read(read => read
                        .Action("Index","Tree")
                    )
                  )
            )

我已包含控制器以查看我是否正确执行此操作。到目前为止所发生的只是 JSON 以文本形式显示在屏幕上。

控制器：

public ActionResult Index()
    {
        var org = new Entities();
        var eList = new List<Entity>();

        var entity1 = new Entity
            {
                Id = 1,
                Name = "LLC-A",
                parentId = 0
            };
        eList.Add(entity1);

        var entity2 = new Entity
        {
            Id = 2,
            Name = "LLC-B",
            parentId = 0
        };
        eList.Add(entity2);

        var entity3 = new Entity
        {
            Id = 1,
            Name = "LLC-C",
            parentId = 2
        };
        eList.Add(entity3);

        var entity4 = new Entity
        {
            Id = 1,
            Name = "LLC-D",
            parentId = 2
        };
        eList.Add(entity4);

        org.Entity = eList;

        var test = from x in org.Entity
                   where (x.Name != null)
                   select new
                       {
                           Id = x.Id,
                           Name = x.Name,
                           parentId = x.parentId
                       };
        ;

        return Json(test, JsonRequestBehavior.AllowGet);
    }

Answer 1

发件人：Kendo Site

<%= Html.Kendo().TreeView()
    .Name("TreeView")
    .BindTo(Model, mapping => mapping
    .For<Customer>(binding => binding
    .Children(c => c.Orders) // The "child" items will be bound to the the "Orders" property
    .ItemDataBound((item, c) => item.Text = c.ContactName) // Map "Customer" properties to TreeViewItem properties
    )
    .For<Order<(binding => binding
    .Children(o => null) // "Orders" do not have child objects so return "null"
    .ItemDataBound((item, o) => item.Text = o.OrderID.ToString()) // Map "Order" properties to TreeViewItem properties
    )
    )
    %>

Answer 2

您可以将您的实体放入一个名为“myEntities”的列表中，然后将其从控制器返回到视图：

public ActionResult Index()
{
  var ents = getMyEntities(); // some method you have to return the list of your entities
  return ents;
}

然后在您的视图中，您可以遍历模型中的所有实体：

@(Html.Kendo().TreeView()
  .Name("TreeView")
  .Items(treeview =>
           {
               foreach (var entity in Model)
               {
                   var entityName = entity.Name;
                   var children = entity.Children;

                   treeview.Add().Text(entityName ).Expanded(false).Items(branch =>
                                  {
                                      if (children != null)
                                      {
                                           foreach (var child in children)
                                           {
                                                branch.Add().Text(child);
                                           }
                                       }
                                   });
              }
         }
   )
   )

我使用 children 是因为我发现它比 parent 更容易使用，所以我会将我的 Entities 更改为这样的：

    var entity4 = new Entity
    {
        Id = 1,
        Name = "LLC-D",
        Children = <list of children names ... >
    };

你可以在这里看到我是怎么做的：Populate KendoUI Treeview with RavenDB Documents

希望这会有所帮助。

---

编辑以回应：如何显示子项的子项？

---

我遇到了与您描述的相同的问题（显示孩子的孩子）。以下是我在显示孩子的孩子的问题后的做法：

我使用了EntityFramework：

数据库上下文类：

public class EntityDBContext : DbContext
{
    public DbSet<MyEntity> Entities { get; set; }
}

控制器：

public JsonResult EntitiesForTreeView(int? id)
    {
        // Here I am using EntityFramework
        var entitiesContext = new EntityDBContext();
        var myEntity= from e in entitiesContext.Entities
                      where (id.HasValue ? e.Parent == id : e.Parent == null)
                      select new
                                 {
                                     id = e.Id,
                                     Name = e.Name,
                                     hasChildren = e.Id
                                 };
        return Json(myEntity, JsonRequestBehavior.AllowGet);
    }

还有观点：

 @(Html.Kendo().TreeView()
      .Name("treeview")
      .DataTextField("Name")
      .LoadOnDemand(true)
      .HighlightPath(true)
      .DataSource(dataSource => dataSource
                                    .Read(read => read
                                    .Action("EntitiesForTreeView", "SiteMap")
                                    )
      )
      .Checkboxes(true)
    )

希望这会有所帮助。抱歉，如果有一些愚蠢的事情 - 我只做了 3 个月的 Web 开发，所以如果需要，请取消标记为答案。让我知道我是否可以提供进一步的帮助。 PS：我应该提一下，在实施上面显示的解决方案后，我注意到我的树上的节点都有“+”号......不管他们是否有孩子。如果你知道如何解决这个问题，请告诉我:)