Source now available on github:
https://github.com/cbruen1/mvc4-many-to-many
This post stems from an answer I gave to a question on stackoverflow.com about saving many to many relationship data in MVC using Entity Framework 4.1 code first. The scenario is an application that creates a user and allows that user to register for one or more courses, with the courses presented as a list of check boxes. A user is able to register for many courses and a course can have many users which is where the many to many scenario comes in. The difficulty the original poster had was rendering and naming the check boxes correctly and getting them posted back in the Create view.
In this first part I will set up the overall solution and get it to a state where it will add users to the system without any courses. In part 2 I will add the necessary updates to allow one or more courses to be saved as part of a user’s profile. In part 3 I’ll show how to edit a user and change their name and the courses they’ve been registered for, display a user’s details in read only mode, and delete a user from the app.
For the project I used Visual Studio 2012 but if you don’t have this you can download the express version from here:
or
http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products
I created a new solution containing 3 individual projects – web, domain model, and database. I used the intranet template for the web app – by default this will add a Home Controller and Home folder within the Views folder with Index, About, and Contact views. Complete the following steps:
- Open visual Studio and create a new ASP.NET MVC4 intranet application project called MVC4ManyToMany
- Right click the solution and add a new Class Library project called MVC4ManyToManyDomain
- Right click the solution again and add another Class Library project called MVC4ManyToManyDatabase
In the MVC4ManyToManyDomain project the classes involved are a UserProfile class and a Course class. Delete the Class1 class and add 2 classes called Course and UserProfile.
public class Course { public int CourseID { get; set; } public string CourseDescripcion { get; set; } public virtual ICollection<UserProfile> UserProfiles { get; set; } } public class UserProfile { public UserProfile() { Courses = new List<Course>(); } public int UserProfileID { get; set; } public string Name { get; set; } public virtual ICollection<Course> Courses { get; set; } }
To set up the database and the EF DbContext delete the default Class1 class from the MVC4ManyToManyDatabase project and add a class called MVC4ManyToManyContext. You will need to reference EntityFramework and the MVC4ManyToManyDomain project and add using directives for both. To do this right click References and add MVC4ManyToManyDomain from the Solution section and Browse to {Your solution directory}\MVC4ManyToMany\packages\EntityFramework.5.0.0\lib\net45\EntityFramework.dll.
using System.Data.Entity; using MVC4ManyToManyDomain; namespace MVC4ManyToManyDatabase { public class MVC4ManyToManyContext : DbContext { public DbSet<UserProfile> UserProfiles { get; set; } public DbSet<Course> Courses { get; set; } } }
By default, the Entity Framework looks for a connection string named the same as the object context class. It automatically creates a SQL Server Express database in the App_Data folder using the same name as the DB Context class.
Next in the main web project add a folder called ViewModels to the Model folder. In this folder add 3 classes – UserProfileViewModel, CourseViewModel, and AssignedCourseData.
public class UserProfileViewModel { public int UserProfileID { get; set; } public string Name { get; set; } public virtual ICollection<AssignedCourseData> Courses { get; set; } } public class CourseViewModel { public int CourseID { get; set; } public string CourseDescripcion { get; set; } public virtual ICollection<UserProfileViewModel> UserProfiles { get; set; } } public class AssignedCourseData { public int CourseID { get; set; } public string CourseDescription { get; set; } public bool Assigned { get; set; } }
To help us transform our domain model to view model and vice versa we can create a little helper. In the web project’s Model\ViewModel folder add a static class called ViewModelHelpers (you’ll need to add “using MVC4ManyToManyDomain;”):
using MVC4ManyToManyDomain; //... public static class ViewModelHelpers { public static UserProfileViewModel ToViewModel(this UserProfile userProfile) { var userProfileViewModel = new UserProfileViewModel { Name = userProfile.Name, UserProfileID = userProfile.UserProfileID }; return userProfileViewModel; } public static UserProfile ToDomainModel(this UserProfileViewModel userProfileViewModel) { var userProfile = new UserProfile(); userProfile.Name = userProfile.Name; userProfile.UserProfileID = userProfile.UserProfileID; return userProfile; } }
Next, right click the Controllers folder in the web project and select Add Controller. In the dialog box name it UserProfileController and Select Empty MVC Controller from the Template drop down.
Add a reference to the MVC4ManyToManyDomain project and add these using statement to the top of the page:
using MVC4ManyToMany.Models.ViewModels; using MVC4ManyToManyDatabase; using MVC4ManyToManyDomain;
In the Controller paste the folowing code:
public class UserProfileController : Controller { private readonly MVC4ManyToManyContext db = new MVC4ManyToManyContext(); public ActionResult Index() { var userProfiles = db.UserProfiles.ToList(); var userProfileViewModels = userProfiles.Select(userProfile => userProfile.ToViewModel()).ToList(); return View(userProfileViewModels); } public ActionResult Create() { var userProfileViewModel = new UserProfileViewModel { }; return View(userProfileViewModel); } [HttpPost] public ActionResult Create(UserProfileViewModel userProfileViewModel) { if (ModelState.IsValid) { var userProfile = new UserProfile { Name = userProfileViewModel.Name }; AddOrUpdateCourses(userProfile, userProfileViewModel.Courses); db.UserProfiles.Add(userProfile); db.SaveChanges(); return RedirectToAction("Index"); } return View(userProfileViewModel); } private void AddOrUpdateCourses(UserProfile userProfile, IEnumerable<AssignedCourseData> assignedCourses) { if (assignedCourses != null) { foreach (var assignedCourse in assignedCourses) { if (assignedCourse.Assigned) { var course = new Course { CourseID = assignedCourse.CourseID }; db.Courses.Attach(course); userProfile.Courses.Add(course); } } } } }
Next we will add a link to the Create user profile View from our main Index view. In the Home\Index.cshtml file add the following code:
<p> @Html.ActionLink("User Profile Page", "Index", "UserProfile") </p>
Next we need to add 2 Views for our user profile, Index and Create. In the Views folder of the web project right click and select Add folder. Name the folder “UserProfile”. In the Index action of the UserProfileController right click and select “Add View”:
– Name the View “Index”
– Select the Razor View engine
– Click “Create strongly typed view” and select the UserProfileViewModel class as the Model class
– In the scaffold template select “List”. Check the “Use a layout or master page” check box
This adds a view that will display all the users in our system and also adds a link to our Create view which we will add next. In the Create action (NOT the one decorated with the “HttpPost” attribute) of the UserProfileController right click and select “Add View”:
– Name the View “Create”
– Select the Razor View engine
– Click “Create strongly typed view” and select the UserProfileViewModel class as the Model class
– In the scaffold template select “Create”. Check the “Use a layout or master page” check box
– Open the Create.cshtml view and delete the fields that refer to UserProfileID if present
Now we have a view that will allow us to add a user to the system. Run the application which takes us to the main Index page. Click on the link to the Create user profile page that we added earlier. We are now able to add users to the system. All we have is one field for a name but it demonstrates the concept and you’re free to add other fields to the model as you see fit.
That’s it for the first part. This is a pretty basic and simplified example to get up and running with this scenario. In the real world we would ideally do this using Test Driven Development (TDD) and have a test project in the solution, and also add error handling, dependency injection, and other such stuff to make it more robust and testable.
In part 2 I’ll show how to add courses to the system, how to list all the courses when creating a new user, and how to save one or more courses as part of a user’s profile.
16 comments
Comments feed for this article
May 4, 2015 at 2:28 pm
Tiebebe Hailu
Thank you for the thorough explanation. I have one problem though. Everything was working fine but then it started creating a new course (instead of using the one already in the database) just at the point where the newly added userprofile is saved to the database.(i.e. when db.SaveChanges() is executed). I have followed the steps correctly (except that the logic in the action is divided into business layer and data layer in my project). I have tried retriving the course from the db using the id passed in the viewmodel, instead of new Course(), but that did not change anything. Any suggestions?
May 4, 2015 at 7:30 pm
codenodes
Hi can you paste your code into somewhere like pastebin.com and I can take a look? Thanks, Ciaran
May 4, 2015 at 7:40 pm
codenodes
In AddOrUpdateCourses have you included the ‘db.Courses.Attach(course);’ line?
May 5, 2015 at 7:57 am
Tiebebe Hailu
Thanks. The project is a maze of layers but I have put up what it basically does on pastebin. As I said, the data is passed correctly all the way and just when the post (which is the equivalent of your userprofile) is saved, a new theme (course) is created and also entered into the postTheme table. http://pastebin.com/H0k9iAT0
May 5, 2015 at 2:04 pm
codenodes
My first thoughts after seeing your code is that you are creating a new context each time you call AttachEntity, and creating it again in SaveEntity. This means you are creating a new database connection for each new theme. I think you should create the db context outside of the for loop so you’re using the same context when you attach the new theme, something like this:
using (var context = new MyContext())
{
foreach (var themeModel in postViewModel.ThemeModels)
{
// etc.
}
RepositoryFactory.SaveEntity(post);
}
May 5, 2015 at 2:31 pm
Tiebebe Hailu
yaay! That worked! Thank you.
May 5, 2015 at 2:45 pm
codenodes
Great 🙂
January 5, 2017 at 8:05 pm
Jorge Moreira
Hi, loved the explanation but I’m having a problem in the views. Html.EditorFor don’t render the checkboxes and instead render the courses ID’s.
January 6, 2017 at 2:29 pm
codenodes
Hi Jorge, is this in Create or Edit (or both)?
January 6, 2017 at 3:47 pm
Jorge Moreira
Both, if you gave me your email or something to speak with you would be really nice. ‘Cause my courses only appear the Id of them
January 6, 2017 at 4:14 pm
codenodes
Can you put your code on Github? That way I can download it and run it locally
January 7, 2017 at 2:19 pm
codenodes
Jorge after looking at your code I see that you’re not using the Editor template for the check boxes. This is described in part 2 – you’ll see the link above. You basically create a new folder called EditorTemplates in your Views\Shared folder if you don’t already have one. Add a new partial view and name it the same as your Viewmodel class – in my case it’s AssignedCourseData. Then the EditorFor will render the check boxes correctly
January 7, 2017 at 3:31 pm
Jorge Moreira
That was the problem!!! Thanks a lot for taking your time to help me! Best regards!
January 7, 2017 at 8:30 pm
Saroj Bhattarai
My scenario is something different than this but it kinda helped.I am working on resume builder project in which I want to let user add as many experience as they like.I am finding pretty hard to send collection of experience back to controller to save it in a DB.I asked this question in SO as well but it was put on hold idk for what reason.Therefore can you throw me a light about how to proceed ??
January 7, 2017 at 8:33 pm
Saroj Bhattarai
I wud be really grateful and let me tell you that i only want the gist not the detail explanation.Thanking you in advance.
January 9, 2017 at 12:03 pm
codenodes
Hi Saroj, do you have your code on Github? If so you can send me the link – cbruen1 at yahoo dot com.