Get Critical error during Json request using Kendo UI

Question

I have a problem. In my company I need to try out how Angular.js works together with ASP.NET MVC. Now I want to create a simple little application. On the front page there is a view with a Kendo UI grid. Inside my App.js file I read data from my Data Controller. The Controller Action gets called but as soon as the code is done executing I get the following error:

Here is the rest 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>

On Stackoverflow I already found something with adding ?callback=JSON_CALLBACK to the jsonp URL but it didn't help.

Notice

When I remove the JsonRequestBehavior.AllowGet inside my Controller, I don't get the error but then I get the status Code 404.

if you use jsonp you have to add that callback, is the error still the same with the callback? — koox00, Dec 31 '15 at 08:17

score 0 · Answer 1 · answered Dec 31 '15 at 08:29

0

It seem you redundant "," in App.js

Change

 columns: [{
    field: "Description",
    title: "Beschreibung",
},

to

 columns: [{
    field: "Description",
    title: "Beschreibung"
},

Hope it help.

answered Dec 31 '15 at 08:29

Lewis Hai

1,114
10
22

Maybe help you http://stackoverflow.com/questions/14507334/net-mvc-updated-jquery-now-getting-critical-error – Lewis Hai Dec 31 '15 at 08:56
Hmm my Bundle.config looks good I think no problems there but Thanks :) – brothers28 Dec 31 '15 at 09:11
Refer http://stackoverflow.com/questions/34543115/get-critical-error-during-json-request-using-kendo-ui/34543445#34543445 – Lewis Hai Dec 31 '15 at 09:11

score 0 · Accepted Answer · edited May 23 '17 at 12:31

Found the solution. There were several things to change:

Remove DataSourceRequest part in Controller. With this change the critical JavaScript error disapears.

public JsonResult GetEmergencyRegions(string searchterm)
{
    var emergencyRegions = _repository.GetEmergencyRegionBySearchTerm(searchterm);
    return Json(emergencyRegions, JsonRequestBehavior.AllowGet);
}

I now had a 404 error again in my App.js. Solution for that is changing jsonp to get. I found this solution in the following link: AngularJS: how to make a jsonp request

read: function (e) {
     $http.get('/Data/GetEmergencyRegions?callback=JSON_CALLBACK')
         .then(function success(response) {
              e.success(response.data);
          }, function error(response) {
              alert('something went wrong')
              console.log(response);
     })
}

Run the Solution and be Happy :-)

Get Critical error during Json request using Kendo UI

2 Answers2