500 error in Ajax Get - ajax

Question

I'm trying to send a dropdownlists selected value to controller and retrieve json data back.
When I debug, parameter gets to controller nicely, values are retrieved nicely but after return part on console it says
"Failed to load resource: the server responded with a status of 500 (Internal Server Error)`"
This is my controller action: (in WebContentsController)
[HttpGet]
public JsonResult GetWebContentTypeDetails (int id)
{
var details = db.WebContentTypeDetail.Where(x=>x.WebContentTypeID == id).ToList();
return Json(details, JsonRequestBehavior.AllowGet);
}
this is JS part (printing it to console for testing)
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
$.getJSON('/webcontents/GetWebContentTypeDetails/' + ChangedID, function (data) {
console.log(data);
})
});
});
EDIT:
WebContentTypeDetail model
public partial class WebContentTypeDetail
{
public int WebContentTypeDetailID { get; set; }
public int WebContentTypeID { get; set; }
public string DetailKey { get; set; }
public string Description { get; set; }
public Nullable<short> Rank { get; set; }
public virtual WebContentType WebContentType { get; set; }
}
WebContentType model
public partial class WebContentType
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public WebContentType()
{
this.WebContent = new HashSet<WebContent>();
this.WebContentTypeDetail = new HashSet<WebContentTypeDetail>();
}
public int WebContentTypeID { get; set; }
public string DisplayName { get; set; }
public string CreatedByUserID { get; set; }
public System.DateTime CreateDate { get; set; }
public string LastEditedByUserID { get; set; }
public Nullable<System.DateTime> LastEditDate { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<WebContent> WebContent { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<WebContentTypeDetail> WebContentTypeDetail { get; set; }
}

Answer 1

You cannot directly return a entity list from context query result, because they are not serializable in most of cases, especially in your case: entities got a loop references.
you have 2 options:
var details = db.WebContentTypeDetail.Where(x=>x.WebContentTypeID == id)
map your result to anonymous object list:
return Json(details.select(x=>new {
//you data structure
}).ToList(), JsonRequestBehavior.AllowGet);
create your view model and mark it [Serializable], then return necessary data to client:
return Json(details.select(x=>new YourViewModel {
//you data structure
}).ToList(), JsonRequestBehavior.AllowGet);

Answer 2

Try this:
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
$.getJSON('/webcontents/GetWebContentTypeDetails?id=' + ChangedID, function (data) {
console.log(data);
})
});
});
As parameter id should be passed as querystring. And if you're using mvc then url should be passed in #url.action so it must be
$(document).ready(function () {
$("#WebContentTypeID").change(function () {
var ChangedID = $('#WebContentTypeID option:selected').val();
alert(ChangedID);
var URL = #Url.Action("_GetWebContentTypeDetails", "webcontents");
$.getJSON(URL + '?id=' + ChangedID, function (data) {
console.log(data);
})
});
});