动态创建与剑道tileLayout平铺

Question

我正在创建一个MVC应用程序，并将特别想使用Kendo的TileLayout。

目标是传递一个ViewModel给我的视图，并根据数据创建tile。

作为例子，假设我有一个VM，看起来像这样:

这就是我的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; }
}

//我知道最好的做法是将Models存储在Models文件夹中，但是这只是为了测试的目的

现在在我看来，我希望Kendo的TileLayout的布局如下

本质上，我想为每个Cat创建一个Tile，在每个Cat Tile中，我想要包含CatId

的Items

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

我可以为每个Cat创建一个Tile，但是我不知道如何在每个Cat Tile中包含item。

见下面的代码:

@(
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，以便我的项目可以在每个Cat中显示。什么好主意吗?

Answer 1

您可以为每个tile指定body模板，但是BodyTemplateId将只接受templateId作为参数，并且您不能为模板传递数据。

如果你使用jQuery初始化，你可以序列化模型，设置一个函数，将返回主体模板，并使用它来传递数据到模板，例如:

@functions{
public class Cat
{
public int CatId { get; set; }
public string CatName { get; set; }
public List<Item> Items {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; }
}
}
@{
var data = Enumerable.Range(1,5).Select(x=> new Cat()
{
CatId=x,
CatName = "Cat "+x,
Items = Enumerable.Range(x,7).Select(y=>new Item(){Id=x*y,Name="item "+ x*y}).ToList()
});
}
<script id="tileTemplate" type="text/x-kendo-template">
<h3>Name: #=CatName#</h3>
#=Items.map(x=>x.Name).join(', ') #
</script>
<div id="tilelayout"></div>
<script>
$("document").ready(function(){
var data = @Html.Raw(Json.Serialize(data));
var containers = [];
for(let i=0; i<data.length; i++){
containers.push({
colSpan: 1,
rowSpan: 1,
bodyTemplate: function(){
var template = kendo.template($("#tileTemplate").html())
return template(data[i])
},
header:{text:data[i].CatName}
})
}
$("#tilelayout").kendoTileLayout({
containers:containers,
columns:3
})
})
</script>