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

时间:2018-12-14 12:36:28

标签: c# asp.net-mvc asp.net-identity

例如:在我的应用程序中,我必须扮演两个角色。

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

在上面的代码中,我有两个视图。

1.Admin_List_View //此视图包含所有数据以及Add,Delete,Update,Edit选项。

2.Customer_ReadOnly_View //此视图仅包含只读列表。

所以我的问题是: 在简单视图的情况下,我必须遵循这种方法,为目标角色编写一个单独的视图。

但是有可能只有一个视图并将该视图的特定部分分配给特定角色吗?

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

例如: 我必须扮演角色。

管理员和客户

我有一个观点。

如何管理这些角色视图?

2 个答案:

答案 0 :(得分:2)

  

可能只有一个视图,并将其中的特定部分分配给特定角色吗?

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

在您看来:

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

答案 1 :(得分: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。一种方法是:

为单独的角色创建两个视图 对于上面的示例:我创建了两个视图

  • 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>
}