Blazor组件循环渲染顺序异常，请求技术解决方案

你的问题核心在于用自定义组件UITextToHtml输出单个HTML标签，Razor组件的渲染机制会把每个组件作为独立单元处理，导致闭合标签</div>和后续的<label>、<InputText>渲染不同步，出现标签提前闭合的情况。另外原代码循环结束后错误输出了rowOpener，会导致额外的未闭合div。

方案一：直接使用原生Razor标签（推荐） #

不需要用自定义组件输出简单的div标签，直接在Razor中写原生HTML标签，Razor会自动维护DOM结构的顺序：

@{
    int columnCounter = 0;
}
@foreach (UIField field in component.UIFieldCollection)
{
    columnCounter++;

    // 每3个字段开启一个新row
    if (columnCounter % 3 == 1)
    {
        <div class="row">
    }

    <label>@field.Caption</label>
    <InputText class="form-control" @bind-Value="@field.RawValue" />

    // 每3个字段闭合row，或者最后一个字段时闭合row
    if (columnCounter % 3 == 0 || columnCounter == component.UIFieldCollection.Count)
    {
        </div>
    }
}

逻辑说明 #

• 计数器从0开始，每遍历一个字段递增1
• 当计数器为1、4、7...（即每3个字段的第一个）时，打开<div class="row">
• 渲染当前字段的标签和输入框
• 当计数器为3、6、9...（每3个字段的最后一个），或者遍历到最后一个字段时，闭合</div>

方案二：保留UITextToHtml组件的分组渲染 #

如果必须使用UITextToHtml处理HTML（比如有特殊转义或逻辑），可以先把UIField集合按每3个一组拆分，再每组整体渲染：

后台代码（添加分组逻辑） #

// 将字段集合按每3个一组拆分
private IEnumerable<IEnumerable<UIField>> FieldGroups => component.UIFieldCollection
    .Select((field, index) => new { Field = field, Index = index })
    .GroupBy(item => item.Index / 3)
    .Select(group => group.Select(item => item.Field));

private string rowOpener = "<div class='row'>";
private string rowCloser = "</div>";

Razor代码 #

@foreach (var fieldGroup in FieldGroups)
{
    // 输出row开头
    <UITextToHtml htmlString="@rowOpener" />
    
    // 渲染组内所有字段
    foreach (UIField field in fieldGroup)
    {
        <label>@field.Caption</label>
        <InputText class="form-control" @bind-Value="@field.RawValue" />
    }
    
    // 输出row结尾
    <UITextToHtml htmlString="@rowCloser" />
}

逻辑说明 #

• 先把字段集合拆分成多个子集合，每个子集合最多3个字段
• 对每个子集合，先输出row开头标签，再渲染所有字段，最后输出row结尾标签
• 这样每组的标签和内容是连续渲染的，不会出现标签提前闭合的问题

原代码的关键错误 #

1. 循环结束后错误输出rowOpener：应该输出rowCloser来闭合最后一个未完成的row
2. 用组件输出单个标签破坏DOM连贯性：Razor组件的渲染是独立的，单个闭合标签组件会被优先渲染，导致和后续内容脱节

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