如何在HTML页面中按Category分组展示C#列表数据

你可以通过Linq的GroupBy方法先对数据按Category分组，再遍历每个分组生成对应的标题和列表项，同时推荐用StringBuilder来拼接字符串（比直接字符串相加效率更高）。

优化后的代码 #

StringBuilder flowerListBuilder = new StringBuilder();
// 先过滤激活的植物，再按Category分组
var groupedPlants = Plants.Where(x => x.Status == PlantStatus.Active)
                          .GroupBy(x => x.Category);

foreach (var categoryGroup in groupedPlants)
{
    // 添加分组标题，可根据需求替换标签（比如<h2>、<div>）
    flowerListBuilder.Append($"<h3>{categoryGroup.Key}</h3>");
    // 开启列表容器
    flowerListBuilder.Append("<ul>");
    
    // 遍历当前分组下的植物，生成列表项
    foreach (var flower in categoryGroup)
    {
        flowerListBuilder.Append($"<li>{flower.Colour} {flower.Priority} {flower.Category}</li>");
    }
    
    // 关闭列表容器
    flowerListBuilder.Append("</ul>");
}

// 最终生成的HTML字符串
string flowerList = flowerListBuilder.ToString();

代码说明 #

1. 分组逻辑：GroupBy(x => x.Category)会把激活状态的植物按类别聚合，每个分组的Key就是对应的Category值。
2. HTML结构：每个分组先输出类别标题，再用<ul>包裹该组的所有列表项，保证HTML结构语义化，也方便后续样式调整。
3. 性能优化：StringBuilder避免了直接字符串拼接时频繁创建新对象的问题，数据量越大，性能优势越明显。

输出的HTML结构示例 #

<h3>玫瑰类</h3>
<ul>
    <li>红色 高 玫瑰类</li>
    <li>粉色 中 玫瑰类</li>
</ul>
<h3>百合类</h3>
<ul>
    <li>白色 高 百合类</li>
</ul>

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