ASP.NET MVC视图如何根据审批状态值启用/禁用对应操作按钮

你这个需求有两种实现方式，既可以直接在Razor渲染阶段处理，也可以用jQuery在前端实现，具体操作如下：

这种方式在服务端渲染页面时就完成状态判断，不会出现页面加载后按钮从可用变禁用的闪动问题，安全性也更高。
你只需要修改操作按钮部分的ActionLink代码，根据ReqestApprovalStatus的值动态添加disabled属性和样式即可，修改后的代码如下：

<td>
    @* Edit按钮：仅状态为At Department head时启用 *@
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { 
        @class = "btn btn-primary pull-right " + (item.ReqestApprovalStatus != "At Department head" ? "disabled" : ""), 
        @disabled = item.ReqestApprovalStatus != "At Department head" ? "disabled" : null 
    })
    @Html.ActionLink("Details", "Details", new { id = item.Id }, new { @class = "btn btn-warning pull-right" })
    @* Approval按钮：仅状态为Approved时启用 *@
    @Html.ActionLink("Approval", "Index", "ReportsViewModel", new { id = item.Id }, new { 
        @class = "btn btn-success pull-right " + (item.ReqestApprovalStatus != "Approved" ? "disabled" : ""), 
        @disabled = item.ReqestApprovalStatus != "Approved" ? "disabled" : null 
    })
    @Html.ActionLink( "Delete", "Delete", new { id = item.Id },new { onclick = "return confirm('Are you sure you wish to delete this article?');", @class = "btn btn-danger pull-right" })
</td>

你也可以用jQuery在页面加载完成后批量控制按钮状态，实现代码如下：
首先确保页面已经引入jQuery库，然后在视图末尾添加如下脚本：

$(function() {
    // 遍历表格所有行
    $('#MyRequest tbody tr').each(function() {
        // 获取当前行的审批状态，对应第5列（索引从0开始为4）
        const approvalStatus = $(this).find('td:eq(4)').text().trim();
        // 控制Edit按钮
        const $editBtn = $(this).find('.btn-primary');
        if (approvalStatus !== 'At Department head') {
            $editBtn.addClass('disabled').attr('disabled', true);
        }
        // 控制Approval按钮
        const $approvalBtn = $(this).find('.btn-success');
        if (approvalStatus !== 'Approved') {
            $approvalBtn.addClass('disabled').attr('disabled', true);
        }
    });
});

注意：如果后续你给按钮新增了其他类导致选择器不准确，可以给Edit按钮加自定义类比如edit-btn，Approval按钮加approval-btn，之后用$(this).find('.edit-btn')选择即可，更稳定。

额外提示：不管用哪种方式，前端禁用只是交互层面的限制，后台对应的操作接口一定要加权限和状态校验，避免用户手动修改前端代码或者直接调用接口越权操作。

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