How to get the user roles name for view instead of role id in ASP.NET Identity MVC?

Question

I'm using ASP.Net Identity in my MVC app and am having a hard time getting the role names instead of the roleId. I want to have an index view that shows a full list of all the users and their roles (meaning the role name). I found this link viewing user roles and tried all the suggestions on it, but have had no luck. By default, the Identity framework creates Users.Roles, but it is just the roleId and not the role name. The link I included, when I tried those suggestions, it kept saying:

'System.Collections.Generic.List<MyAppName.Models.UserDto>' does not contain a definition for 'Users'

If anyone is familiar with this problem or can point me in the right direction, I would greatly appreciate it. I just can't seem to figure this out. So far, here is my controller:

    ApplicationDbContext context = new ApplicationDbContext();

    // GET: Users
    public ActionResult Index()
    {
        var users = (from u in context.Users
               let query = (from ur in context.Set<IdentityUserRole>()
                      where ur.UserId.Equals(u.Id)
                      join r in context.Roles on ur.RoleId equals r.Id select r.Name)
                      select new UserDto() {User = u, Roles = query.ToList<string>()})
                     .ToList();
        return View(users);
    }

and here is my model class:

   public class UserDto
   {
       public ApplicationUser User { set; get; }
       public List<string> Roles { set; get; }
   }

and lastly, here is my view:

   @foreach (var user in Model.Users)
    {
        var appUser = user.ApplicationUser;
        var roles = user.Roles;
        <tr>
            <td class="email">
                @appUser.Email
            </td>
            <td>
                @appUser.CompanyName
            </td>
            <td>
                @string.Join(",", roles)
            </td>
            <td>
                @appUser.Logins
            </td>
            <td>
                <br />
                @Html.ActionLink("Edit", "Edit", new { id = user.Id }, new { @class = "edit-link" }) |
                @Html.ActionLink("Delete", "Delete", new { id = user.Id }, new { @class = "delete-link" })
            </td>
        </tr>
     }