I am new to angular.js
I am trying to get json data as described in samples, as
(function () {
'use strict';
var module = angular.module('app', ['onsen']);
module.controller('GroupController', function ($scope, $http) {
$http.get("http://localhost/dinner/hOME/Categories")
.success(function (response) { $scope.categories = response; })
.error(function (data, status, headers, config) { alert(status); });
});
});
but code will go through error method with status=0, data =null
while when I open the link http://localhost/dinner/hOME/Categories
in my browser there is response.
What is my mistake?
ServerSide Code (ASP.net MVC 3)
[HttpGet]
public JsonResult Categories()
{
IRecipeCategoryService rcSrv = ServiceFactory.Create<IRecipeCategoryService>();
var categoryList = rcSrv.FetchAll().Select(i => new {i.ID , i.Title }).OrderBy(j => j.Title).ToList();
return Json( categoryList
, JsonRequestBehavior.AllowGet);
}
Update (based on Sujata Chanda comments )
I have add these codes for CORS problem but it didn't help
module.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
Solution
from Christopher Marshall hint I made changes on server side based on this link
Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method
On server application adding this ActionFilter
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
}
}
then tagging my action as below
[AllowCrossSiteJson]
[HttpGet]
public JsonResult Categories()
{
IRecipeCategoryService rcSrv = ServiceFactory.Create<IRecipeCategoryService>();
var categoryList = rcSrv.FetchAll().Select(i => new {i.ID , i.Title }).OrderBy(j => j.Title).ToList();
return Json( categoryList
, JsonRequestBehavior.AllowGet);
}