javascript - 获取与一个用户相关的所有 Angular 色 (ASP.NET)

Question

我有 3 张 table 。 用户、 Angular 色和RolesToUsers

这是用户模型:

public partial class User
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public User()
    {
        this.UserToRoles = new HashSet<UserToRole>();
    }

    [Key]
    public int Id { get; set; }
    public string Name { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<UserToRole> UserToRoles { get; set; }
}

这是 Angular 色模型:

public partial class Role
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Role()
    {
        this.UserToRoles = new HashSet<UserToRole>();
    }

    [Key]
    public int Id { get; set; }
    public string RoleName { get; set; }

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<UserToRole> UserToRoles { get; set; }
}

这是UserToRole模型:

public partial class UserToRole
{
    [Key]
    public int Id { get; set; }
    [ForeignKey("Role")]
    public Nullable<int> RoleId { get; set; }
    [ForeignKey("User")]
    public Nullable<int> UserId { get; set; }

    public virtual Role Role { get; set; }
    public virtual User User { get; set; }
}

我需要显示所有用户及其相关 Angular 色。

我写了这个repo方法

public List<UserViewModel> GetUsers()
{
    var result = db.UserToRoles.Select(x=>new UserViewModel
    {
        UserName = x.User.Name,
        RoleName = x.Role.RoleName
    }).ToList();
    return result;        
}

一切都很好，但是如果我通过 js 在屏幕上显示它，例如我有 Ronald 用户，它有 2 个 Angular 色，它显示为 Ronald - Admin 和 Ronald - User.

我需要像Ronald - Admin,User那样显示它。

这是我的 js 脚本现在的样子。

function GetUsers() {
    let url = "/Home/GetUsers";
    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        success: function (data) {
            var separator = "";
            for (var i = 0; i < data.length; ++i) {
                $('#taskresult3').append(separator + '<b>' + data[i].UserName + "-" + data[i].RoleName + '</b>');
                separator = ",";
            }
        }
    });
}

如何解决问题？

Answer 1

您应该将服务器上的 Angular 色与其关联的用户分组。例如，这样的模型:

public class UserViewModel
{
    public string UserName { get; set; }
    public IEnumerable<string> Roles { get; set; }
}

现在您的查询如下:

public List<UserViewModel> GetUsers()
{
    var users = db.Users
        .Include(u => u.UserToRoles.Select(ur => ur.Role))
        .Select(u => new UserViewModel
        {
            UserName = u.Name,
            Roles = u.UserToRoles.Select(ur => ur.Role.Name)
        })
        .ToList();

    return users;
}

现在在客户端上，您可以逐个用户循环访问数据，例如:

function GetUsers() {
    let url = "/Home/GetUsers";
    $.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
        success: function (data) {
            var separator = "";
            for (var i = 0; i < data.length; ++i) {
                var userRow = data[i].UserName + " - " + data[i].Roles.join(", ");

                $('#taskresult3').append(separator + userRow);
                separator = ",";
            }
        }
});