How to pass collection from view to controller in 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 ,i.e 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 ....

A <select> only posts back one value - the value of the selected option, and your method need to be public ActionResult AddEmp(int EmpSkills) to match the name of your form control. but why are you doing this. Use a model and bind to your model using the strong types HtmlHelper methods (and if you want to post multiple values, then the dropdownlist needs the multiple attribute) — user3559349
– user3559349, Commented Aug 20, 2017 at 11:57
@StephenMuecke i am wandering for how can i bind it with model in view... — Mubsher Mughal
– Mubsher Mughal, Commented Aug 20, 2017 at 12:07
You have not shown your model! You need a view model with IEnumerable<int> SelectedSkills and IEnumerable<SelectListItem> SkillsList and in the view @Html.DropDownListFor(m => m.SelectedSkills, Model.SkillsList) (or for a multiple select, then ListBoxFor(m => m.SelectedSkills, Model.SkillsList) — user3559349
– user3559349, Commented Aug 20, 2017 at 12:09

Gonzales Gokhan · Accepted Answer · 2017-08-20 12:53:07Z

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

answered Aug 20, 2017 at 12:53

Gonzales Gokhan

4924 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mubsher Mughal Over a year ago

but how it can select multiple skills from the above Razore view

Gonzales Gokhan Over a year ago

Try to run this example. It will render as a select list which will populate the list and allow you to select multiple items within . It will render as a select element .

Mubsher Mughal Over a year ago

it works fine but there is an issue,it require to hold Ctrl key to select mutiple items ,how i can put a check box for selection of each item in list...

Gonzales Gokhan Over a year ago

Yup. That is expected behaviour . You need to search how to put checkboxs with within dropdown or create checkbox list. I believe it is another question. Please don't forget to mark as an answer .

Gonzales Gokhan Over a year ago

No problem . Do not forget to mark the answer above as solution please.You simply need to mark an answer as correct (the green check image). Therefore everyone knows that solves the problem

Collectives™ on Stack Overflow

How to pass collection from view to controller in asp.net MVC4

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related