title: Pass Selected Drop Down List Value to Controller Action and then Populate Another Drop Down List Based on Value
body: <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>