ASP.NET Core Razor页无runat="server"时如何控制按钮显隐

问题背景 #

在ASP.NET Core Razor页面中定义了两个操作按钮，初始代码如下：

<div class="row div-form-control">
    <div class="col-md-12">
        <div class="form-group actions">
            
            <button type="button" name="submit" id="submit" class="btn btn-primary" action="save"><i class="icon-floppy-disk position-right"></i>Submit</button>
            <button type="button" class="btn btn-primary" action="search"><i class="icon-new-tab position-left"></i>Search</button>

        </div>
    </div>
</div>

需求为用户角色非Admin时隐藏Submit按钮。最初尝试用Web Forms风格的C#代码直接操作控件属性：

string Role="NormalUser";
if(Role!="Admin"){
 submit.Visibility = Visibility.Hidden;
}

该方案无法运行，原因是ASP.NET Core Razor不支持传统Web Forms的runat="server"服务端控件模型，且要求不添加runat="server"属性实现控制。

实现方案 #

方案1：Razor服务端条件渲染（首选） #

这是最安全、性能最好的实现方式，直接在页面渲染阶段判断用户角色，非Admin用户的响应源码中根本不会生成Submit按钮，不存在前端绕过风险。
直接修改按钮区域代码，用Razor内置的@if语法做判断即可，角色判断直接用Razor自带的用户身份声明方法，不需要手动定义变量：

<div class="row div-form-control">
    <div class="col-md-12">
        <div class="form-group actions">
            @* 仅Admin角色渲染提交按钮 *@
            @if (User.IsInRole("Admin"))
            {
                <button type="button" name="submit" id="submit" class="btn btn-primary" action="save">
                    <i class="icon-floppy-disk position-right"></i>Submit
                </button>
            }
            <button type="button" class="btn btn-primary" action="search">
                <i class="icon-new-tab position-left"></i>Search
            </button>
        </div>
    </div>
</div>

注意：涉及提交等敏感操作的权限控制，必须在后端提交接口中再次校验用户角色，避免出现越权访问。

方案2：JavaScript前端控制显隐 #

如果角色信息需要在前端加载后动态获取（比如单页局部刷新、角色信息从前端接口返回的场景），可以在DOM加载完成后通过JS控制按钮显隐：

document.addEventListener('DOMContentLoaded', function() {
    // 替换为实际的角色获取逻辑，比如从全局变量、本地存储、接口返回值中读取
    const currentRole = "NormalUser";
    const submitBtn = document.getElementById('submit');
    
    if (currentRole !== "Admin") {
        // 推荐方式：添加原生hidden属性，按钮隐藏且不占据页面位置
        submitBtn.hidden = true;
        // 如果项目用Bootstrap框架，也可以用内置的d-none工具类
        // submitBtn.classList.add('d-none');
        // 不推荐用visibility: hidden，会保留按钮占据的页面空间
    }
})

注意：前端控制显隐仅适合非敏感场景，用户可以通过浏览器开发者工具修改DOM属性调出隐藏按钮，不能作为唯一的权限控制手段。

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