从SQL表动态生成HTML时，嵌套循环致单个元素重复显示问题

云上老周

2026-8-11

问题描述

在从SQL表向HTML动态渲染数据时遇到问题，原循环代码如下：

@foreach (var item in Model.ModulesSubStages)
{
    <div class="row">
        <div class="col-md-6"><a id="courseRedirect" asp-page="/Site/Courses/@item.ModuleId/@item.Id" class="w3-bar-item w3-button"> @item.StageName </a></div>
        <div class="col-md-6">
            @foreach (var monit in Model.ProgressMonitor)
            {
                if (monit.UserId == Model._User.Id && item.Id == monit.CourseSubStageId)
                {
                    <i class="bi bi-check-circle-fill" id="@item.Id" style="color:green;"></i>
                }
                else if (monit.UserId == Model._User.Id && item.Id != monit.CourseSubStageId)
                {
                    <i class="bi bi-check-circle-fill" id="@item.Id" style="color:gray;"></i>
                }
                else
                {
                    <i class="bi bi-check-circle-fill" id="@item.Id" style="color:gray;"></i>
                }
            }
        </div>
    </div>
}

ModulesSubStages表包含9条子阶段数据
ProgressMonitor是用户完成子阶段后插入记录的表，表结构如下：

SELECT [Id]
      ,[CourseId]
      ,[CourseStageId]
      ,[CourseSubStageId]
      ,[UserId]
  FROM [ProgressMonitor];

当前问题：循环执行后，每个子阶段记录会显示多个状态图标
需求：为每个子阶段标记状态，已完成显示绿色图标，未完成显示灰色图标，每个记录仅显示一个图标

解决方案

问题出在内层的foreach (var monit in Model.ProgressMonitor)循环——它会遍历所有进度记录，每一条记录都输出一个图标，导致重复显示。

只需替换内层循环为判断当前用户是否完成该子阶段的逻辑，用LINQ的Any()方法检查即可，这样每个子阶段只会输出一次图标：

@foreach (var item in Model.ModulesSubStages)
{
    <div class="row">
        <div class="col-md-6"><a id="courseRedirect" asp-page="/Site/Courses/@item.ModuleId/@item.Id" class="w3-bar-item w3-button"> @item.StageName </a></div>
        <div class="col-md-6">
            @{
                // 检查当前用户是否完成了该子阶段
                var isCompleted = Model.ProgressMonitor.Any(m => m.UserId == Model._User.Id && m.CourseSubStageId == item.Id);
            }
            <i class="bi bi-check-circle-fill" id="@item.Id" style="color:@(isCompleted ? "green" : "gray");"></i>
        </div>
    </div>
}

逻辑说明：

对每个子阶段，用Any()判断ProgressMonitor中是否存在当前用户且对应子阶段的记录
根据判断结果直接设置图标的颜色，只渲染一次图标，避免重复

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