如何在Kendo TileLayout中根据ViewModel动态生成带分类项的磁贴

要实现每个分类磁贴内显示对应CatId的Items，核心是在每个Tile容器的Body模板中，根据当前分类的CatId过滤出匹配的Items。下面提供两种可行方案：

方案一：内联BodyTemplate直接渲染 #

直接在遍历Cat的时候，为每个容器生成专属的Body模板，过滤出当前分类下的Items并渲染：

@model ViewModel

@(
    Html.Kendo().TileLayout()
            .Name("tilelayout")
            .Columns(3)
            .RowsHeight("120px")
            .ColumnsWidth("33%")
            .Containers(c =>
            {
                foreach (var cat in Model.Cats)
                {
                    // 获取当前分类下的所有Items
                    var catItems = Model.Items.Where(i => i.CatId == cat.CatId).ToList();
                    
                    c.Add()
                      .ColSpan(1).RowSpan(1)
                      .Header(h => h.Text(cat.CatName))
                      .BodyTemplate(@<text>
                          <div class="item-container">
                              @foreach (var item in catItems)
                              {
                                  <span class="item">@item.Name</span>
                              }
                          </div>
                      </text>);
                }
            })
            .Reorderable(true)
            .Resizable(true)
            .Deferred()
)

<style>
    .item-container {
        display: flex;
        gap: 15px;
        padding: 10px;
        flex-wrap: wrap;
    }
    .item {
        padding: 5px 10px;
        background: #f0f0f0;
        border-radius: 4px;
    }
</style>

方案二：复用模板ID并传递分类数据 #

如果需要复用模板结构，可以通过Data()方法给每个容器传递当前Cat的ID，然后在模板中根据这个ID过滤Items：

第一步：定义模板 #

<script id="itemsTemplate" type="text/x-kendo-template">
    <div class="item-container">
        @foreach (var item in Model.Items.Where(i => i.CatId == #: CatId #))
        {
            <span class="item">@item.Name</span>
        }
    </div>
</script>

第二步：修改TileLayout代码 #

@model ViewModel

@(
    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))
                      .Data(new { CatId = cat.CatId }) // 传递当前分类ID到模板
                      .BodyTemplateId("itemsTemplate");
                }
            })
            .Reorderable(true)
            .Resizable(true)
            .Deferred()
)

<style>
    .item-container {
        display: flex;
        gap: 15px;
        padding: 10px;
        flex-wrap: wrap;
    }
    .item {
        padding: 5px 10px;
        background: #f0f0f0;
        border-radius: 4px;
    }
</style>

补充说明 #

• 建议将ViewModel中的Items和Cats从字段改为属性（添加get; set;），符合MVC模型绑定的最佳实践：

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

• 样式部分可以根据实际需求调整，比如Item的排列方式、间距等。

内容的提问来源于stack exchange，提问作者JaRule1986