.NET6 EF6 Razor Pages(非MVC)按模型值修改div innerHTML异常

当前代码存在两个核心错误，才会出现只有第一行截止日期被显示为"None"的异常：

• 违反HTML id唯一性规则：你在foreach循环中给每一行的截止日期容器都设置了相同的id="due-date"，按照HTML规范，同一页面内id必须全局唯一，document.querySelector('#due-date')永远只会匹配页面上第一个带该id的元素，剩余所有行的截止日期div根本不会被JS获取到。
• JS条件判断语法错误：if判断中误用了赋值运算符=，而非严格相等比较运算符===。代码if (dueDateDiv.innerHTML = "09/09/9999")并不会判断div内容是否为目标日期，而是直接把选中的第一个div的内容强制赋值为09/09/9999，且赋值表达式返回的非空字符串会被判定为真值，直接进入分支把内容改成"None"，完全忽略该div原本的实际日期值。

提供两种可选修复方案，优先推荐服务端渲染时直接处理，无需额外写JS，也不会出现页面加载后内容闪变的问题。

方案1：服务端直接渲染（推荐） #

直接修改Razor视图中截止日期的渲染逻辑，输出页面时就完成值判断，不需要额外前端脚本：

<td width="10%">
    <div class="due-date">
        @if (obj.DueDate == new DateTime(9999, 9, 9))
        {
            @:None
        }
        else
        {
            @obj.DueDate.ToString("MM/dd/yyyy")
        }
    </div>
</td>

注意：循环生成的重复元素建议用class做标识，不要用id，从根源避免id重复的规范问题。

方案2：修复前端JS逻辑 #

如果确实需要在前端处理，先把循环内div的id替换为class，避免id重复：

<td width="10%">
    <div class="due-date">@obj.DueDate.ToString("MM/dd/yyyy")</div>
</td>

再修改JS逻辑，选中所有截止日期元素逐个判断，注意使用正确的比较运算符，且等DOM加载完成后再执行函数：

function hideDueDate () {
    // 选中所有截止日期容器
    const dueDateDivs = document.querySelectorAll('.due-date');
    dueDateDivs.forEach(div => {
        // 用===做严格相等比较，禁止误用=赋值
        if (div.innerHTML.trim() === "09/09/9999") {
            div.innerHTML = "None";
        }
    })
}
// DOM加载完成后再执行逻辑，避免元素未渲染完成导致的获取失败
document.addEventListener('DOMContentLoaded', hideDueDate);

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