MVC 5 & Jquery DataTables 列显示基于用户角色
MVC 5 & Jquery DataTables Column display based on user Role
在 MVC 5 项目中使用 Jquery 数据table。还使用 Datatables.MVC5 帮助器,它使整个任务变得更容易,并遵循 this tutorial 帮助为 MVC 服务器端处理进行设置。
我正在尝试显示按钮列,即编辑 |删除 |作为基于用户角色的前两列。这些按钮会调用我的普通 MVC 控制器。
我可以创建按钮,但我不知道如何处理角色检查。我以前的客户端使用 Razor 语法很容易,现在使用 DataTables.
就麻烦多了
我的当前 Table.
$(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();
});
在标题为 buttons 的列中,我尝试了 Razor 语法,但与我之前的 tables 完全基于 html 的虚拟项目不同。我可以发送一个具有当前用户角色的 viewbag object 来查看然后检查,我只是不知道如何在 table 设置中执行 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();
});
您可以为该列添加一个 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
在 MVC 5 项目中使用 Jquery 数据table。还使用 Datatables.MVC5 帮助器,它使整个任务变得更容易,并遵循 this tutorial 帮助为 MVC 服务器端处理进行设置。
我正在尝试显示按钮列,即编辑 |删除 |作为基于用户角色的前两列。这些按钮会调用我的普通 MVC 控制器。
我可以创建按钮,但我不知道如何处理角色检查。我以前的客户端使用 Razor 语法很容易,现在使用 DataTables.
就麻烦多了我的当前 Table.
$(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();
});
在标题为 buttons 的列中,我尝试了 Razor 语法,但与我之前的 tables 完全基于 html 的虚拟项目不同。我可以发送一个具有当前用户角色的 viewbag object 来查看然后检查,我只是不知道如何在 table 设置中执行 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();
});
您可以为该列添加一个 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