MVC3 - Debugging the controller action called by an Ajax call

Question

I am attempting to populate a dropdown based on the value selected in another dropdown. I am using this guy's example, but have not gotten it to run successfully yet. I have a successful Ajax call that is fired on the change event of the parent dropdown. I've verified that the data passed to the Ajax function is correct. However, the result is an error (200; unexpected character in JSON result). I've been trying to figure out how to debug the a) controller action that is called in the Ajax call and b) the function that feeds a list of results to the controller action. Can anybody help me figure out how to debug a) and b)? Visual Studio 2010 doesn't offer a lot of help for debugging the targets of Ajax calls, it seems.

Here's the code I have:

1) The controller action (BreedController) that calls a list helper class function to supposedly return a JSON object back to the Ajax successful callback.

    //
    // Retrieve JSON object containing breeds for a given species
    //
    [HttpPost]
    public JsonResult BreedsBySpecies(int? id)
    {
        ListHelper lh = new ListHelper();
        return Json(new { items = lh.GetBreedsBySpecies(id) }, JsonRequestBehavior.AllowGet);
    }

2) The function that should return a SelectItemList of breeds given a species ID. This is called by the controller action.

    public List<SelectListItem> GetBreedsBySpecies(int? speciesID)
    {

        var breed = from b in db.Breeds
                    select b;

        if (speciesID.HasValue)
        {
            breed = breed.Where(b => b.SpeciesID == speciesID);
        }

        List<SelectListItem> lst = new List<SelectListItem>();
        foreach (var item in breed)
        {
            lst.Add(new SelectListItem { Text = item.Description, Value = item.BreedID.ToString() });
        }

        return lst;
    }

3) The javascript function that does the Ajax call. I've confirmed that this is getting the right values (e.g., "/Breed/BreedsBySpecies" to get to the right controller action and formData contains the right species ID)

function selectFromAjax(url, formData, target) {
    $(target).html("");
    if (formData.id) {
        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            dataType: 'text json',
            contentType: 'application/json; charset=utf-8',
            success: function (data, textStatus) {
                if (data) {
                    $(data.items).each(function () {
                        $(target).append($("<option></option>").attr("value", this.Value).text(this.Text));
                    });
                    $(target).change();
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    }
    else {
        $(target).change();
    }
}

Answer 1

you should hit the break point if its making it that far. my guess is that you need to stringify your object to get the json .net is going to understand. or, since its such a simple object, just do something like:

 data: "{'id': '" + formData.Id + "'}"

Edit

since you are just passing in an id, you could technically just use the url to get where you want, passing no data at all. you'd just do something like this:

url: url + '/'+ formData.Id

this does tightly couple your routes and javascript, which isn't ideal, but it gets the job done. and it removes the need to pass any data to the data parameter.