Passing list of objects from Angular to Web API

Question

How to pass list of object from Angular to a Web API ?

I tried it using content-type as application/json but it shows CORS preflight error.

Following is the Web API Post Method :

 [HttpPost]
 public bool getDetails(List<Subnets> data)
 {
 //Logic here
 }

Following is the angular code :

 $scope.save = function (jsondata) {
 $http({
 method: "POST",
 url: "http://localhost:60262/api/IPUpload/getDetails",
 data: jsondata,
 headers: {
 'Content-Type': 'application/json'
 }
 }).then(function (data) {
 alert('success');
 if (data.status) {
 $scope.msg = "Data has been inserted ! ";
 }
 else {
 $scope.msg = "Error : Something Wrong";
 }
 }, function (error) {
 alert('fail');
 $scope.msg = "Error : Something Wrong";
 })
}

Following is the Subnet class :

 public class Subnets
{
 public string ID { get; set; }
 public string Subnet { get; set; }
 public string IPAddress { get; set; }
 public string ServerName { get; set; }
 public string Mac { get; set; }
 public string Vmware { get; set; }
 public string Usage { get; set; }
 public string Owner { get; set; }
 public DateTime ExpiryDate { get; set; }
 public string Email { get; set; }
 public string SwitchIP { get; set; }
 public string SwitchPort { get; set; }
 public string PortVLAN { get; set; }
 public string Zone { get; set; }
 public string Justification { get; set; }
 public string CustomerID { get; set; }
 public string Remarks { get; set; }
}

I tried using content-type as ' application/x-www-form-urlencoded; charset=UTF-8'. It calls the API action method but the parameter "data" is empty. With content-type as 'application/json', it shows CORS preflight error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:60262/api/StaticIPUpload/getDetails. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’).

Thanks in advance.

Solution :

I added following piece of code in global.asax and it worked :

 protected void Application_BeginRequest()
 {
 if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
 {
 Response.Flush();
 }
 }

• Kirk Larkin: You're on the right track with application/json, but you will need to enable CORS. See here under ASP.NET Web API.
• Skye: I have added following attribute on controller -- [EnableCors(origins: "localhost:51099", headers: "content-type", methods: "*")]. Still no luck.
• Andrei Dragotoniu: I don't think CORS is your problem. We need to see what your jsondata looks like and we need to see the api code which is supposed to receive the request. I am guessing your model doesn't match what the api expects. Also, issuing a POST request to a GET endpoint ... big no no. If it's not get then don't call it getDetails

Answer 1

CORS does not allow application/json . You were okay with text/plain

You can even avoid the headers part for now. As you said It calls the API action method but data is empty. Probably jsondata is not a valid object.

Try with the following code.

 $http({
 method: "POST",
 url: "http://localhost:60262/api/IPUpload/getDetails",
 data: JSON.stringify(jsondata) 
 }).then(function (data) {
public bool getDetails(List<Subnets> data)
{
}

without the[HttpPost].

I would also like to see your Subnets Class and jsondata

• Skye: removed [httppost], still doesn't work. Its not even calling Web API action method. Any other suggestions ?

Answer 2

If I remember correctly, Angular.js triggers the preflight request when you use application/json. Your web API needs to respond to the preflight request with a 200 response.

If you are writing your own API, make sure that OPTION is enabled in the web API on the http://localhost:60262/api/IPUpload/getDetails endpoint.

After you enable the OPTION HTTP method and return the 200 Angular should work as expected.

• Skye: I have added following custom headers in web.config, still no luck: <customHeaders> <add name="Access-Control-Allow-Origin" value="" /> <add name="Access-Control-Allow-Headers" value="" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> </customHeaders>

Answer 3

You need to enable CORS on web API front. By default angularjs supports cross domain ajax calls. But if server doesn’t allow cross domain calls it will fail.

You can enable CORS as follow:

1. Enable options calls on server side.
2. For each actual post end point you need an options end point as well, so that when browser checks CORS and send a option call it should return 200.
3. Also application\json is supported in cross domain ajax calls.

• Skye: tried doing that on web.config as well as global.asax files, still doesn't work.
• Tapas: Can you post a screen shot of the error and exact ajax call? I can try to run it on my web page and help you better.