Question

我需要的图像

我需要在编辑员工数据时向我显示之前提交的课程

这是我的secnario

创建视图中的

课程drowpdown用户选择三门课程

的Delphi
闪存
C ++

然后点击employee.it的提交按钮将提交3个课程

我需要检索之前为员工马丁提交的课程

来自数据库

编辑视图中的

（获取）

我需要表明：

course name course id 
Delphi              1

Flash               2

c++                3

和CourseId将被隐藏

我在编辑视图中写的内容显示选定的课程

我的代码如下面的视图和控制器

Edit.cs.html view
@model WebCourse.Models.Customemployee2
<body>
<div>
@using (Html.BeginForm())
{
<div>
Name:@Html.TextBoxFor(a => a.Name)
<br />
Courses:@Html.DropDownList("CourseId")

<table id="tb2"></table>
<br />
<input type="submit" />
</div>
}

</div>
</body>


in empcourse controller

namespace WebCourse.Controllers
{
public class empcourseController : Controller
{
mycourseEntities db = new mycourseEntities();

// GET: empcourse

public ActionResult Edit(int id)
{
Employee old = db.Employees.Find(id);
if (old != null)
{
var vm = new Customemployee2();
vm.Name = old.Name;

ViewBag.CourseId = new SelectList(db.Courses.ToList(), "Id", "CourseName");
return View(vm);
}

}
}
}
model view Customemployee2
namespace WebCourse.Models
{
public class Customemployee2
{
public string Name { get; set; }
public int CourseId { get; set; }
public List<EmployeeCourse> Courses { get; set; }

}
}

Answer 1

我建议您更新编辑视图模型以获得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; }
}

现在，在您的编辑GET操作中，填充ExistingCourse集合。

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

现在，您可以在“编辑”视图中循环浏览ExistingCourses集合并显示它。

@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"/>
}

您还应该在视图中使用以下javascript代码来处理删除和添加课程。

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

因此，当您提交表单时，CourseIds属性将具有课程ID（作为数组）。

[HttpPost]
public ActionResult Edit(EditEmployeeVm model)
{
  // to do : check model.ExistingCourses and save the data now
}

BTW，同样可以用于您的创建表单。

在编辑数据时检索在编辑视图（get）中选择的课程ID和课程名称

1 个答案: