how to send json data by $http.Post from Angular to webAPI POST method?

Question

I am trying to pass data as JSON object by $http.Post to webAPI method. In WebAPI method, the parameter of the method is a class object.

It works fine when I test the webAPI method by Postman.But I am not able to pass the JSON object by angular $http.post method-I get null values in the webAPI parameter(in the class object).

Can someone please advise how to fix the issue.i am new to AngularJS.Kindly help.

AngularJS Code

angular.module('Test.Employer')
    .controller('EmployerController', ['$scope','headerValue', '$http',
        function ($scope, headerValue, $http) { 
            var ipEmployerDetls = {                   
                EmployerName: "cherokee",
                Company: "ABC"                   
            };

            $http({ 
                url: "http://localhost:212122/api/Values/PostEmployeeData",
                dataType: 'json', 
                method: 'POST', 
                data: JSON.stringify(ipEmployerDetls), 
                headers: { 
                    "Content-Type": "application/json" 
                } 
            }).success(function (response) { 
                $scope.object = response.data;
            }) 
                .error(function (error) { 
                    alert(error.Message); 
                });
})();

WebAPI

using System.Web.Http;
using AttributeRouting.Web.Http;

namespace webAPITestProject.Controllers
{
    [Route("api/Values")] 
    public class ValuesController : ApiController
    {
        retrieveEmployeeData empData = new retrieveEmployeeData();
        retrieveProductDetails prodDetls = new retrieveProductDetails();    

        [Route("PostEmployeeData")] 
        [HttpPost]
        public DataTable PostEmployeeData([FromBody] Employer empDetails)
        {
            DataTable dataTable = new DataTable { TableName = "MyTableName" };
            dataTable = empData.getEmployeeData(empDetails);
            return dataTable;
        }
    }
}

NOTE: I get NULL value in empDetails in webAPI method,but when I test the method in Postman,it has value.

Nat Wallbank · Accepted Answer · 2019-02-07 17:10:46Z

1

Your routing attributes don't look right for how you've specified your $http API call.

Looks like you want the class-level attribute to be:

[RoutePrefix("api/Values")]
public class ValuesController : ApiController

Which will mean that PostEmployeeData has a route of api/Values/PostEmployeeData.

You'll also need to ensure that your properties in ipEmployerDetls directly map to your Employer class (which you haven't shown), so that model binding works correctly.

answered Feb 7, 2019 at 17:10

Nat Wallbank

1,45713 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MZeet Over a year ago

Thanks for your advice.I updated the routing attributes as mentioned.The Employer class is as below-namespace employeeDetails { public class Employer { public string Company { get; set; } public string EmployerName { get; set; } } } But still it is not working.Please let me know any advice.

Nat Wallbank Over a year ago

The only other unusual things I notice are that you specify dataType, which shouldn't be required. You also specify the Content-Type header, but that is the default value. I would remove both of those things. I also tend to use the shortcut methods, e.g. $http.post(...) in preference to the syntax you've used but it shouldn't matter. I also find it's usually not necessary to stringify your objects.

MZeet Over a year ago

I have implemented as per your suggestion.But still I am not able to hit the webAPI method.Anyways appreciate your advice.Thank You !!

MZeet Over a year ago

I just noticed one thing-it looks $http.Post never works(never hit controller,it hits webAPi if I use attribute 'params' instead of 'data',but I checked we cannot use 'params' in Post) only &http.Get works.Do I need to add anything any in Config file to make &http.post work.Can anyone advise me please.

MZeet Over a year ago

Hi The issue is fixed ! I added data:$.param(empDetails) inside post and Content-Type changed to application/x-www-form-urlencoded.It worked !! Thanks.

|

Collectives™ on Stack Overflow

how to send json data by $http.Post from Angular to webAPI POST method?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related