Drowdown Cascading in Asp.Net MVC

In this post i will show you how we can cascade the dropdown or we can say how we can change the content of second dropdown on the basis of first dropdown.

First of all we have to pass the Viewbag having list of items which we wants to bind in the dropdown. And another list with the empty items. Below is the code for the controller side through which we can pass our list of items from controller to view using the viewbag.

 public ActionResult Create()
        {
            SectionMasterModel model = new SectionMasterModel();
            string SchoolCode = Convert.ToString(Session["SchoolCode"]);
            ViewBag.CourseId = new SelectList((from p in db.CourseMasters where 
            p.SchoolCode == SchoolCode select p).ToList(), "CourseId", 
            "CourseName");
            ViewBag.ClassId = new SelectList(Enumerable.Empty<SelectListItem>());
            return View(model);
        }

After this i will show you the view code where we bind the dropdown. Select course is the Course dropdown and the select class is the the empty list which is bind after the change of the select course dropdown. I have use a @onchange function for the binding of the class dropdown.

 <div class="form-group">
                            <label>Select Course</label>
                            @Html.DropDownList("CourseId", null, "Select Course", htmlAttributes: new { @class = "form-control", @onchange = "BindClass()" })
                            @Html.ValidationMessageFor(m => m.CourseId, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group">
                            <label>Select Class</label>
                            @Html.DropDownList("ClassId", null, "Select Class", htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.ClassId, "", new { @class = "text-danger" })
                        </div>

After that i have written a JavaScript code for the onchange event. In which i use the ajax call for bind the class list in the dropdown.

<script type="text/javascript">
    function BindClass() {
    var CourseId = $('#CourseId').val();
    //alert(course_code);
    $.ajax({
    url: '@Url.Action("FillClass", "SectionMaster", new { area = "School" })',
    type: "GET",
    dataType: "JSON",
    data: { CourseId: CourseId },
    success: function (classes) {
    $("#ClassId").html("");
    var optionhtml1 = '<option value="">' + "--Select Class--" + '</option>';
    $("#ClassId").append(optionhtml1);
    $.each(classes, function (i) {
    var optionhtml = '<option value="' + classes[i].Value + '">' + classes[i].Text + '</option>';
    $("#ClassId").append(optionhtml);
    });
    }
    });
    }
</script>

The url action hits the FillClass action method which i wrote in the controller side. Below is the code where i pass a parameter for the courseid from which we get the classes according to that course.

 public ActionResult FillClass(int CourseId)
        {
            var classes = new SelectList(db.ClassMasters.Where(c => c.CourseId == 
            CourseId).ToList(), "ClassId", "ClassName");
            return Json(classes, JsonRequestBehavior.AllowGet);
        }

After doing this we can cascade the dropdown and also i attached a youtube link in which you can find a detailed video about dropdown cascading.