Code first, Data is not inserting into database using cascading dropdown list

Question

in my create [ Http post ] method, all data is inserting except the cascading drop down items. I have Department, Subject and section model. One department can have many subjects, one subject can have many sections. after adding jquery submit portion, it shows, form can not be submitted! then it returns to the index! here is my codes from Section Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Section section)
{
    if (ModelState.IsValid)
    {
        db.Sections.Add(section);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.DepartmentId = new SelectList(db.Departments, "DepartmentId", "Name", section.DepartmentId);
    ViewBag.SubjectId = new SelectList(db.Subjects, "SubjectId", "SubjectName", section.SubjectId);
    return View(section);
}

Here is my create.chtml under Secion view:

@model MvcBCS.Models.Section

@{
  ViewBag.Title = "Create Section";
}

@section scripts {
<script type="text/javascript">

    $(function() {
        $.getJSON("/Section/Departments/List", function(data) {
            var items = "<option> Show Department List </option>";
            $.each(data, function(i, department) {
                items += "<option value='" + department.Value + "'>" + department.Text + "</option>";
            });
            $("#Departments").html(items);
        });

        $("#Departments").change(function() {
            $.getJSON("/Section/Subjects/List/" + $("#Departments > option:selected").attr("value"), function(data) {
                var items = "<option> Show Subject List </option>";
                $.each(data, function(i, subject) {
                    items += "<option value='" + subject.Value + "'>" + subject.Text + "</option>";
                });
                $("#Subjects").html(items);
            });
        });


    });

    $(function() {
        $('#submit').on("click", function () {

            var form = $(this).parent("form");

            $.ajax({
                type: "POST",
                url: form.attr('action'),
                data: form.serialize()
            })
                .success(function() {
                    alert("Your form has been submitted");
                })
                .error(function() {
                    alert("Your form has not been submitted");
                });
            return false;

        });
    });


</script>
}
<h2>Create Section</h2>

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

    <fieldset>
        <legend>Section</legend>

        <label for="Departments">Departments</label>
           <select id="Departments" name="Departments"></select>
           <label for="Subjects">Subjects</label>
           <select id="Subjects" name="Subjects"></select>
           <label for="Sections">Section</label>
           <input id="Sections" name="Sections" type="text" />
           <p>
                <input type="submit" id="submit" value="Create" />
            </p>
    </fieldset>
}

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

Answer 1

I think you need to change the name/Id of your both dropdownlist regarding your properties in your section.

For Departments to DepartmentId and Subjects to SubjectId. They need to match with so in your Post the binder will attach the correct value