title: MVC3 Razor JSon/Javascript -- Contents of One Dropdown Box Depends on the Selection of Another
body: <p>I am having a problem converting a sample app that I found that works to one that fits my needs. I have not been able to figure out just what I am doing wrong. I am not even getting to the alert after returning from the JSon call in the converted app. First I will copy the model, controller, and view of the sample. And then I will copy the model, controller, and view of the converted app.
  I am hitting a breakpoint on the call to the Controller and it looks like the SelectList data is properly packed in the JSon object. But I must be doing something wrong. Any help understanding the problem would sure be appreciated.</p>
  
  <pre><code>---------------------------- Working Sample Model ------------
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace SimpleMVCJSONSample.Models
  {
  public class MyViewModel
  {
      public int? Year { get; set; }
      public int? Month { get; set; }
  
      public IEnumerable&lt;SelectListItem&gt; Years
      {
          get
          {
              return Enumerable.Range(2000, 12).Select(x =&gt; new SelectListItem
              {
                  Value = x.ToString(),
                  Text = x.ToString()
              });
          }
      }
  }
  }
  
  -------------------------- Working Sample Controller ------------------
  
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  
  using System.Web.Mvc;
  using SimpleMVCJSONSample.Models;
  
  namespace SimpleMVCJSONSample.Controllers
  {
  
  public class HomeController : Controller
  {
      public ActionResult Index()
      {
          var model = new MyViewModel();
          return View(model);
      }
  
      public ActionResult Months(int year)
      {
          if (year == 2011)
          {
              var jsonRet1 = Json(
                  Enumerable.Range(1, 3).Select(x =&gt; new { value = x, text = x }),
                  JsonRequestBehavior.AllowGet
              );
              return jsonRet1;
          }
               var jsonRet2 = Json(
              Enumerable.Range(1, 12).Select(x =&gt; new { value = x, text = x }),
              JsonRequestBehavior.AllowGet
          );
          return jsonRet2;
      }
  }
  }
  
  -------------------------- Working Sample View -----------------
  
  @{
  ViewBag.Title = "Home Page";
  }
  
  &lt;h2&gt;@ViewBag.Message&lt;/h2&gt;
  
  @model SimpleMVCJSONSample.Models.MyViewModel
  
  @Html.DropDownListFor(
  x =&gt; x.Year, 
  new SelectList(Model.Years, "Value", "Text"),
  "-- select year --"
  )
  
  @Html.DropDownListFor(
  x =&gt; x.Month, 
  Enumerable.Empty&lt;SelectListItem&gt;(),
  "-- select month --"
  )
  
  &lt;script type="text/javascript"&gt;
  $('#Year').change(function () {
      var selectedYear = $(this).val();
      if (selectedYear != null &amp;&amp; selectedYear != '') {
          $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
              alert(months);
              var monthsSelect = $('#Month');
              monthsSelect.empty();
              $.each(months, function (index, month) {
                  monthsSelect.append($('&lt;option/&gt;', {
                      value: month.value,
                      text: month.text
                  }));
              });
          });
      }
  });
  &lt;/script&gt;
  
  ---------------------------------END OF Working SAMPLE-----------------------
  
  --------------------------My Converted Model ------------------------
  
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using Microsoft.Practices.EnterpriseLibrary.ExceptionHandling;
  using ONSM.Common.Logging;
  using VW40.Data.Model;
  using VW40.Services;
  
  namespace VW40.Web.Models
  {
  public class CompanyPeopleViewModel
  {
      private Log _log;
      private ExceptionManager _exceptionManager;
      private readonly ICompanyService _companyService;
      private readonly IPersonService _personService;
  
      public CompanyPeopleViewModel(Log log, ExceptionManager exceptionManager,     ICompanyService companyService, IPersonService personService)
      {
  
          _companyService = companyService;
          _personService = personService;
          _log = log;
          _exceptionManager = exceptionManager;
      } 
  
      public int Company { get; set; }
      public int Person { get; set; }
  
      public IEnumerable&lt;SelectListItem&gt; CompanySelectList
      {
          get
          {
              return _companyService.GetCompanies().OrderBy(x =&gt; x.CompanyName).Select(x =&gt; new SelectListItem
                      {
                          Value = x.CompanyID.ToString(),
                          Text = x.CompanyName
  
                      });
          }
      }
  }
  }
  
  --------------------------- My Converted Controller ----------------
  
  using System.Collections;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web.Mvc;
  using Microsoft.Practices.EnterpriseLibrary.ExceptionHandling;
  using ONSM.Common.Logging;
  using VW40.Data.Model;
  using VW40.MVC.Models;
  using VW40.Services;
  using VW40.Services.AccessControl;
  using VW40.Web.Models;
  using System.Web;
  
  
  namespace VW40.MVC.Controllers
  {
  [Authorize(Roles = "Administrator")]
  public class AccessControlController : MembershipAdministrationController_Base
  {
      private Log _log; 
      private ExceptionManager _exceptionManager;
      private IAccessControlService _accessControlService;
      private IPersonService _personControlService;
      private ICompanyService _companyService;
  
      public AccessControlController(
          Log log,
          ExceptionManager ExceptionManager,
          IAccessControlService AccessControlService,
          IPersonService PersonService,
          ICompanyService CompanyService
          )
      {
          _log = log;
          _exceptionManager = ExceptionManager;
          _accessControlService = AccessControlService;
          _personControlService = PersonService;
          _companyService = CompanyService;
      }
  
      public ActionResult Json_CompanyPeopleSelectList(int CompanyID)
      {
  
  
          var companyPersonsList = _personControlService.GetPersonsByCompanyId(CompanyID).OrderBy(x =&gt; x.Lastname + x.Firstname);
  
          //IEnumerable&lt;SelectListItem&gt; myList = companyPersonsList.Select(x =&gt; new SelectListItem
          //                                                                        {
          //                                                                                Value = x.PersonID.ToString(),
          //                                                                            Text = x.Lastname
          //                                                                        }
              //);
  
  
          var jsonRet =
              Json(
                  _personControlService.GetPersonsByCompanyId(CompanyID).OrderBy(x =&gt; x.Lastname + x.Firstname).Select
                      (x =&gt; new
                                {
                                    value = x.PersonID.ToString(),
                                    text = x.Lastname
                                }), JsonRequestBehavior.AllowGet);
          return jsonRet;
      }
  </code></pre>
  
  <p>--------------------------- My Converted View -----------------</p>
  
  <pre><code>@model VW40.Web.Models.CompanyPeopleViewModel
  @{
  Layout = "~/Views/Shared/SiteLayout.cshtml";
  ViewBag.Title = "UserPermissions";
  }
  
  &lt;h2&gt;UserPermissions&lt;/h2&gt;
  
  @Html.DropDownListFor(
  x =&gt; x.Company, 
  new SelectList(Model.CompanySelectList, "Value", "Text"),
  "Select Company"
  )
  
  @Html.DropDownListFor(
      x =&gt; x.Person,
      Enumerable.Empty&lt;SelectListItem&gt;(),
      "-- Select Person --"
  )
  &lt;script type="text/javascript"&gt;
  $('#Company').change(function () {
      var selectedCompany = $(this).val();
      if (selectedCompany != null &amp;&amp; selectedCompany != '') {
          $.getJSON('@Url.Action("Json_CompanyPeopleSelectList")', { CompanyID:     selectedCompany }, function (listOfCompanyPeople) {
              alert(listOfCompanyPeople);
              var personSelect = $('#Person');
              personSelect.empty();
              $.each(listOfCompanyPeople, function (index, person) {
                  personSelect.append($('&lt;option/&gt;', {
                      value: person.value,
                      text: person.text
                  }));
              });
          });
      }
  });
  &lt;/script&gt;
  
  ------------------------------ end of Conversion ----------------
  </code></pre>