I am getting an error while executing an application using MVC4
, Web API
, AngularJS
. The error is following:
Self referencing loop detected with type
'System.Data.Entity.DynamicProxies.Product_259FEB40BD6111F44AA3C3CED8DD40E7E44B22CC11A32AE621E84E2239F79B2C'. Path '[0].category.products'.
My products.cs
file under model folder is:
public partial class Product
{
[JsonIgnore]
[Key]
public int ProductID { get; set; }
public string ProductName { get; set; }
public Nullable<int> SupplierID { get; set; }
public Nullable<int> CategoryID { get; set; }
public string QuantityPerUnit { get; set; }
public Nullable<decimal> UnitPrice { get; set; }
public Nullable<short> UnitsInStock { get; set; }
public Nullable<short> UnitsOnOrder { get; set; }
public Nullable<int> ReorderLevel { get; set; }
public bool Discontinued { get; set; }
public virtual Category Category { get; set; }
public virtual Supplier Supplier { get; set; }
}
Product controller is:
public class ProductController : JsonController
{
private readonly DBEntities _db = new DBEntities();
public ActionResult GetProduct()
{
var productList = _db.Products;
return Json(productList, JsonRequestBehavior.AllowGet);
}
}
Class that returns JSON and included in product controller is:
public class JsonController : Controller
{
public new ActionResult Json(object data, JsonRequestBehavior behavior)
{
var jsonSerializerSetting = new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
};
if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
{
throw new InvalidOperationException("GET is not permitted for this request.");
}
var jsonResult = new ContentResult
{
Content = JsonConvert.SerializeObject(data, jsonSerializerSetting),
ContentType = "application/json"
};
return jsonResult;
}
}
The productController.js
file which is using AngularJS is:
myApp.controller('productController',
['$scope', 'productDataService', '$location',
function productController($scope, productDataService) {
$scope.products = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
loadProductData();
function loadProductData() {
productDataService.getProducts()
.then(function () {
$scope.products = productDataService.products;
},
function () {
//Error goes here...
})
.then(function () {
$scope.isBusy = false;
});
$scope.pageChangeHandler = function (num) {
console.log('Product page changed to ' + num);
}
};
}
]);
Data service is like:
myApp.factory('productDataService', ['$http', '$q',
function ($http, $q) {
var _products = [];
var _getProducts = function () {
var deferred = $q.defer();
var controllerQuery = "product/GetProduct";
$http.get(controllerQuery)
.then(function (result) {
// Successful
angular.copy(result.data, _products);
deferred.resolve();
},
function (error) {
// Error
deferred.reject();
});
return deferred.promise;
};
return {
products: _products,
getProducts: _getProducts
};
}
]);
Same type of code is working well for another application but I not clear why the above mentioned code is not working.
Any help will be thankfully accepted.
Thanks Partha