防止 javascript 函数生成删除操作链接(如果登录的用户角色为关联）

Prevent javascript function from generating delete action links if a logged in user role is Associate

本文关键字：用户 登录 角色 关联 如果 函数 javascript 删除 链接 操作 防止      更新时间：2023-09-26

我有两个不同的角色，管理员和助理。

管理员应该能够删除产品

，而助理应该不能删除产品。

我知道如何通过不显示已登录关联用户的删除操作链接来在视图中配置它。但是，我也实现了一个 onkeydown ajax 搜索功能，该功能返回 jsonobjects 列表。这些 json 对象是与搜索字符串匹配的产品对象列表，然后立即在视图中构建标记。这是通过单个javascript函数完成的。

这样做的问题是，它现在被硬编码以生成删除操作链接，而不管当前登录的用户角色如何。因此，在某种程度上，我需要修改我的javascript函数，以便在当前登录用户是关联用户时不会生成删除操作链接。

这是我的函数：

     function searchProduct() {
        var searchWord = $('#searchString').val();                                
        $.ajax({
            url: '/Product/TextChangeEventSearch?searchString=' + searchWord,
            type: 'GET',
            datatype: 'json',
            contenttype: 'application/json',
            success: function (data) {
                $('.table tr:gt(0)').detach();
                $.each(data, function (i, item) {
                    $('.table').append('<tr>' +
                            '<td>' + item.Name + '</td>' +
                            '<td>' + item.Status + '</td>' +
                            '<td>' + item.Genre + '</td>' +
                            '<td>' + '<a href=/Product/Edit/' + item.Value + '>Edit</a> |' +
                            '<a href=/Product/Details/' + item.Value + '>Details</a> |' +
                            '<a href=/Product/Stock/' + item.Value + '>Stock</a> |' +
                            '<a href=/Product/Discount/' + item.Value + '>Discount</a> |' +                            
                            '<a href=/Product/Delete/' + item.Value + '>Delete</a>' +
                            '</td>' +
                            '</tr>'
                        );
                });
            }
        });
    }

在视图中由此触发：

<div class="form-group">
            @Html.TextBox("searchString", "", new { onkeydown = "searchProduct();", onkeyup = "searchProduct();", onkeypress = "searchProduct();"})
            <input type="submit" value="Search" class="btn btn-default" onclick="searchProduct()"/>
        </div>

控制器中的"我的服务器"代码：

public JsonResult TextChangeEventSearch(string searchString)
    {
        var products = _productRepository.GetAll().ToList();            
        var result = products.Where(p => p.Name.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0).OrderByDescending(x => x.Status).ThenBy(y => y.Name);

        var jsonList = result.Select(p => new
        {
            Name = p.Name,
            Status = p.Status,
            Genre = p.Category.Name,
            Value = p.Id.ToString(),
            Warehouse = p.Stock
        });

        return Json(jsonList.ToList(), JsonRequestBehavior.AllowGet);
    }

我认为我需要访问 javascript 函数中的当前登录用户角色。然后，如果是使用此函数的关联用户，我也许可以在函数中添加一个 if 语句，以防止它在视图中生成删除操作链接。

接下来我该去哪里？任何想法，解释和帮助将不胜感激。

您可以在页面上的一个隐藏字段中呈现当前用户的角色，然后使用该字段的值来决定是否应呈现删除按钮。

@{
    Layout = Model.Layout;
    var isAssociate = Context.User.IsInRole("Associate"); //This is indicative and one of the approach of getting user role information at the client side. You can have your own mechanism to get the user's role information at the client side so that you can use it in your javascript.
}
    <input type="hidden" value="@isAssociate"/>

你的JavaScript调用将如下所示。

    function searchProduct() {
                var searchWord = $('#searchString').val();                                
                var isAssociate = $('#isAssociate').val();
                $.ajax({
                    url: '/Product/TextChangeEventSearch?searchString=' + searchWord,
                    type: 'GET',
                    datatype: 'json',
                    contenttype: 'application/json',
                    success: function (data) {
                        $('.table tr:gt(0)').detach();
                        $.each(data, function (i, item) {
                            var htmlContent = '<tr>' +
                                    '<td>' + item.Name + '</td>' +
                                    '<td>' + item.Status + '</td>' +
                                    '<td>' + item.Genre + '</td>' +
                                    '<td>' + '<a href=/Product/Edit/' + item.Value + '>Edit</a> |' +
                                    '<a href=/Product/Details/' + item.Value + '>Details</a> |' +
                                    '<a href=/Product/Stock/' + item.Value + '>Stock</a> |' +
                                    '<a href=/Product/Discount/' + item.Value + '>Discount</a> ';
                        if(isAssociate == "false")
                       {
                             htmlContent += |' + '<a href=/Product/Delete/' + item.Value + '>Delete</a>'
                       }
                       htmlContent += '</td>' + '</tr>'           
                       $('.table').append(htmlContent);
                });
            }
       }
});

注意：在这里，我假设您已经找到了一种识别用户角色的机制，并且您能够存储它，以便可以在视图中访问它。如果你没有这个，那么你需要想办法。

我相信这会对你有所帮助。

感谢和问候，

契丹兰帕里亚

你走在正确的轨道上。 JS需要知道！ 您可以向输入添加数据属性，例如：

<input data-is-admin="false" ....>

然后在 js 中检查此属性，无论如何，您都可能希望授权服务器上的任何删除。

一旦你在 JavaScript 中有了数据，你就可以使用在线 if 语句只显示管理员的删除按钮：

'...' + ( userRole == 'Admin' ? '[Delete button HTML]' || '') + '...'

已经有一段时间了，但是几周后我又回到了这个问题，我像这样解决了它：

在视图顶部：

@{
    ViewBag.Title = "Index";
    var isAdmin = Context.User.IsInRole("Admin");    
}

Javascript函数：

function searchProduct() {
            var searchWord = $('#searchString').val();            
            var isAdmin = "@isAdmin";


            $.ajax({
                url: '/Product/TextChangeEventSearch?searchString=' + searchWord,
                type: 'GET',
                datatype: 'json',
                contenttype: 'application/json',
                success: function (data) {
                    $('.table tr:gt(0)').detach();
                    $.each(data, function (i, item) {
                        var htmlContent = '<tr>' +
                                    '<td>' + item.Name + '</td>' +
                                    '<td>' + item.Status + '</td>' +
                                    '<td>' + item.Genre + '</td>' +
                                    '<td>' + '<a href=/Product/Edit/' + item.Value + '>Edit</a> | ' +
                                    '<a href=/Product/Details/' + item.Value + '>Details</a> | ' +                                    
                                    '<a href=/Product/Discount/' + item.Value + '>Discount</a> ';                        
                        if (isAdmin.toString() === "True")
                        {
                            htmlContent += '| ' + '<a href=/Product/Delete/' + item.Value + '>Delete</a>'
                        }

                        htmlContent += '</td>' + '</tr>'           
                        $('.table').append(htmlContent);
                    });
                }
            });
        }
相关文章：