【问题标题】:MVC 5 & Jquery DataTables Column display based on user Role基于用户角色的 MVC 5 & Jquery DataTables 列显示
【发布时间】:2017-03-24 18:46:03
【问题描述】:

在 MVC 5 项目中使用 Jquery 数据表。还使用 Datatables.MVC5 帮助器,这使整个任务变得更容易,并遵循 this tutorial 帮助将其全部设置为 MVC 服务器端处理。

我正在尝试显示按钮列,即编辑 |删除 |作为基于用户角色的前两列。这些按钮将调用我的普通 MVC 控制器。

我可以创建按钮,但我不知道如何处理角色检查。我以前的客户端使用 Razor 语法很容易,而现在使用 DataTables 变得更加棘手。

我的当前表。

        $(function () {
        assetListVM = {
            dt: null,
            init: function () {
                dt = $('#assetdatatable').DataTable({
                    "serverSide": true,
                    "processing": true,
                    "DisplayLength": 25,
                    "ajax": {
                        "type": "POST", // Required to change from 'GET' as this produced server error query string length too long.
                        "url": "@Url.Action("Get","Demo")",
                        "data": // Allows us to return extra data object to controller
                            function (d) {
                                d.excelExport = $("#excelExport").val();
                            }
                    },
                    "scrollY": viewheight, // Calculated to help ensure table is fitting max area of screen with out dropping off screen.
                    "colReorder": true,
                    "select": true,
                    "stateSave": true,
                    "dom": 'fBrtip',
                    "lengthMenu": [[25, 50, 100, 200, -1], [25, 50, 100, 200, "All"]],
                    "buttons": [
                        "pageLength",
                        "copy",
                        "excel"
                        ],
                    "columns": [
// HERE I need to check user Role and choose if to display column or not.
// I have tried Razor @if (User.IsInRole("Sausage")) { }
                        {
                            "title": "button column"
                            "data": "AssetID",
                            "className": 'details_button',
                            "render": function (AssetID)
                            {
                                return '<a class="btn-xs btn-primary glyphicon glyphicon-list-alt" href=/Demo/Details/' + AssetID +'></a>';
                                }
                            },
                        { "title": "AssetID", "data": "AssetID" },
                        { "title": "SIM", "data": "SIM" },
                        { "title": "IMEI", "data": "IMEI" },
                        { "title": "Software", "data": "LoggedOnSoftware" },
                        { "title": "Soft No", "data": "LoggedOnSoftwareVerNo" },
                        { "title": "Last Reset", "data": "LastResetType" },
                        {
                            "title": "Last Log", "data": "LastLogOnTime",
                            "render": function (LastLogOnTime) {
                                return (moment(LastLogOnTime).isValid()) ? moment(LastLogOnTime).format("DD MMM YY") : "-";
                            }
                        }
                    ],
                    "order": [[2, 'asc']]
                });
            }
        }

        // initialize the datatables
        assetListVM.init();
    });

在标题为按钮列的列中,我尝试了 Razor 语法,但与我之前的虚拟项目表不同,这些表都是基于 html 的。我可以发送一个具有当前用户角色的 viewbag 对象进行查看,然后对其进行检查,我只是不知道如何在表设置中执行 if/else 决定。

如果有人有任何类似的例子,我可以掌握或指出正确的方向,将不胜感激。

我已经搜索并检查了我找到的最接近的问题是this old one

更新: 感谢杰米

这是我的新工作代码,基于当前用户角色将隐藏第一列。

var RoleCheck = @(User.IsInRole("sausage") ? "true" : "false"); // new check for user role outside of Jquery DataTable function which will work.
            $(function () {
        assetListVM = {
            dt: null,
            init: function () {
                dt = $('#assetdatatable').DataTable({
                    "serverSide": true,
                    "processing": true,
                    "ajax": {
                        "type": "POST", // Required to change from 'GET' as this produced server error query string length too long.
                        "url": "@Url.Action("Get","Demo")",
                        "data": // Allows us to return extra data object to controller
                            function (d) {
                                d.excelExport = $("#excelExport").val();
                            }
                    },
                    "columnDefs": [
                        {
                        "target": [0],
                        "visible": RoleCheck // new variable true or false based on user role.
                        }
                    ]
                    "columns": [
                        {
                            "title": "button column"
                            "data": "AssetID",
                            "className": 'details_button',
                            "render": function (AssetID)
                            {
                                return '<a class="btn-xs btn-primary glyphicon glyphicon-list-alt" href=/Demo/Details/' + AssetID +'></a>';
                                }
                            },
                        { "title": "AssetID", "data": "AssetID" },
                        { "title": "SIM", "data": "SIM" },
                        { "title": "IMEI", "data": "IMEI" },
                        { "title": "Software", "data": "LoggedOnSoftware" },
                        { "title": "Soft No", "data": "LoggedOnSoftwareVerNo" },
                        { "title": "Last Reset", "data": "LastResetType" },
                        {
                            "title": "Last Log", "data": "LastLogOnTime",
                            "render": function (LastLogOnTime) {
                                return (moment(LastLogOnTime).isValid()) ? moment(LastLogOnTime).format("DD MMM YY") : "-";
                            }
                        }
                    ],
                    "order": [[2, 'asc']]
                });
            }
        }
        // initialize the datatables
        assetListVM.init();
    });

【问题讨论】:

  • 你不能让模型的验证部分?像属性CanEdit 并在控制器中设置该值并检查它return CanEdit ? buttons : '';
  • 如果@Url.Action("Get","Demo") 工作,那么return @(User.IsInRole("Sausage") ? 'button html' : "''"); 也应该工作
  • @JamieD77 谢谢 Jamie,不幸的是,它在行级别工作,它隐藏了按钮,我不想显示列。
  • 嗯,有几种方法可以删除一列..隐藏它可以吗?
  • @JamieD77 是的,我认为这可以解决问题。

标签: asp.net-mvc razor datatables user-roles


【解决方案1】:

您也许可以为该列添加 columnDef 并在那里设置可见性。

"columnDefs": [
        {
            "targets": [ 0 ], //first column
            "visible": @(User.IsInRole("Sausage") ? "true" : "false") // had syntactical error extra colon was there before question mark.
        }
    ]

设置变量而不是使用内联 Razor 代码。

var RoleCheck = @(User.IsInRole("Sausage") ? "true" : "false");


"columnDefs": [
        {
            "targets": [ 0 ], //first column
            "visible": RoleCheck 
        }
    ]

https://datatables.net/examples/basic_init/hidden_columns.html

【讨论】:

  • 谢谢 Jamie,这是要走的路,但问题是 Razor 语法在脚本中不起作用,它也返回 True 或 False。所以用你的方法。在脚本之外 var RoleCheck = @(User.IsInRole("Galleos") ? "true" : "false");然后在 columnDefs "visible": RoleCheck 如果您愿意修改您的答案,我会将其标记为可行的方法。
  • @AndyDonegan。是的,它有语法错误!我刚刚解决了这个问题:)
猜你喜欢
  • 2018-11-11
  • 2019-12-08
  • 2013-11-07
  • 2010-12-21
  • 2014-12-19
  • 2019-02-12
  • 2014-06-14
  • 1970-01-01
  • 2017-03-09
相关资源
最近更新 更多