MVC3 - debugging a controller action caused by an Ajax call

Question

I am trying to populate a drop down list based on the value selected in another drop down list. I use an example of this guy , but have not had time to start it yet. I have a successful Ajax call that fires in a parent dropdown change event. I checked that the data passed to the Ajax functions is correct. However, the result is an error (200; unexpected character as a result of JSON). I tried to figure out how to debug a) a controller action called in an Ajax call, and b) a function that passes a list of results to a controller action. Can someone help me figure out how to debug a) and b)? Visual Studio 2010 does not offer much help for debugging Ajax call targets, it seems.

Here is the code I have:

1) A controller action (BreedController) that calls a class function of a list class to supposedly return a JSON object back to a successful Ajax 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) A function that should return the SelectItemList of rocks, given the identifier of the view. This is caused by the action of the controller.

  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) A javascript function that makes an Ajax call. I confirmed that this gives the correct values ​​(for example, "/ Breed / BreedsBySpecies" to go to the correct controller action and formData contains the correct view identifier)

 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 have to get to a breakpoint if this is so far. I assume you need to reinforce your object to find out how json.net will understand. or, since its such a simple object, just do something like:

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

Edit

since you just pass in the identifier, you can technically just use the url to get the right place without passing any data. you just do something like this:

 url: url + '/'+ formData.Id 

it ties your routes and javascript tightly, which is not perfect, but it does its job. and it eliminates the need to pass any data to the data parameter.