DropDown Cascading in MVC4 Using Entity Framework

Getting Started

1. Create a new Project. Open Visual Studio 2012.
2. Go to "File" => "New" => "Project...".
3. Select "Web" in installed templates.
4. Select "ASP.NET MVC 4 Web Application".
5. Enter the Name and choose the location.
6. Click "OK".

I would recommend reading this article first to learn about Entity Framework: http://www.c-sharpcorner.com/UploadFile/raj1979/unit-testing-in-mvc-4-using-entity-framework/

Once you configure Entity Framework your window will look like this:

This is my database layout:

The following is the controller code:

using MVCDropDownCascadingSample.Models;
StudentEntities _studentEntities = new StudentEntities();
public ActionResult Index()
{
    ViewBag.Names = _studentEntities.Names.ToList();
    ViewBag.Classes = _studentEntities.Classes.ToList();
    ViewBag.Marks = _studentEntities.Marks.ToList();
    return View();
}
/// <summary>
/// Loads all classes based on student id
/// </summary>
/// <param name="studentId"></param>
/// <returns></returns>
private IList<Class> GetClasses(int studentId)
{
    return _studentEntities.Classes.Where(m => m.StudentId == studentId).ToList();
}
/// <summary>
/// load all marks based on class id
/// </summary>
/// <param name="classId"></param>
/// <returns></returns>
private IList<Mark> GetMarks(int classId)
{
    return _studentEntities.Marks.Where(c => c.MarkId == classId).ToList();
}
/// <summary>
/// Filter classes based on student id
/// </summary>
/// <param name="studentid"></param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByStudentId(string studentid)
{
    var classesList = this.GetClasses(Convert.ToInt32(studentid));
    var classesData = classesList.Select(m => new SelectListItem()
    {
        Text = m.ClassName,
        Value = m.ClassId.ToString(),
    });
    return Json(classesData, JsonRequestBehavior.AllowGet);
}
/// <summary>
/// filter marks based on class id
/// </summary>
/// <param name="classid"></param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadMarksByClassId(string classid)
{
    var marksList = this.GetMarks(Convert.ToInt32(classid));
    var marksData = marksList.Select(c => new SelectListItem()
    {
        Text = c.MarksCount,
        Value = c.MarkId.ToString(),
    });
    return Json(marksData, JsonRequestBehavior.AllowGet);
}

Now add a new Razor View, as in the following:



The following is the code and scripts for the view:

@model MVCDropDownCascadingSample.Models.StudentEntities
@{
    ViewBag.Title = "Index";
}
<h2>Students</h2>
 <script type="text/javascript">
     $(document).ready(function () {
         $("#ddlNames").change(function () {
             var studentId = $(this).val();
             $.getJSON("../Home/LoadClassesByStudentId", { studentid: studentId },
                    function (classesData) {
                        var select = $("#ddlClasses");
                        select.empty();
                        select.append($('<option/>', {
                            value: 0,
                            text: "Select a Class"
                        }));
                        $.each(classesData, function (index, itemData) {
                            alert(classesData);
                            alert(itemData);
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
         });
         $("#ddlClasses").change(function () {
             var classId = $(this).val();
             $.getJSON("../Home/LoadMarksByClassId", { classid: classId },
                    function (marksData) {
                        var select = $("#ddlMarks");
                        select.empty();
                        select.append($('<option/>', {
                            value: 0,
                            text: "Select a Mark"
                        }));
                        $.each(marksData, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
         });
     });
    </script>
        <p>
            @Html.DropDownListFor(Model => Model.Names, new SelectList(ViewBag.Names as System.Collections.IEnumerable, "StudentId", "Name1"),
            "Select a Student", new { id = "ddlNames" })
        </p>
        <p>
            @Html.DropDownListFor(Model => Model.Classes, new SelectList(Enumerable.Empty<SelectListItem>(), "ClassId", "ClassName"),
            "Select a Class", new { id = "ddlClasses" })
        </p>
        <p>
            @Html.DropDownListFor(Model => Model.Marks, new SelectList(Enumerable.Empty<SelectListItem>(), "MarkId", "MarksCount"),
            "Select a Mark", new { id = "ddlMarks" })
        </p>

Now let's run the application to see the output; the following shows what the output looks like:



When a student class is clicked, the student should load based on the student's id, like this:



Now click on any class name; then the marks should load into the marks dropdownlist, as in: