ASP.NET Core MVC 6中如何批量禁用指定按钮（避免重复遍历）

下面提供几种无需为每个按钮单独遍历模型的实现方案，按需选择即可：

方法1：前端JavaScript批量处理 #

这种方式把禁用按钮列表传给前端后一次性处理，完全不用在后端逐个判断按钮，适合按钮数量较多的场景。

实现步骤： #

1. 在视图中将模型里的禁用按钮ID列表序列化为JSON格式
2. 编写JS代码遍历该列表，批量设置对应按钮的禁用状态

@model List<RolesAccessModel>

@{
    // 提取禁用按钮ID并转为JSON字符串
    var disabledButtonIds = Json.Serialize(Model.Select(m => m.OptionMenu).ToList());
}

<!-- 页面中的按钮示例 -->
<button id="Button1">按钮1</button>
<button id="Button2">按钮2</button>
<button id="Button3">按钮3</button>
<button id="Button4">按钮4</button>

<script>
    // 获取禁用按钮ID数组
    const disabledIds = @Html.Raw(disabledButtonIds);
    // 批量设置禁用状态
    disabledIds.forEach(id => {
        const btn = document.getElementById(id);
        if (btn) btn.disabled = true;
    });
</script>

方法2：后端自定义HTML助手封装判断逻辑 #

如果希望在后端直接渲染按钮的禁用状态，可以把判断逻辑封装成HTML助手，视图里只需调用助手生成按钮即可，不用重复写遍历代码。

实现步骤： #

1. 创建自定义HTML扩展方法，封装禁用判断逻辑
2. 在视图中引用并使用该助手生成按钮

第一步：添加扩展类

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;
using System.Linq;

public static class ButtonHtmlHelper
{
    public static IHtmlContent PermissionButton(this IHtmlHelper htmlHelper, string buttonId, string buttonText, List<RolesAccessModel> disabledList)
    {
        bool isDisabled = disabledList.Any(m => m.OptionMenu == buttonId);
        var tagBuilder = new TagBuilder("button");
        
        tagBuilder.Attributes.Add("id", buttonId);
        tagBuilder.InnerHtml.Append(buttonText);
        if (isDisabled)
        {
            tagBuilder.Attributes.Add("disabled", "disabled");
        }
        
        return tagBuilder;
    }
}

第二步：在视图中使用

@model List<RolesAccessModel>
@addTagHelper *, YourProjectNamespace <!-- 替换为你的项目命名空间 -->

<!-- 调用自定义助手生成按钮 -->
@Html.PermissionButton("Button1", "按钮1", Model)
@Html.PermissionButton("Button2", "按钮2", Model)
@Html.PermissionButton("Button3", "按钮3", Model)
@Html.PermissionButton("Button4", "按钮4", Model)

方法3：使用视图组件（ViewComponent） #

如果按钮需要复用或者包含更复杂的权限逻辑，可以用视图组件封装，扩展性更强。

实现步骤： #

1. 创建视图组件类，接收按钮ID和禁用列表参数
2. 编写视图组件的视图模板，处理禁用状态
3. 在页面中调用视图组件生成按钮

第一步：创建视图组件类

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class PermissionButtonViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(string buttonId, string buttonText, List<RolesAccessModel> disabledList)
    {
        ViewData["ButtonId"] = buttonId;
        ViewData["ButtonText"] = buttonText;
        ViewData["IsDisabled"] = disabledList.Any(m => m.OptionMenu == buttonId);
        
        return View();
    }
}

第二步：编写视图组件模板

在Views/Shared/Components/PermissionButton/Default.cshtml中添加：

<button id="@ViewData["ButtonId"]" @(ViewData["IsDisabled"] is true ? "disabled" : "")>
    @ViewData["ButtonText"]
</button>

第三步：在页面中调用

@model List<RolesAccessModel>

@await Component.InvokeAsync("PermissionButton", new { buttonId = "Button1", buttonText = "按钮1", disabledList = Model })
@await Component.InvokeAsync("PermissionButton", new { buttonId = "Button2", buttonText = "按钮2", disabledList = Model })
@await Component.InvokeAsync("PermissionButton", new { buttonId = "Button3", buttonText = "按钮3", disabledList = Model })
@await Component.InvokeAsync("PermissionButton", new { buttonId = "Button4", buttonText = "按钮4", disabledList = Model })

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