in this link explain what i need
http://www.mediafire.com/view/2c3f2gidp0ruqdn/ARGK5.jpg in the following diagram 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
}