ASP.NET Razor列表页Emergency为true时闪烁文本不生效问题排查

核心问题定位 #

• 表格DOM结构不规范，提示元素错位不可见
  表格表头定义了5列（医生信息、患者信息、就诊时间、Emergency提示、操作按钮），但循环渲染每行数据时，判断Emergency字段的逻辑没有包裹在对应的<td>单元格中，是直接以游离<span>的形式放在<tr>标签下，夹在时间列<td>和操作列<td>的中间。
  浏览器解析不规范的表格结构时会自动修正位置，要么把游离的span移出表格可视区域，要么打乱整个表格的列对齐逻辑，最终看不到对应的提示文本。
• 脚本元素匹配无效
  上述结构错误会导致脚本选中的.blink_me元素不在正常的列展示区域，视觉上就会呈现闪烁功能完全没生效的效果。

修正步骤 #

1. 补全Emergency列对应的表格单元格，把提示逻辑放到单元格内部，保证和表头列数一一对应：

@foreach (var obj in Model)
{
    <tr>
        <td width="25%">@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
        <td width="25%">@obj.Patient.FirstName @obj.Patient.LastName</td>
        <td width="25%">@obj.DateAndTime</td>
        <!-- 新增专门承载Emergency提示的td，与表头列对齐 -->
        <td class="text-center">
            @if(obj.Emergency)
            {
                <span class="blink_me fw-bold text-danger">Emergency</span>
            }
        </td>
        <td class="text-center">
            <div class="w-75 btn-group" role="group">
                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2">
                    <i class="fas fa-edit"></i>
                </a>
                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
                    <i class="far fa-trash-alt"></i>
                </a>
            </div>
        </td>
    </tr>
}

2. 优化脚本执行时机，避免DOM未加载完成就执行元素匹配：

$(function() {
    (function blink() {
        $('.blink_me').fadeOut(500).fadeIn(500, blink);
    })();
});

补充：如果不想依赖jQuery实现闪烁效果，可以直接给.blink_me类添加CSS动画，减少脚本依赖：

.blink_me {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% { opacity: 0; }
}

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