.NET 8 Blazor中实现条件HTML标签拆分数据列的最优方案咨询

针对你遇到的Blazor标签编译报错、代码重复及可变列数适配问题，以下是两种推荐的实现方案，均符合Blazor的编译规则，且能满足纵向字母序分栏的需求：

方案一：C#逻辑拆分集合+动态渲染列 #

将集合拆分逻辑封装为可复用的扩展方法，通过循环动态生成列，既避免代码重复，又支持可变列数。

1. 封装集合拆分扩展方法 #

在项目中创建工具类，实现按指定列数拆分集合的逻辑：

public static class CollectionExtensions
{
    public static IEnumerable<IEnumerable<T>> SplitIntoColumns<T>(this IEnumerable<T> source, int columnCount)
    {
        if (source == null) throw new ArgumentNullException(nameof(source));
        if (columnCount < 1) throw new ArgumentOutOfRangeException(nameof(columnCount));

        var itemList = source.ToList();
        int itemsPerColumn = (int)Math.Ceiling((double)itemList.Count / columnCount);
        
        for (int i = 0; i < columnCount; i++)
        {
            yield return itemList.Skip(i * itemsPerColumn).Take(itemsPerColumn);
        }
    }
}

2. Blazor组件中使用 #

直接调用扩展方法拆分菜单集合，循环渲染列：

@page "/menu"
@using YourProject.Extensions

<div class="row">
    @foreach (var columnItems in MenuItems.SplitIntoColumns(3))
    {
        <div class="col-md">
            @foreach (var item in columnItems)
            {
                <div class="py-2">@item.Name - @item.Price</div>
            }
        </div>
    }
</div>

@code {
    // 模拟从数据库获取的已按字母序排序的菜单集合
    private ICollection<MenuItem> MenuItems = new List<MenuItem>
    {
        new MenuItem { Name = "Apple Pie", Price = "$8.99" },
        new MenuItem { Name = "Beef Stew", Price = "$12.99" },
        new MenuItem { Name = "Chicken Salad", Price = "$10.99" },
        new MenuItem { Name = "Donut", Price = "$3.99" },
        new MenuItem { Name = "Egg Benedict", Price = "$11.99" }
    };

    public class MenuItem
    {
        public string Name { get; set; }
        public string Price { get; set; }
    }
}

优势：精确控制每列内容，完美兼容Bootstrap栅格系统，列数可通过参数动态调整。

方案二：CSS列布局（极简实现） #

利用CSS的column-count属性，让浏览器自动实现纵向分栏，无需后端拆分逻辑，代码最简洁。

@page "/menu"

<div class="row">
    <div class="col-md-12 menu-columns">
        @foreach (var item in MenuItems)
        {
            <div class="menu-item py-2">@item.Name - @item.Price</div>
        }
    </div>
</div>

<style>
    .menu-columns {
        column-count: 3;
        column-gap: 1.5rem;
    }
    .menu-item {
        break-inside: avoid; /* 防止单个菜单项被拆分到两列 */
    }
</style>

@code {
    // 同方案一的MenuItems集合
    private ICollection<MenuItem> MenuItems = new List<MenuItem>
    {
        // ... 菜单数据
    };

    public class MenuItem
    {
        public string Name { get; set; }
        public string Price { get; set; }
    }
}

优势：无需后端逻辑，代码极简，响应式友好（可通过媒体查询在移动端自动减少列数），现代浏览器均支持。

为什么之前的JS方案在Blazor中不可行？ #

Blazor编译时会严格检查组件内的HTML标签匹配性，要求代码块中的标签结构必须完整合法，无法像原生JS那样随意插入闭合/开启标签，因此会触发RZ9981错误。上述两种方案均遵循Blazor的渲染规则，不会出现编译问题。

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