how to retrieve data from many to many relationship from the controller in the details action method and put the data in view details mvc 4

Question

i create three tables many to many relationship using first code and the table UserProfile contains the Users and webpages_Roles contains the Roles and the join table webpages_UsersInRoles that contains the UsersInRoles UserID and RoleID

and now i want to view each user with his role so i create a controller for the join table using the scaffolding option and set the UsersInRoles model as my model class and then the controller and the views are created and when i run the project i go to the index and its work fine it give me all the users and there roles but when i peers Details (go to the Details method) it not showing any thing this is my models

UsersInRoles Model

[Table("UserProfile")]
public class UserProfile
{

    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int UserID { get; set; }
    public string UserName { get; set; }
    public ICollection<UsersInRoles> UsersInRoles { get; set; }

}

Role Model

[Table("webpages_Roles")]
[Bind(Exclude = "RoleID")]
public class Role
{

    [Key]
    [ScaffoldColumn(false)]
    public int RoleID { get; set; }

    [Required(ErrorMessage = "Role Name is required")]
    [DisplayName("Role Name")]
    [StringLength(50)]
    public string RoleName { get; set; }


    public ICollection<UsersInRoles> UsersInRoles { get; set; }
}

UsersInRoles Model

 [Table("webpages_UsersInRoles")]
[Bind(Exclude = "UsersInRolesID")]
public class UsersInRoles
{
    [Key]
    public int UsersInRolesID { get; set; }

    public int UserID { get; set; }
    public UserProfile UserProfile { get; set; }

    public int RoleID { get; set; }
    public Role Role { get; set; }
}

the UsersInRoles Controller

    public class UsersInRolesController : Controller
{
    private DataBaseContext db = new DataBaseContext();

    public ActionResult Index()
    {
        var usersinroles = db.UsersInRoles.Include(u => u.UserProfile).Include(u => u.Role);
        return View(usersinroles.ToList());
    }

    public ActionResult Details(int id)
    {
        var usersinroles = db.UsersInRoles.Find(id);

        if (usersinroles == null)
        {
            return HttpNotFound();
        }
        return View(usersinroles);
    }

    public ActionResult Create()
    {
        ViewBag.UserID = new SelectList(db.UserProfiles, "UserID", "UserName");
        ViewBag.RoleID = new SelectList(db.Roles, "RoleID", "RoleName");
        return View();
    }

    [HttpPost]
    public ActionResult Create(UsersInRoles usersinroles)
    {
        if (ModelState.IsValid)
        {
            db.UsersInRoles.Add(usersinroles);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.UserID = new SelectList(db.UserProfiles, "UserID", "UserName", usersinroles.UserID);
        ViewBag.RoleID = new SelectList(db.Roles, "RoleID", "RoleName", usersinroles.RoleID);
        return View(usersinroles);
    }

    public ActionResult Edit(int id = 0)
    {
        UsersInRoles usersinroles = db.UsersInRoles.Find(id);
        if (usersinroles == null)
        {
            return HttpNotFound();
        }
        ViewBag.UserID = new SelectList(db.UserProfiles, "UserID", "UserName", usersinroles.UserID);
        ViewBag.RoleID = new SelectList(db.Roles, "RoleID", "RoleName", usersinroles.RoleID);
        return View(usersinroles);
    }

    [HttpPost]
    public ActionResult Edit(UsersInRoles usersinroles)
    {
        if (ModelState.IsValid)
        {
            db.Entry(usersinroles).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.UserID = new SelectList(db.UserProfiles, "UserID", "UserName", usersinroles.UserID);
        ViewBag.RoleID = new SelectList(db.Roles, "RoleID", "RoleName", usersinroles.RoleID);
        return View(usersinroles);
    }

    public ActionResult Delete(int id = 0)
    {
        UsersInRoles usersinroles = db.UsersInRoles.Find(id);
        if (usersinroles == null)
        {
            return HttpNotFound();
        }
        return View(usersinroles);
    }

    [HttpPost, ActionName("Delete")]
    public ActionResult DeleteConfirmed(int id)
    {
        UsersInRoles usersinroles = db.UsersInRoles.Find(id);
        db.UsersInRoles.Remove(usersinroles);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    protected override void Dispose(bool disposing)
    {
        db.Dispose();
        base.Dispose(disposing);
    }
}

the UsersInRoles Details view

@model SeniorProject.Models.UsersInRoles

  @{
    ViewBag.Title = "Details";
   }

  <h2>Details</h2>

  <fieldset>
   <legend>UsersInRoles</legend>

<div class="display-label">
     @Html.DisplayNameFor(model => model.UserProfile.UserName)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.UserProfile.UserName)
</div>

<div class="display-label">
     @Html.DisplayNameFor(model => model.Role.RoleName)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.Role.RoleName)
</div>
 </fieldset>
 <p>
  @Html.ActionLink("Edit", "Edit", new { id=Model.UsersInRolesID }) |
 @Html.ActionLink("Back to List", "Index")
 </p>

and this is what happen when i go to the index view every thing work

and when i press Details and go for the Details view this is what hipping

here is my problem its only give me the User Name and Role Name Label and don't show the actual User Name and Role Name so what i'm doing wrong and thanks for any help

Answer 1

i solve the problem by changing the Details method

public ActionResult Details(int id = 0)
    {

        UsersInRoles usersinroles = db.UsersInRoles.Include(u => u.UserProfile).Include(r => r.Role).Where(i => i.UsersInRolesID == id).SingleOrDefault();
        if (usersinroles == null)
        {
            return HttpNotFound();
        }
        return View(usersinroles);
    }