ASP.NET MVC Cascading DropDownLists by ViewModel
===

After reviewing many tutorials and various approaches to Cascading DropDownLists, I decided to create a ViewModel for my View and then populate my DropDownLists based on this post:
http://stackoverflow.com/questions/11093986/mvc3-ajax-cascading-dropdownlists

The goal here is the most basic and covered in many tutorials, but I still can't get it quite right... to populate a City dropdown based on the value of a State dropdown.  

Unfortunately, I'm still learning and I am getting the error catch written into the JavaScript... and the second dropdown does not load. I assume it's something basic, such as not mapping the URL in my javascript correctly, but I don't know.

Any analysis of the code below to point out errors would be greatly appreciated.

Here is my ViewModel:

    public class SPServiceLocationViewModel
    {
        public int Id { get; set; }
        public int SPCompanyAccountID { get; set; }

        [Required]
        public IEnumerable<SelectListItem> States { get; set; }
        [Required]
        public IEnumerable<SelectListItem> Cities { get; set; }
    }

Here is my Controller data (including Json to return second DropDownList data):

    public ActionResult Create()
        {

            SPServiceLocationViewModel viewModel = new SPServiceLocationViewModel();

            viewModel.States = new SelectList(simpleDB.simpleState, "simpleStateID", "stateFull");
            viewModel.Cities = new SelectList(simpleDB.simpleCity, "simpleCityID", "cityFull");

            return View(viewModel);
        }

        
        public ActionResult GetCities(int Id)
        {
            var cities = simpleDB.simpleCity.Where(x => x.simpleStateId == Id);
            return Json(cities, JsonRequestBehavior.AllowGet);
        }

And finally, my View with JavaScript displayed at the bottom:

    @using (Html.BeginForm())
    {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Step 4: Service Areas</legend>

        @Html.HiddenFor(model => model.SPCompanyAccountID, new { @Value = ViewBag.companyID })

        <br /><br />
        <label>STATE HERE:</label>
        @Html.DropDownListFor(x => x.States, Model.States, new { @class = "chzn-select",     id="stateID" })
        <br /><br />
        <label>CITY HERE:</label>
        @Html.DropDownListFor(x => x.Cities, Enumerable.Empty<SelectListItem>(), "Select a City", new { @class = "chzn-select", id = "cityID" })
 
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
    }

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">     </script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript">    </script>
    
    <script type="text/javascript">
    $(function () {
        $("#stateID").change(function () {
            var stateId = $(this).val();
            // and send it as AJAX request to the newly created action 
            $.ajax({
                url: '@Url.Action("GetCities")',
                type: 'GET',
                data: { stateId: stateId },
                cache: 'false',
                success: function (result) {
                    $('#cityID').empty();
                    // when the AJAX succeeds refresh the ddl container with      
                    $.each(result, function (result) {
                        $('#cityID').append(
                        $('<option/>')
                            .attr('value', this.simpleCityID)
                            .text(this.cityFull)
                    );
                    });
                },
                error: function (result) {
                    alert('An Error has occurred');
                }
            });
        });
    });
    </script>

Again, I'm currently teaching myself ASP.NET MVC and I'm very basic, so anything you see that stands out, especially in terms of the JavaScript that I'm attempting to use, please feel free to scrutinize it!