Binding dropdownlist with database table and get selected item n MVC

Question

I am new to asp.net mvc.

I have a employee registration view, where i have a dropdown-list for for department, I want to bind the dropdown-list with a database table tblDepartment and i have did it. But I don't know how to get the select item of the list on post-back.

Employee Controller

[HttpGet]
public ActionResult AddEmployee()
{
    ViewBag.Departments = new SelectList(_department.GetAll(), "id", "name");
    return View(_employee.Get());
}

[HttpPost]
public ActionResult AddEmployee(FormCollection data)
{
    var emp = _employee.Get();
    emp.name = data["name"];
    emp.age = Convert.ToInt32(data["age"]);
    emp.dept_id = Convert.ToInt32(data["dept_id"]); // return dept_id 0 always.
    emp.city = data["city"];
    _employee.Insert(emp);
    return RedirectToAction("Index");
}

View

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.name, "Name", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.age, "Age", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.dept_id, "Department", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("Departments", "Select Department")
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.city, "City", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.city, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.city, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Answer 1

You are defining your dropdownlist with name DropDownLists i.e. @Html.DropDownList("Departments" which will be the name of the drop-down list so it will be rendered like:

<select name="Departments">
</select>

and in form post the values are posted in key value pair and the key is the name of the input element.

But in post request you are finding the posted value in dept_id, you need to read from correct key in FormCollection which would be:

emp.dept_id = Convert.ToInt32(data["Departments"]);

Side Note:

You should be using strongly typed helpers to post values directly to model and let the model binder do the magic for you, instead of populating the model manually.

For that your helper method would be DropDownListFor :

@Html.DropDownListFor(x=>x.dept_id ,ViewBag.Departments as SelectList, "Select Department")

and in action method set the parameter to be mode object:

[HttpPost]
public ActionResult AddEmployee(Employee employee)
{
     If(ModelState.IsValid)
     {
        _employee.Insert(employee);
        return RedirectToAction("Index");
     }
     else
     {
         return View(employee);
     }
}