如何在Razor视图中基于Model值使用JavaScript条件语句控制按钮显隐

首先说你当前代码的核心问题：

1. HTML规范要求页面中ID必须唯一，你在循环里给每一行的按钮div都设置id="buttons"，会导致document.getElementById只能匹配到第一个出现的按钮div，其他行的按钮完全无法控制
2. 你把JS脚本放在了对应div的前面，脚本执行的时候div还没渲染到DOM树里，会直接抛出无法读取null的style属性的JS报错，逻辑完全不生效
3. 这种纯静态的显隐判断完全可以在服务器端渲染阶段处理，没必要丢到客户端用JS实现，白白增加性能损耗和出错概率

直接用Razor语法在服务器端判断状态，符合条件才渲染按钮，从根源上避免多余代码：

<tbody>
    @foreach (var Data in Model)
    {
    <tr>
       <td>@Data.donor_ID</td>
       <td>@Data.donor_Name</td>
       <td>@Data.donor_condition</td>
       <td>@Data.donor_BG</td>
       <td>@Data.donor_date</td>
       <td>@Data.drequest_date</td>
       <td>@Data.d_status</td>
       <td>
        @* 只有状态为PENDING的时候才渲染操作按钮 *@
        @if (Data.d_status == "PENDING")
        {
        <div class="operation-buttons">
         <a href="@Url.Action("AcceptDonorRequest","Admin", new {ID = Data.donor_ID })" class="btn btn-success btn-lg">ACCEPT</a>
         <a href="@Url.Action("RejectDonorRequest","Admin", new {ID = Data.donor_ID })" class="btn btn-danger btn-lg">REJECT</a>
        </div>
        }
       </td>
     </tr>}
 </tbody>

如果你有特殊需求需要保留按钮DOM只是隐藏，也可以直接内联控制样式：

<div class="operation-buttons" style="@(Data.d_status is "ACCEPTED" or "REJECTED" ? "display: none;" : "")">
    <!-- 按钮内容不变 -->
</div>

如果后续有前端动态切换状态的需求必须用JS控制，需要做如下修改：

1. 把重复的id="buttons"改成类名class="buttons"
2. 去掉循环里的内嵌JS，统一在页面加载完成后遍历所有按钮容器做判断，你可以给每个tr加自定义属性存储状态，或者直接读取状态列的文本判断。

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