Many to many in asp.net mvc view and controller - asp.net-mvc

Question

How do I handle a many to many object mapping in the view and controller in the context of users and roles?
I used entity framework to map to pure POCOs like this:
public class Role
{
public int RoleId { get; set; }
public string RoleName { get; set; }
public List<User> Users { get; set; }
}
public class User
{
public int UserId { get; set; }
public List<Role> Roles { get; set; }
}
In my view, I'd like to add a User to a role using checkboxes. I list all the roles then check one to add the user to that role. How do I handle this?

Answer 1

I would start by designing a view model for this scenario:
public class UserRolesViewModel
{
public int UserId { get; set; }
public IEnumerable<RoleViewModel> Roles { get; set; }
}
public class RoleViewModel
{
public int RoleId { get; set; }
public bool InRole { get; set; }
public string RoleName { get; set; }
}
Then a roles controller:
public class RolesController : Controller
{
public ActionResult Edit(int userId)
{
// TODO: Use a repository to fetch the roles associated to the given
// user id and then AutoMapper to map your model POCOs
// to a UserRolesViewModel
var model = new UserRolesViewModel
{
UserId = userId,
Roles = new[]
{
new RoleViewModel { RoleId = 1, InRole = false, RoleName = "Role 1" },
new RoleViewModel { RoleId = 2, InRole = true, RoleName = "Role 2" },
new RoleViewModel { RoleId = 3, InRole = true, RoleName = "Role 3" }
}
};
return View(model);
}
[HttpPut]
public ActionResult Update(UserRolesViewModel model)
{
// Here you will get the view model back containing the
// user id and the selected roles
// TODO: use AutoMapper to map back to a POCO and
// invoke the repository to update the database
return RedirectToAction("Edit");
}
}
then the Edit view (~/Views/Roles/Edit.cshtml):
#model YourAppName.Models.UserRolesViewModel
#{
ViewBag.Title = "Edit user roles";
}
<h2>Roles for user #Model.UserId</h2>
#using (Html.BeginForm("Update", "Roles"))
{
#Html.HttpMethodOverride(HttpVerbs.Put)
#Html.HiddenFor(x => x.UserId)
#Html.EditorFor(x => x.Roles)
<input type="submit" value="update roles" />
}
and finally the corresponding editor template (~/Views/Roles/EditorTemplates/RoleViewModel.cshtml):
#model YourAppName.Models.RoleViewModel
<div>
#Model.RoleName
#Html.HiddenFor(x => x.RoleId)
#Html.CheckBoxFor(x => x.InRole)
</div>