title: MVC3 - Debugging the controller action called by an Ajax call
body: <p>I am attempting to populate a dropdown based on the value selected in another dropdown.  I am using <a href="http://blog.goranobradovic.com/2011/06/asp-net-mvc3-app-part-3-ajax-cascading-dropdownunobtrusive-version/" rel="nofollow">this guy's</a> 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.</p>
  
  <p>Here's the code I have:</p>
  
  <p>1) The controller action (BreedController) that calls a list helper class function to supposedly return a JSON object back to the Ajax successful callback.</p>
  
  <pre><code>    //
      // 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);
      }
  </code></pre>
  
  <p>2) The function that should return a SelectItemList of breeds given a species ID.  This is called by the controller action.</p>
  
  <pre><code>    public List&lt;SelectListItem&gt; GetBreedsBySpecies(int? speciesID)
      {
  
          var breed = from b in db.Breeds
                      select b;
  
          if (speciesID.HasValue)
          {
              breed = breed.Where(b =&gt; b.SpeciesID == speciesID);
          }
  
          List&lt;SelectListItem&gt; lst = new List&lt;SelectListItem&gt;();
          foreach (var item in breed)
          {
              lst.Add(new SelectListItem { Text = item.Description, Value = item.BreedID.ToString() });
          }
  
          return lst;
      }
  </code></pre>
  
  <p>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)</p>
  
  <pre><code>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($("&lt;option&gt;&lt;/option&gt;").attr("value", this.Value).text(this.Text));
                      });
                      $(target).change();
                  }
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert(xhr.status);
                  alert(thrownError);
              }
          });
      }
      else {
          $(target).change();
      }
  }
  </code></pre>