title: binding cascading drop downs to viewmodel
body: <p>I'm still relatively new to MVC and need some assistance with cascading drop down lists.</p>
  
  <p>I have got two drop lists to cascade using JSON but I cant work out how to bind the selcted item to the view model.</p>
  
  <p>The controllers are :</p>
  
  <pre><code>public ViewResult StartRA()
      {
          StartRiskAssessmentViewModel viewModel = new StartRiskAssessmentViewModel
          {
              RiskAssessment = new RiskAssessment(),
              Locations = Peopledb.Locations.Where(x =&gt; x.Dormant == false).ToList(),
          };
          return View(viewModel);
      }
  
  public ActionResult TypeList()
      {
          var types = db.Types.Where(x =&gt; x.Dormant == false).ToList();
  
          if (HttpContext.Request.IsAjaxRequest())
          {
              return Json(new SelectList(
                          types,
                          "TypeId",
                          "TypeName"), JsonRequestBehavior.AllowGet
                          );
          }
  
          return View(types);
      }
  
      public ActionResult SubTypeList(int typeId)
      {
          var subTypes = db.SubTypes.Where(x =&gt; x.Dormant == false &amp;&amp; x.TypeId == typeId).ToList();
  
          if (HttpContext.Request.IsAjaxRequest())
              return Json(new SelectList(
                              subTypes,
                              "SubTypeId",
                              "SubTypeName"), JsonRequestBehavior.AllowGet
                          );
  
          return View(subTypes);
      }
  </code></pre>
  
  <p>In the view I have left the original Html helper in comments which I would Ideally like to modify to bind the result</p>
  
  <p>The view section is:</p>
  
  <pre><code>        &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.TypeId, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  &lt;select id="Types" name="Types" class="form-control"&gt;&lt;/select&gt;
                  @*@Html.DropDownListFor(model =&gt; model.TypeId, new SelectList(Model.Types, "TypeId", "TypeName", 0), "Please Select", new { @class = "form-control", id = "Types"})*@
                  @Html.ValidationMessageFor(model =&gt; model.TypeId, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.SubTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  &lt;select id="SubTypes" name="SubTypes" class="form-control"&gt;&lt;/select&gt;
                  @*@Html.DropDownListFor(model =&gt; model.SubTypeId, new SelectList(Model.SubTypes, "SubTypeId", "SubTypeName", 0), "Please Select", new { @class = "form-control", id = "SubTypes" })*@
                  @Html.ValidationMessageFor(model =&gt; model.SubTypeId, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
  @section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  &lt;script type="text/javascript"&gt;
      $(function () {
          $.getJSON("/RiskAssessment/Types/List", function (data) {
              var items = "&lt;option&gt;Please Select&lt;/option&gt;";
              $.each(data, function (i, type) {
                  items += "&lt;option value='" + type.Value + "'&gt;" + type.Text + "&lt;/option&gt;";
              });
              $("#Types").html(items);
          });
  
          $("#Types").change(function () {
              $.getJSON("/RiskAssessment/SubTypes/List/" + $("#Types &gt; option:selected").attr("value"), function (data) {
                  var items = "&lt;option&gt;Please Select&lt;/option&gt;";
                  $.each(data, function (i, subtype) {
                      items += "&lt;option value='" + subtype.Value + "'&gt;" + subtype.Text + "&lt;/option&gt;";
                  });
                  $("#SubTypes").html(items);
              });
          });
      });
  &lt;/script&gt;
  }
  </code></pre>
  
  <p>How can I amend the Html helper to incorporate the select tag drop down lists to allow cascading and bind the result to the viewmodel?</p>