使用 Kendo tileLayout 动态创建 tile

Question

我正在创建一个 MVC 应用程序，并且想专门使用 Kendo 的 TileLayout。

目标是将 ViewModel 传递给我的 View，并根据数据创建 Tiles。

例如，假设我有一个如下所示的虚拟机：

这就是我的 ViewModel（和 Controller）的样子

public ActionResult Index()
    {

        var viewM = new ViewModel
        {
            Items = GetItems(),
            Cats = GetCat()
        };

        return View(viewM);
    }

    public List<Item> GetItems()
    {
        var items = new List<Item>();
        items.Add(new Item() { Id = 1, Name = "Item 1", CatId = 7 });
        items.Add(new Item() { Id = 1, Name = "Item 2", CatId = 7 });
        items.Add(new Item() { Id = 2, Name = "Item 3", CatId = 10 });

        return items;
    }

    public List<Cat> GetCat()
    {
        var cat = new List<Cat>();

        cat.Add(new Cat() { CatId = 7, CatName = "Cat A" });
        cat.Add(new Cat() { CatId = 10, CatName = "Cat B" });

        return cat;
    }

    public class ViewModel
    {
        public List<Item> Items = new List<Item>();
        public List<Cat> Cats = new List<Cat>();

    }
   
    public class Cat
    {
        public int CatId { get; set; }
        public string CatName { get; set; }
    }
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string url { get; set; }

        public int CatId { get; set; }
    }

//我知道最好的做法是将模型存储在模型文件夹中，但这仅用于测试目的

现在在我看来，我希望使用 Kendo 的 TileLayout 进行以下布局

本质上，我想为每个

Cat

都有一个 Tile，并且在每个 Cat tile 中，我想要带有那个

CatId

的 Items

 ------------------  ---------------
 |Cat A            | | Cat B        |
 |Item 1   Item 2  | | Item 3       |
 ------------------  ---------------

我可以为每只猫创建一个图块，但是我不知道如何将这些项目包含在每个相应的猫图块中。

见以下代码：

@(
        Html.Kendo().TileLayout()
                .Name("tilelayout")
                .Columns(3)
                .RowsHeight("120px")
                .ColumnsWidth("33%")
                .Containers(c =>
                {
                    
                    foreach (var cat in Model.Cats)
                    {
                        c.Add()
                        .ColSpan(1).RowSpan(1)
                        .Header(h => h.Text(cat.CatName))
                        .BodyTemplateId("items");

                    }
                })
                .Reorderable(true)
                .Resizable(true)
                .Deferred()
       )

我不知道如何设置 BodyTemplate 或 BodyTemplateId 以便我的项目可以显示在每只猫中。有什么想法吗？