How to Update exist course id in EmployeeCourse table

Question

 

 

in this image above explain what i need

in the following diagarm i have 3 tables Course Employee EmployeeCourse how to save exist courses in edit post and save data In code below i can get data in edit view get but

i cannot update and save data in database in EmployeeCourse table with existing courses

update your edit view model to have a collection of CourseVm
public class EditEmployeeVm
{
public int Id { set; get; }
public string Name { get; set; }
public List<SelectListItem> Courses { get; set; }
public int[] CourseIds { set; get; }
public List<CourseVm> ExistingCourses { set; get; }
}

public class CourseVm
{
public int Id { set; get; }
public string Name { set; get; }
}
Now in your Edit GET action, populate the ExistingCourse collection.

public ActionResult Edit(int id)
{
var vm = new EditEmployeeVm { Id=id };
var emp = db.Employees.FirstOrDefault(f => f.Id == id);
vm.Name = emp.Name;
vm.ExistingCourses = db.EmployeeCourses
.Where(g=>g.EmployeeId==id)
.Select(f => new CourseVm { Id = f.CourseId,
Name = f.Course.Name}).ToList();

vm.CourseIds = vm.ExistingCourses.Select(g => g.Id).ToArray();
vm.Courses = db.Courses.Select(f => new SelectListItem {Value = f.Id.ToString(),
Text = f.Name}).ToList();
return View(vm);
}
I loop through the ExistingCourses collection and display it.

@model EditEmployeeVm
@using (Html.BeginForm())
{
@Html.HiddenFor(g=>g.Id)
@Html.LabelFor(f=>f.Name)
@Html.DropDownList("AvailableCourses" ,Model.Courses,"Select")
<h4>Existing courses</h4>
<div id="items"></div>
foreach (var c in Model.ExistingCourses)
{
<div class="course-item">
@c.Name <a href="#" class="remove" data-id="@c.Id">Remove </a>
<input type="text" name="CourseIds" value="@c.Id" />
</div>
}
<input type="submit"/>
}
the view to handle the remove and add of a course.

@section scripts
{
<script>
$(function() {
$(document).on("click",".remove",function(e) {
e.preventDefault();
$(this).closest(".course-item").remove();
});
$('#AvailableCourses').change(function() {
var val = $(this).val();
var text =$("#AvailableCourses option:selected").text();
var existingCourses = $("input[name='CourseIds']")
.map(function() { return this.value; }).get();

if (existingCourses.indexOf(val) === -1) {
// Not exist. Add new
var newItem = $("<div/>").addClass("course-item")
.append(text+' <a href="#" class="remove" data-id="'+val+'">Remove </a>');
newItem.append('<input type="text" name="CourseIds"
value="' + val + '" />');
$("#items").append(newItem);
}
});
})
</script>
}
So when you submit the form, The CourseIds property will have the course ids (as an array).

[HttpPost]
public ActionResult Edit(EditEmployeeVm model)
{
// WHAT CODE I WRITE HERE TO CHECK EXISTING COURSES AND SAVE DATA
}