Model not binding in View MVC

Question

I have the following View

@using LearningMVCDAL
@using LearningMVCDAL.Classes
@model Employee

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Employee</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Gender)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Gender", new List<SelectListItem>{ 
       new SelectListItem { Text="Male", Value="Male"},
       new SelectListItem { Text="Female", Value="Female"}},"Select Gender")
            @Html.ValidationMessageFor(model => model.Gender)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>
        <div class="editor-label">
            @Html.Label("Department")
        </div>
        <div class="editor-field">
            @Html.DropDownList("Department", (SelectList)ViewBag.Departments,"Select Department")
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

and here is my code in the controller for the POST request.

 [HttpPost]
        public ActionResult Create(Employee employeeform)
        {
            if (ModelState.IsValid)
            {
                Employee employee = new Employee();

                employee.Name = employeeform.Name;
                employee.Gender = employeeform.Gender;
                employee.City = employeeform.City;
                employee.Department.ID = employeeform.Department.ID;
                objEmployeeBusinessLayer.AddEmployee(employee);
                List<Department> departments = new List<Department>();
                departments = objDepartmentBusinessLayer.Department;
                SelectList departmentList = new SelectList(departments, "ID", "Name");
                ViewBag.Departments = departmentList;
            }
            return View();
        }

With the above code I am able to get Name, Gender and City but not Department as it is an class object. Please help me to bind the properties to Department Property Also.

Answer 1

Try to add a property in your Employee class for the DropDownList as selected departmentId, like below:

public class Employee{
  public int selectedDepartmentId {get;set;}
  // Other properties
}
@Html.DropDownList("selectedDepartmentId",(SelectList)ViewBag.Departments,"Select Department",String.Empty)

Or you can change the DropDownList in your view like below:

@Html.DropDownList("Department.DepartmentId" , (SelectList)ViewBag.Departments,"Select Department",String.Empty)

Answer 2

Change to:

@Html.DropDownList("DepartmentId", (SelectList)ViewBag.Departments,"Select Department")

public class Employee
    {
        ...
        public string DepartmentId { get; set; } // now binding
        public Department Department { get; set; }
    }

Because you can not bind the selected value from a drop-down list to the Custom class.

[HttpPost]
public ActionResult Create(Employee employeeform)
{
    if (ModelState.IsValid)
    {
        ...
        Employee employee = new Employee();
        employee.DepartmentID = employeeform.DepartmentId;
        ...

    }
        return View();
 }