如何将集合从视图传递到ASP.NET MVC4中的控制器

Question

I want to pass a collection of skills id from my view to controller action, i have a dropdownlist of SKILLS :

         <select name="skills">
           <option value="0">Java</option>
           <option value="1">C++</option>
           <option value="2">Fortran</option>
           <option value="3">ASP</option>
         </select>

i want that user can select many skills from dropdown and store their value in a collection ,ie an array, and then post that array to action in controller as follow [employee and skills have a manytomany relationship]:

 [HttpPost]
 public ActionResult AddEmp(Employee emp ,IEnumerable<Skills> skills )

 {

   DBCtx db=new DbCtx();
   db.employees.Add(emp);
   var emp_id=db.SaveChanges();

   var employee=db.employees.Find(emp_id);

   foreach(item in skills)
   {
      var skill = db.skills.Find(item);
      employee.skills.Add(skill);
   }
   db.SaveChanges();

   return View();
   } 

How can i achieve this ,thanks in advance ....

Answer 1

You have quite few options on front end . Razor, Angular, Jquery... To simplfy things in following example i have used Razor view. I dont think you need to pass Skills as a strongly type object as you only need Id of selected Skills . Also in the example i have the skills list static / hard coded into razor view, ideally it should be bound from backend.

Saying that lets assume our Employee View Model as it follows

 public class EmployeeViewModel
    {
        public EmployeeViewModel()
        {
            SelectedSkills=new List<int>();
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public List<int> SelectedSkills { get; set; }
    }


   public class Skills
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Then our Controller (EmployeeController.cs) would be .(please ignore the EF logic after data is bound to class)

    public class EmployeeController : Controller
        {
            public ActionResult Index()
            {
                return View("Employee",new EmployeeViewModel());
            }
            [HttpPost]
            public ActionResult AddEmp(EmployeeViewModel employee)

            {

                var idOfEmployee=AddEmployee(employee);

                foreach (var item in employee.SelectedSkills)
                {
                    AddSkill(idOfEmployee,item);
                }


                return View("Employee");
            }
       private void AddSkill(int idOfEmployee, int skillId)
        {
            // your EF logic
        }

        private int AddEmployee(EmployeeViewModel emp)
        {
            // your EF logic, get your id of the inserted employee
            return 0;
        }
     }

Then our Employee.cshtml view could be

@using System.Web.UI.WebControls
@using WebApplication4.Controllers
@model  WebApplication4.Controllers.EmployeeViewModel
@{
    ViewBag.Title = "Employee";
}

<h2>Employee</h2>

@{var listItems = new List<Skills>
  {
      new Skills { Id = 0,Name="Java" },
      new Skills { Id = 1,Name="C++" },
      new Skills { Id = 2,Name="Fortran" }
  };
}
@using (Html.BeginForm("AddEmp", "Employee"))
{
    @Html.TextBoxFor(m => m.Name, new { autofocus = "New Employee" })
    <br/>
    @Html.ListBoxFor(m => m.SelectedSkills,
        new MultiSelectList(listItems, "Id", "Name",@Model.SelectedSkills)
        , new { Multiple = "multiple" })
    <input type="submit" value="Submit" class="submit"/>
}