当我通过jquery删除课程时,提交按钮单击不保存课程数据

时间:2016-09-05 12:31:29

标签: jquery asp.net-mvc-4 linq-to-sql linq-to-entities entity-framework-5

问题

当我使用删除按钮删除课程时。

它将从界面中删除(在客户端由jquery删除)但不保存课程

如果我单击“提交”按钮,则在数据库(sql server服务器端)中删除

单击提交按钮以在编辑视图中保存课程[HTTP POST]保存

如果我添加新课程

成功

意思是我可以保存新课程,但如果我删除课程我无法保存

图片展示

course removed not save in sql server database

使用的模型类是

更新

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; }
    }
}

更新     编辑视图[HTTP GET]      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.Id,
                                        Name = f.Course.CourseName
                                    }).ToList();

            vm.CourseIds = vm.ExistingCourses.Select(g => g.Id).ToArray();
            vm.Courses = db.Courses.Select(f => new SelectListItem
            {
                Value = f.Id.ToString(),
                Text = f.CourseName
            }).ToList();

            return View(vm);
        }

在编辑视图中,通过jquery

显示删除课程的代码
@model WebCourse.Models.EditEmployeeVm



    <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>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {

            @Html.HiddenFor(g => g.Id)
            @Html.DropDownList("AvailableCourses", Model.Courses, "Select")
            <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>
            }

        }
    </div>
</body>
</html>
in edit view httppost that update data in employeecourse table
 [HttpPost]
        public ActionResult Edit(EditEmployeeVm model)

        {
            var emp = db.Employees.FirstOrDefault(f => f.Id == model.Id);

            foreach (var couseid in model.CourseIds)
            {
                db.EmployeeCourses.Add(new EmployeeCourse { CourseId = couseid, EmployeeId = emp.Id });
                db.SaveChanges();

            }

            return View();
        }

更新

我真的需要用usine slice函数java脚本替换我的代码jquery来实际删除索引

更新

我在代码中执行以下操作

 var existingCourseIds = db.EmployeeCourses.Where(g => g.EmployeeId == model.Id && g.CourseId!=null)
                             .Select(f => f.CourseId.Value).ToList();
            var removedCourseIds = existingCourseIds.Except(model.CourseIds);
            //Now loop through these and delete it from db
            foreach (var removedCourseId in removedCourseIds)
            {
                db.EmployeeCourses.Remove(db.EmployeeCourses.Find(removedCourseId));
                db.SaveChanges();
            }

它在foreach

中找到的行中给出了null异常

错误异常值不能为空\ r \ n参数名称实体

以下评论中的问题详情链接

1 个答案:

答案 0 :(得分:0)

视图模型中的CourseIds属性将选择用户选择的ID(删除或添加后)。现在,在您的HttpPost操作方法中,您需要将其与现有数据(该员工的EmployeeCourses)进行比较,并找出CourseIds属性中不存在的课程ID值。这将是用户必须在UI中删除的Id。获得Id后,可以将其从db中删除。

您可以使用LINQ Except方法找出2个列表之间的区别。

[HttpPost]
public ActionResult Add(EditEmployeeVm model)
{
    var existingCourseIds = db.EmployeeCourses.Where(g => g.EmployeeId == model.Id)
                              .Select(f=>f.CategoryId).ToList();
    var removedCourseIds = existingCourseIds.Except(model.CourseIds);
    //Now loop through these and delete it from db
    foreach (var removedCourseId in removedCourseIds)
    {
       // TO DO : remove from db
    }
    // Your other save part goes here
    return RedirectToAction("Add");
}