根据用户角色呈现 HTML 内容？

Question

例如：我在申请中有两个角色。

1.Administrator // 可以对数据进行所有CRUD操作。

2.Customer // 只能读取现有数据。

在根据角色向用户返回视图的情况下？现在我可以选择根据角色创建两个单独的视图。

让我们看一些代码。

public ActionResult Index()
{
    var customers = _dbContext.Customers.Include(c => c.Type).ToList();
    if (User.IsInRole(userRole.IsAdministator))
    {
        return View("Admin_List_View", customers);
    } else
    {
        return View("Customer_ReadOnlyList_View" , customers);
    }
}

以上code.I有两种看法。

1.Admin_List_View // 此视图包含所有数据以及添加、删除、更新、编辑选项。

2.Customer_ReadOnly_View // 这个视图将只包含只读列表。

所以我的问题是：在简单视图的情况下，我必须通过为目标角色编写单独的视图来遵循这种方法。

但是因为可以有一个视图并将其中的特定部分分配给特定角色吗？

注：我问的这个问题是......在复杂视图的情况下，我没有选择为特定角色从头开始创建另一个视图。所以我想知道有什么方法可以使用现有视图。

例如： 我要角色。

管理员和客户

和

我有一个观点。

如何管理这些角色的一个视图？

Answer 1

Possible to have a single view and assign the specific section of that to specfic role ?

是的。您可以使用允许在 HTML 中使用 C# 的 Razor 语法来实现此目的。在 C# 语句前加上“@”前缀。参见 here。

在您看来：

<button>Do Regular User Stuff</button>
@if(User.IsInRole("Admin") {
    <button>Do Admin Stuff</button>
}

Answer 2

更详细的答案：

public ActionResult Index()
{
    var customers = _dbContext.Customers.Include(c => c.Type).ToList();
    if (User.IsInRole(userRole.IsAdministator))
    {
        return View("Admin_List_View", customers);
    } else
    {
        return View("Customer_ReadOnlyList_View" , customers);
    }
}

在上面的例子中。当有两个角色并且两个角色都有特定的视图时。

1.One 方式是：

为不同的角色创建两个视图对于上面的例子：我创建了两个视图

1.Admin_List_View
2.Customer_ReadOnlyList

2.2方式是：

创建示例视图并根据用户角色分配 html 内容。

例如：

我要扮演的角色：

我再说一遍：

1.AdminList 2.CustomerList.

现在我只有一个观点： index.cshtml

index.cshmtl

@model IEnumerable<Vidly.Models.Customer>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2 id="heading">Customers</h2>

// This Button is accessible to only admin.
@Html.ActionLink("Add New Customer" , "Add" , "Customer" )

@if (Model.Count() == 0)
{
    <p>No Customer is found.</p>
}
else
{
    <table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Full Name</th>
                <th>Email Address</th>
                <th>Physical Addrses</th>
                <th>Type</th>

                     <th>Actions</th>   // This Column will be only accessible to 
 admin role.

               }
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tbody>
                <tr>
                    <td>@item.FullName</td>
                    <td>@item.EmailAddress</td>
                    <td>@item.PhysicalAddress</td>
                    <td>@item.Type.TypeName</td>


                     // These Button will be only accessible to Admin 

                     // This is the Edit Button.
                    <td><button data-customer-id="@item.Id" class="btn btn-link js-delete">Edit</button></td>

                     // This is the Delete Button.
      <td><button data-customer-id="@item.Id" class="btn btn-link js-delete">Delete</button></td>





                </tr>
            </tbody>
        }
    </table>
}

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#customers").DataTable();
            $("#customers").on("click", ".js-delete", function () {
                var button = $(this);
                var result = confirm("Are you sure you want to delete this customer?");
                    function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "Delete",
                            success: function () {
                                button.parents("tr").remove();
                            },
                            error: function (xhr) {
                                alert("Something goes wrong." + " " + " Error Details " + xhr.status);
                            }

                        });
                    }
                });
            });
        });
    </script>
}

这是整个视图。

现在将特定内容分配给特定角色：

@model IEnumerable<Vidly.Models.Customer>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2 id="heading">Customers</h2>

@if(User.IsRole("Admin")) // Checking that if the LoggedIn User is Admin or Not? if The User is Admin Dispay this "Add New Customer Link" Otherwise don't display it.
{

// This Button is accessible to only admin.
@Html.ActionLink("Add New Customer" , "Add" , "Customer" )


}

@if (Model.Count() == 0)
{
    <p>No Customer is found.</p>
}
else
{
    <table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Full Name</th>
                <th>Email Address</th>
                <th>Physical Addrses</th>
                <th>Type</th>

                @if(User.IsRole("Admin")) // Again Checking That the User is Admin or not? if the User admin Display the table Header otherwise don't display it.
                {

                     <th>Actions</th>   // This Column will be only accessible to admin role.

               }
            </tr>
        </thead>
        @foreach (var item in Model)
        {
            <tbody>
                <tr>
                    <td>@item.FullName</td>
                    <td>@item.EmailAddress</td>
                    <td>@item.PhysicalAddress</td>
                    <td>@item.Type.TypeName</td>


                    @if(User.IsRole("Admin")) // Checking that the LoggedIn User is Admin or Not. If the User is Admin the Display these buttons otherwise don't Display it.
                    {

                         // These Button will be only accessible to Admin 

                         // This is the Edit Button.
                        <td><button data-customer-id="@item.Id" class="btn btn-link 
js-delete">Edit</button></td>

                         // This is the Delete Button.
                        <td><button data-customer-id="@item.Id" class="btn btn-link 
js-delete">Delete</button></td>


                   }

                </tr>
            </tbody>
        }
    </table>
}

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#customers").DataTable();
            $("#customers").on("click", ".js-delete", function () {
                var button = $(this);
                var result = confirm("Are you sure you want to delete this customer?");
                    function (result) {
                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "Delete",
                            success: function () {
                                button.parents("tr").remove();
                            },
                            error: function (xhr) {
                                alert("Something goes wrong." + " " + " Error Details " + xhr.status);
                            }

                        });
                    }
                });
            });
        });
    </script>
}

根据用户角色呈现 HTML 内容？

Rendering HTML Contents according to User Role?

c#

asp.net-mvc

asp.net-identity