如果登录的用户角色为“关联”，则阻止javascript函数生成删除操作链接

Question

I got two different roles, Admin and Associate.

An Admin should be able to delete a product while an Associate should not be able to delete a product.

I know how to configure this in the View by not showing the Delete Action Link for an logged in Associate user. However I have also implemented an onkeydown ajax search functionality that returns a list of jsonobjects. These json-objects are a list of product objects that matches the searchstring and then immediately builds up the markup in the view. This is done from a single javascript function.

The problem with this is that it now is hardcoded to generate delete action links, regardless of current logged in user role. So in a way, I need to modify my javascript function so that it doesn't generate delete actionlinks if the current logged in user is an associate user.

This is my function:

     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>'
                        );
                });
            }
        });
    }

Triggered by this in the View:

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

My Server code in the controller:

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);
    }

I think that I need access to the current logged in user role in the javascript function. Then I might be able to add one if statement in the function that prevents it from generating delete action links in the view if it is an associate user that uses this function.

Where do I go next with this? Any thoughts, explanations and help would be greatly appreciated.

Answer 1

May be you can render the role of the current user in one hidden field on the page and then use the value of that field to decide if delete button should be rendered.

@{
    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"/>

and your javascript call will look like as following.

    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);
                });
            }
       }
});

NOTE : Here I am assuming that you have figured out a mechanism to identify the user role and you are able to store it so that it can be accessed in the view. If you don't have this then you need to figure out a way for that.

I am sure this will help you.

Thanks and regards,

Chetan Ranpariya

Answer 2

you're on the right track. the js needs to know! you could add a data attribute to the input, for example:

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

and then check this attribute in the js. and you'll propably want to authorize any delete on your server anyway.

Answer 3

使用JavaScript获取数据后，您可以使用在线if语句仅显示管理员的删除按钮：

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

Answer 4

It's been a while, but I got back to this issue many weeks later, and I solved it like this:

At the top of the view:

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

Javascript function:

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);
                    });
                }
            });
        }