.NET 5 Blazor循环生成行列布局时row div无法嵌套col元素问题

• Blazor的Razor渲染引擎内置自动补全未闭合HTML标签的逻辑：你将<div class="row">的开标签放在case 1分支单独输出，闭标签放在case 3分支输出，Razor解析到case 1分支执行结束时，检测到当前作用域内存在未闭合的div标签，会自动追加</div>将其闭合，最终导致row标签直接生成空节点，后续的col元素全部渲染到row容器外，布局就会损坏。
• 手动拆分HTML开闭标签到不同逻辑分支的写法，不符合Razor的标签解析规则，引擎无法识别跨分支的标签配对关系，必然会出现自动补全标签的异常行为。

推荐优先使用集合分组渲染的方案，从根源避免拆分HTML标签到不同分支：

@* 将组件集合按每3个分为一组，每组对应一个row容器 *@
@foreach (var group in DashboardData.GadgetData.Chunk(3))
{
    <div class="row">
        @foreach (var gadget in group)
        {
            <div class="col-md-4">
                <DonutChart GadgetData="@gadget" />
                <br />
                <p>@(group.ToList().IndexOf(gadget)+1)</p>
            </div>
        }
    </div>
}

如果你使用的是.NET 5没有内置Chunk方法，可以添加一个简单的扩展方法实现分组：

public static class EnumerableExtensions
{
    public static IEnumerable<IEnumerable<T>> Chunk<T>(this IEnumerable<T> source, int chunkSize)
    {
        if (chunkSize <= 0) 
            throw new ArgumentOutOfRangeException(nameof(chunkSize), "分组大小必须大于0");
        
        return source.Select((item, index) => new { item, index })
            .GroupBy(x => x.index / chunkSize)
            .Select(g => g.Select(x => x.item));
    }
}

如果一定要沿用原有计数器的写法，可以使用MarkupString标记标签内容，让Razor跳过自动补全逻辑（不推荐，仅作为临时兼容方案）：
把case1中的开标签输出改为@((MarkupString)"<div class=\"row\">")，case3中的闭标签输出改为@((MarkupString)"</div>")即可。

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