如何进行基于权限的UI显示

How to do permission-based UI display

本文关键字：UI 显示 权限 何进行 于权限      更新时间：2023-09-26

更新-我根据新信息修改了问题：

我们有一个小应用程序，它在网格中返回搜索结果。只有一个控制器操作，因为这是应用程序所做的全部操作。但是，我们希望根据用户权限隐藏一些数据。例如，基于用户权限，我在HTML中隐藏StockSource列，如下所示：

<th>Name</th>
@if (Model.UserCanSeeThis)
{ 
    <th>StockSource</th>
}
<th>SomeOtherColumn</th>

然后在这个js代码中，我们使用DataTables来构建一个显示网格：

  $('#grdSearch').dataTable( {
        "bProcessing": true,
        "sAjaxSource": uri,
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            oSettings.jqXHR = $.ajax(
                {
                    type: "POST",
                    url: sSource,
                    data: JSON.stringify(BuildSearchParams()),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        if (typeof data["error"] == "undefined") {
                            fnCallback(data);
                        } else {
                            alert(data["error"]);
                        }
                    }
                });
        },
        "aoColumns": [
            { "mData": "Name" },
            { "mData": "StockSource" },
            { "mData": "SomeOtherColumn" }
        ]});

问题是我不能将"StockSource"设置为不可见，因为如果用户没有权限，就没有StockSource列可以设置为null。有什么办法控制这种情况吗？。

我可以想到的一种方法是，您可以创建一个内联脚本来处理视图页面上的aoColumns。

<script>
//Preload with the first column since you know it will always be there
var includedColumns = [{ "mData": "Name" }];
@if (Model.UserCanSeeThis)
{ 
    //Add stock source when the user can see
    includedColumns.push({ "mData": "StockSource" });
}
//Add additional columns
includedColumns.push({ "mData": "SomeOtherColumn" });
</script>


然后你可以使用变量

$('#grdSearch').dataTable( {
        "bProcessing": true,
        "sAjaxSource": uri,
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            oSettings.jqXHR = $.ajax(
                {
                    type: "POST",
                    url: sSource,
                    data: JSON.stringify(BuildSearchParams()),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        if (typeof data["error"] == "undefined") {
                            fnCallback(data);
                        } else {
                            alert(data["error"]);
                        }
                    }
                });
        },
        "aoColumns": includedColumns });

我仍然会在服务器端执行此操作。只是不要设置变量StockSource

js看起来像

if (data != null) {
    /* Get data for the given row */
    out = "<table cellpadding='5' cellspacing='0' border='0' style='padding-left:50px;'>";
    out += "<tr><td>Name:</td><td>" + data["Name"] + "</td></tr>";
    if (data["StockSource"])
            out += "<tr><td>Stock Source:</td><td>" + data["StockSource"] + "</td></tr>";
    out += "</table>";
}

当您使用MVC时，我建议您将模型传递回创建表的视图。通过这种方式，您可以以比目前更干净的方式创建所需的列，因为您当前的表生成代码不容易维护。

在您的视图中，您可以简单地检查是否需要列并渲染它，如果不需要，则不渲染它。

相关文章：