如果用户处于特定角色，则仅显示数据表编辑/删除列

Question

我对 MVC 和 JS 还比较陌生，所以我可能会尝试以错误的方式执行此操作。

我在 MVC 项目中使用 DataTables 来显示数据库中的产品列表。 在最后一列中，我有一个“编辑”和“删除”按钮，该按钮仅对管理员角色中的用户可见。如果他们不在管理员角色中，那么它仍然应该加载表并隐藏该列。

产品DT控制器：

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 表。

Answer 1

在您的 JavaScript 中有一个布尔变量，表示该用户是否是管理员

const isAdmin = $('#isAdmin').val();

然后在数据表列定义中为要隐藏的列设置 visible 属性

{
    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%",
    visible: isAdmin
}

请注意，任何用户都可以查看页面的 JavaScript 并修改此值，因此您还必须在服务器上检查用户是否具有正确的权限。