2016-11-10 64 views
0

在MVC 5項目中使用Jquery數據表。還使用Datatables.MVC5助手,它使整個任務更容易,並且遵循this tutorial來幫助完成MVC服務器端處理。MVC 5&Jquery DataTables基於用戶的列顯示角色

我試圖顯示按鈕列,即編輯|刪除|作爲基於用戶角色的前兩列。這些按鈕會調用我的正常MVC控制器。

我可以創建按鈕,我無法弄清楚如何處理角色檢查。我之前的客戶端使用Razor Syntax很容易,現在使用DataTable更加棘手。

我當前的表。

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

在列標題按鈕欄我都試過剃刀語法,但並不像我以前的工作表爲這是基於所有的HTML dummys項目。我可以發送一個具有當前用戶角色的viewbag對象來查看,然後檢查,我不知道如何執行表設置中的if/else decissions。

如果任何人有任何這樣的事情的例子,我可以得到處理或可以指向我在正確的方向,這將不勝感激。

我已經搜索並檢查了我發現的最接近的問題是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(); 
    }); 
+0

你不能使模型的驗證部分?像一個屬性'CanEdit'並在你的控制器中設置該值並檢查它'返回CanEdit?按鈕:'';' – JamieD77

+0

如果'@ Url.Action(「Get」,「Demo」)'正在工作,那麼'return @(User.IsInRole(「Sausage」)?'button html':「''」); '也應該工作 – JamieD77

+0

@ JamieD77謝謝Jamie,在Row級別工作不幸,它隱藏了按鈕,我不想顯示列。 –

回答

1

您可能可以爲該列添加columnDef並在其中設置可見性。

"columnDefs": [ 
     { 
      "targets": [ 0 ], //first column 
      "visible": @(User.IsInRole("Sausage") : ? "true" : "false") 
     } 
    ] 

設置變量而不是使用內聯Razor代碼。

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


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

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

+0

謝謝傑米,這是要走的路,但問題是Razor語法只是不會在腳本中工作,它也返回True或False。所以用你的方法。在腳本之外var RoleCheck = @(User.IsInRole(「Galleos」)?「true」:「false」);然後在columnDefs中「可見」:RoleCheck如果你可以很高興地修改你的答案,我會將其標記爲要走的路。 –