How can I have one @Html.dropdownfor drive another in the MVC 3 View?

Question

I've got two types of data I'm dealing with: "ClassType" and "Disciplines". ClassType is the master data type that drives the secondary Disciplines. The idea is that each ClassType will have a number of Disciplines assigned to them. So, what I'm trying to do is have Disciplines depend on the selection of CLassType. How would I do that with the Microsoft MVC 3 framework in the view? The following is my Controller/Model/View code:

CONTROLLER:

public ActionResult Create() { List c_types = new List(); List disc = new List();

    c_types = m_activeContract.getCtypeList();
    disc = m_activeContract.getDisciplineList();
    // TODO:  fetch from repository or database

    var model = new ExampleDocument
    {
        ClassTypes = a_modes,
        Disciplines = disc
    };

    return View(model);
} 


MODEL:

public int ClassTypeId { get; set; }
public int DisciplineId { get; set; }
public List<ClassType> ClassTypes { get; set; }
public List<Discipline> Disciplines { get; set; }

VIEW:

@using (Html.BeginForm("Create", "Example") ) {
        <p>Class Type: 
        @Html.DropDownListFor( x => x.ClassTypeId,
                 new SelectList(Model.ClassTypes, "Id", "Name"))</p>
        <p>Discipline:
        @Html.DropDownListFor( x => x.DisciplineId,
                new SelectList(Model.Disciplines, "Id", "Name")) </p>
        <p>
            <input type="submit" value="Create" />
        </p>
}

scott.korin scott.korin · Accepted Answer · 2012-05-15T14:08:58

In your controller, populate your list of Discipline Type entities based on the ClassTypeId using your business rule.
Also, add a controller action that gets a json result of Discipline Type entities for a passed in class type id.
In your view, add a javascript event on the change of the Class Type field. In that event, use an ajax call back to the controller action that returns a list of Discipline types based on the class id, and use that to populate your Discipline Type dropdown. This way, when a user selects a different Class Type, the list of DisciplinesTypes changes.

How can I have one @Html.dropdownfor drive another in the MVC 3 View?

2 Answers