I am facing an issue at my workplace where I need to integrate Angular.js with ASP.NET MVC. Currently, I am trying to build a simple application that features a Kendo UI grid on the front page. In my App.js file, I am fetching data from the Data Controller. While the Controller Action is being executed successfully, I encounter an error as soon as the code finishes running:
https://i.sstatic.net/7CJnc.png
Below is the relevant portion of my code:
Controller:
[HttpGet]
public JsonResult GetEmergencyRegions([DataSourceRequest]DataSourceRequest request, string searchterm)
{
var emergencyRegions = _repository.GetEmergencyRegionBySearchTerm(searchterm);
return Json(emergencyRegions.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
App.js
$scope.gridOptions = {
columns: [{
field: "Description",
title: "Beschreibung"
}, {
field: "Region",
title: "Region"
}, {
field: "Phone",
title: "Telefon"
}, {
field: "HasPointOfSale",
title: "PoS"
}],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
$http.jsonp('/Data/GetEmergencyRegions')
.then(function success(response) {
e.success(response.data);
}, function error(response) {
alert('something went wrong')
console.log(response);
})
}
}
}
};
View with the Grid
<kendo-grid options="gridOptions">
</kendo-grid>
I tried adding ?callback=JSON_CALLBACK to the jsonp URL based on suggestions from Stackoverflow, but it did not resolve the issue.
Notice
Removing JsonRequestBehavior.AllowGet from my Controller eliminates the error, but then I receive a status Code 404.