ASP .NET MVC 5 - Exibindo os usuários e seus perfis

 Neste artigo vou mostrar como podemos exibir os usuários e os seus perfis em uma aplicação ASP .NET MVC 5.

Para poder mostrar os usuários e seus perfils ou roles, primeiro temos que poder criar perfis e atribuir esses perfis aos usuários.

Felizmente eu já mostrei como fazer isso neste artigo :  ASP .NET MVC 5 - Trabalhando com Roles : Criando roles e atribuindo aos usuários

Assim para saber como foi feita a implementação do código para criar perfis de usuário e sua atribuição a cada usuário leia o artigo acima.

Vamos realizar as seguintes tarefas:

  1. Criar um projeto MVC 5 usando o template padrão MVC com autenticação

  2. Criar um novo controlador ManagerUsersController

  3. Criar o método Action UsersWithRoles

  4. Criar a respectiva view UsersWithRoles

  5. Definir o menu no arquivo _Layout.cshtml com recursos do jQuery Datatable

Embora não seja o foco deste artigo eu vou usar o plugin jQuery DataTable para exibir os usuários e seus perfis.

Eu já apresentei os recursos do jQuery DataTable neste artigo : jQuery - Apresentando DataTables - Macoratti.net

Recursos Usados:

Criando o projeto ASP .NET MVC 5 com autenticação

Abra o VS 2017 Community e crie um projeto usando o template Web-> ASP .NET Web Application(.NET Framework) e informe o nome Mvc_Roles;

A seguir marque o template MVC com autenticação e clique em OK;

Será criado um projeto com toda a estrutura pronta para ser usada e agora podemos aplicar os ajustes mostrados no artigo para implementar a criação de roles e sua atribuição aos usuários.

Assim neste ponto acompanhe o artigo citado e faça a implementação.

Criando a view model UsersInRoleViewModel

Vamos criar uma view model chamada UsersInRoleViewModel na pasta Models que será usada pela view que vai exibir os usuários e seus perfis.

Após criar a classe inclua o código abaixo:

    public class UsersInRoleViewModel
    {
        public string UserId { get; set; }
        public string Username { get; set; }
        public string Email { get; set; }
        public string Role { get; set; }
    }

Agora podemos usar essa view model para definir o código no controlador que vair retornar os usuários e seus perfis.

Criando o controlador GerenciaUsuariosController

Vamos criar o controlador GerenciaUsuariosController na pasta Controllers.

Clique com o botão direito sobre a pasta Controllers e a seguir clique em Add e depois em Controller;

Selecione a opção MVC 5 Controller Empty do Scaffolding  clique em Add e informe o nome GerenciaUsuariosController e clique em Add;

Inclua o código abaixo neste controlador:

using Mvc_UserRoles.Models;
using System.Linq;
using System.Web.Mvc;
namespace Mvc_UserRoles.Controllers
{
    public class GerenciaUsuariosController : Controller
    {
        private ApplicationDbContext context;
        public GerenciaUsuariosController()
        {
            context = new ApplicationDbContext();
        }
        public ActionResult UsuariosComPerfils()
        {
            var usuariosComPerfis = (from user in context.Users
                                  select new
                                  {
                                      UserId = user.Id,
                                      Username = user.UserName,
                                      Email = user.Email,
                                      RoleNames = (from userRole in user.Roles
                                                           join role in context.Roles on userRole.RoleId
                                                           equals role.Id
                                                           select role.Name).ToList()
                                  }).ToList().Select(p => new UsersInRoleViewModel()
                                  {
                                      UserId = p.UserId,
                                      Username = p.Username,
                                      Email = p.Email,
                                      Role = string.Join(",", p.RoleNames)
                                  });

            return View(usuariosComPerfis);
        }
    }
}

Neste código estamos criando uma consulta LINQ e fazendo um JOIN entre as tabelas Users, Roles e obtendo pelo Id do Usuário o seu perfil atribuído na tabela Roles.

Criando a View para exibir os usuários e seus perfis

Vamos criar a View para exibir os usuários e seus perfis.

Clique com o botão direito sobre o método Action UsuariosComPerfils do controlador GerenciaUsuariosController e a seguir clique em Add View;

Aceite os valores definidos na janela Add View e clique em Add:

A seguir inclua o código abaixo :

 @model IEnumerable<Mvc_UserRoles.Models.UsersInRoleViewModel>
@{
    ViewBag.Title = "Usuários Com Perfis";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="box-title">
            <b>Usuários e Perfis</b>
        </h3>
    </div>
    <!-- /.box-header -->
    <div class="panel-body">
        <table class="table table-hover table-bordered table-condensed" id="tabela1">
            <thead>
                <tr>
                    <td><b>Usuário</b></td>
                    <td><b>Email</b></td>
                    <td><b>Perfis</b></td>
                </tr>
            </thead>
            @foreach (var user in Model)
            {
                <tr>
                    <td>@user.Username</td>
                    <td>@user.Email</td>
                    <td>@user.Role</td>
                </tr>
            }
        </table>
    </div>
    <div class="panel-footer">
        <p class="box-title"><b>Total de usuários : @String.Format("{0 : dddd, MMMM d, yyyy}", DateTime.Now)  : 
                </b><span class="label label-primary">@Model.Count()</span></p>
    </div>
</div>

@section scripts{
    <script>
        $(function () {
            $("#tabela1").DataTable();
            $('#example2').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": true
            });
        });
    </script>
}

No código desta View usamos a nossa view modela UsersInRoleViewModel para obter o usuários e seus perfis.

Estamos usando também recursos do jQuery DataTable que teremos que instalar em nossa aplicação.

Veja a documentação do plugin neste link: https://cdn.datatables.net/

Em nosso projeto criamos uma pasta public/plugins/datatables e instalamos os arquivos do plugin esta pasta conforme mostra a figura abaixo:

Ajustando o arquivo de leiaute : _Layout.cshtml

Vamos agora concluir ajustando o arquivo _Layout.cshtml onde vamos referenciar o plugin jQuery DataTable, criar itens no menu para criar perfis e visualizar os usuários e seus perfis.

Abra o arquivo _Layout  na pasta Views/Shared e altere o seu código conforme mostrado a seguir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Macoratti .net</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="~/public/plugins/datatables/dataTables.bootstrap.css">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Usuários e Perfis", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Criar Perfil", "Index", "Role")</li>
                    <li>@Html.ActionLink("Ver Usuários e Perfis", "UsuariosComPerfils", "GerenciaUsuarios")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Macoratti .net</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/public/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="~/public/plugins/datatables/dataTables.bootstrap.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

Agora é só alegria...

Executando o projeto,  primeiro iremos obter: (Você deve criar alguns perfis e usuários atribuindo a cada usuário um perfil antes de testar)

Clicando no menu Ver Usuários e Perfis teremos o seguinte resultado:

Temos assim uma visualização dos usuários criados e os perfis atribuidos a cada um deles exibidos em um tabela configurada pelo jQuery DataTable.

Pegue o projeto aqui :    Mvc_UserRoles.zip  (sem as referências)

'E Jesus lhe disse: Vai, a tua fé te salvou. E logo viu, e seguiu a Jesus pelo caminho. '
Marcos 10:52

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti