我对MVC和JS还比较陌生，所以我可能尝试了错误的方法。
我在MVC项目中使用DataTables来显示数据库中的产品列表。在最后一列，我有一个编辑和删除按钮，这应该是只有在管理员角色的用户可见。如果他们不在管理员角色中，那么它仍然应该加载表并隐藏该列。

ProductDTController：

public class ProductDTController : Controller
    {
        private readonly ApplicationDbContext _db;

        public ProductDTController(ApplicationDbContext db)
        {
            _db = db;
        }
        public IActionResult Index()
        {
            List<Product> productList = new List<Product>();
            return View(productList);
        }

        #region API CALLS
        [HttpGet]
        public IActionResult GetAll()
        {
            List<Product> productList = _db.Products.ToList();
            return Json(new { data = productList });
        }
        #endregion
    }

索引.cshtml

@model List<Product>

<div class="card shadow border-0 my-4">
    <div class="card-header bg-secondary bg-gradient m-lg-0 pt-3">
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="text-white py-2">Product List</h2>
            </div>
        </div>
    </div>
    <div class="card-body p-4">
        <div class="row pb-3">
            <div class="col-6">
            </div>
            <div class="col-6 text-end">
                <a asp-controller="Product" asp-action="Upsert" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i>
                    Create New Product
                </a>
            </div>
        </div>

        <table id="tblData" class="table table-bordered table-striped" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section Scripts {
    <script src="~/js/product.js"></script>
}

product.js

var dataTable;

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#tblData').DataTable({
        ajax: { url: '/ProductDT/GetAll' },
        columns: [
            { data: 'productId', "width": "25%" },
            { data: 'productName', "width": "25%" },
            { data: 'productBrand', "width": "15%" },
            { data: 'productDescription', "width": "10%" },
            {
                data: 'id',
                "render": function (data) {
                    return `<div class="w-75 btn-group" role="group">
                    <a href="ProductDT/Edit?id=${data}" class="btn btn-primary mx-2"><i class="bi bi-pencil-square"></i> Edit</a>
                    <a onClick=Delete('ProductDT/Delete?id=${data}') class="btn btn-danger mx-2"><i class="bi bi-trash-fill"></i> Delete</a>
                    </div>`
                },
                "width": "25%"
            }
        ]
    });
}

在Index.cshtml中-我尝试过：

@if (User.IsInRole("Admin"))
                    {
                        <th>Action</th>
                    } else
                    {
                        <th hidden>Action</th>
                    }

这只会阻止列标题出现，但仍会将“编辑和删除”按钮放在列中。
我试着在product.js中做一些Razor测试，但它没有被识别出来。
用户角色将来自数据库中的AspNetUsers表。