title: $.ajax get, mvc 3 jsonresult - undefined result
body: <p>I have an MVC 3 jsonresult controller that returns a JSON string which contains the regions associated with a specific country, code below:</p>
  
  <pre><code>    public JsonResult getRegions(int countryID)
      {
          var regions = from r in db.Regions where r.CountryID == countryID select r;
  
          var builder = new StringBuilder();
          builder.Append("[");
          foreach (Region region in regions)
              //builder.AppendFormat("{0}, \"{1}\"", "RegionID: " + region.RegionID, "RegionName: " + region.RegionName);                
              builder.Append("{ RegionID: " + region.RegionID + ", RegionName: " + region.RegionName + "},"); 
          //var result = builder.ToString().TrimEnd(new char[] { ',', ' ' }) + "]";            
          builder = builder.Append("]");
  
          var result = builder.Replace(",]", "]");
  
          return Json(result.ToString(), JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>This returns a JSON formatted string, lets assume the Country Selected was Kenya, the output string looks as follows:</p>
  
  <pre><code>    [{ RegionID: 1, RegionName: Nairobi Region},{ RegionID: 3, RegionName: Coast Region}]
  </code></pre>
  
  <p>I have a javascript that passes the id for the country to the controller to get the regions, which i eventually want to use to populate a new dropdownlist. My javascript looks as follows:</p>
  
  <pre><code>    $(document).ready(function () {
  $("#CountryID").change(function () {
      $.ajax({
          type: "GET",
          url: "/ajaxcalls/getregions",
          data: "countryID=" + $("#CountryID :selected").val(),
          datatype: "json",
          success: function (result) {
              var options = ("#regions");
              $.each(result, function (item) {
                  alert(item.RegionID + " " + item.RegionName);
              });
          },
          error: function (req, status, error) {
              alert(error + " " + req);
          }
      });
  });
      });
  </code></pre>
  
  <p>But the alert that pops up says: </p>
  
  <blockquote>
    <p>undefined undefined.</p>
  </blockquote>