Pass Selected Drop Down List Value to Controller Action and then Populate Another Drop Down List Based on Value
<p>I am trying to select a manufacturer from a list and then based on what manufacturer the user selects, populate a list of models.</p>

<p><strong>View:</strong></p>

<pre><code>&lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Manufacturer.ManufacturerName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-5"&gt;
            @Html.DropDownList("ManufacturerID", (List&lt;SelectListItem&gt;)ViewBag.Manufacturers,
                htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model =&gt; model.Manufacturer.ManufacturerName, "",
                new { @class = "text-danger", onchange = "PopulateModels()" })
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Model.ModelName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-5"&gt;
            @Html.DropDownList("ModelID", (List&lt;SelectListItem&gt;)ViewBag.Models,
                htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model =&gt; model.Model.ModelName, "",
                new { @class = "text-danger" })
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
         function PopulateModels()
         {
              var url = '@Html.Raw(Url.Action("GetModelList", "FaultController", new { manufacturer="ManufacturerID" }))';
              window.location = url;
         }
    &lt;/script&gt;
</code></pre>

<p><strong>Controller:</strong></p>

<pre><code>public List&lt;SelectListItem&gt; GetModelList(Manufacturer manufacturer)
    {
        List&lt;SelectListItem&gt; modelList = new List&lt;SelectListItem&gt;();

        var models = db.Models.Where(m =&gt; m.ManufacturerID == manufacturer.ManufacturerID);

        foreach (Model model in models)
        {
            modelList.Add(new SelectListItem
            {
                Text = model.ModelName,
                Value = model.ModelID.ToString()
            });
        }

        var sortedModelList = (from model in modelList
                               orderby model.Text
                               select model).ToList();

        return sortedModelList;
    }

public ActionResult Create(...)
    {
        .
        .
        .

        ViewBag.Models = new List&lt;SelectListItem&gt;();
        ViewBag.Manufacturers = GetManufacturerList();
    }
</code></pre>

<p>As you can see, the ViewBag for Models is initially empty, when a manufacturer is selected I want this ViewBag to be updated with all of the models that hold that manufacturer.</p>

<p>I feel like I'm close but cannot figure out what to next, a point in the right direction would be great. I'm also not sure if what I have done so far is completely correct, so if anyone can spot anything I've overlooked or any suggestions on how to improve my code would also be appreciated.</p>

<p>I hope this makes sense, any help is appreciated, thanks in advance.</p>

<p><strong>Updated Code:</strong></p>

<p>View:</p>

<pre><code>&lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Manufacturer.ManufacturerName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-5"&gt;
            @Html.DropDownList("ManufacturerID", (List&lt;SelectListItem&gt;)ViewBag.Manufacturers,
                htmlAttributes: new { @class = "form-control" , @id= "Manufacturers" })
            @Html.ValidationMessageFor(model =&gt; model.Manufacturer.ManufacturerName, "",
                new { @class = "text-danger" })
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="form-group"&gt;
        @Html.LabelFor(model =&gt; model.Model.ModelName, "Model",
            htmlAttributes: new { @class = "control-label col-md-2" })
        &lt;div class="col-md-5"&gt;
            @Html.DropDownList("ModelID", (List&lt;SelectListItem&gt;)ViewBag.Models,
                htmlAttributes: new { @class = "form-control" , @id = "Models"})
            @Html.ValidationMessageFor(model =&gt; model.Model.ModelName, "",
                new { @class = "text-danger" })
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
         $(function(){
          $("#Manufacturers").change(function(){
             var v= $(this).val();
             $("#Models").empty();
             $.getJSON("@Url.Action("GetModels","Fault")?id="+v,function(data){
                 $.each(data,function(a,b){
                   $("#Models").append('&lt;option value="'+b.Value+'"&gt;'+b.Text+'&lt;/option&gt;');
                 });
             });
          });

        });
    &lt;/script&gt;
</code></pre>

<p>Controller:</p>

<pre><code>public ActionResult GetModels(int id)
    {
        var models = db.Models.Where(m =&gt; m.ManufacturerID == id)
                       .Select(x =&gt; new SelectListItem
                       {
                           Value = x.ModelID.ToString(),
                           Text = x.ModelName
                       }).ToList();
        return Json(models, JsonRequestBehavior.AllowGet);

    }
</code></pre>