AngularJS $http / .NET Web API - Either Getting 400 (Bad Request) or NULL POST Action Method Parameter

angularjs $http post example with parameters
angularjs http interceptor
angularjs synchronous function call
angularjs web service call example
angularjs http post headers
angularjs queue http requests
angularjs http headers
angularjs $http delete

Here’s a brief (as I can make it) description of my problem, along with all relevant code. I'm hoping the wording for this post will be a bit clearer than my previous request for assistance.

I have a .NET Web API, and an AngularJS front end. I have a very simple POST method which accepts a parameter of the ‘Envelope’ type, shown here:

public class Envelope {
    public int listingId { get; set; }
    public string Description { get; set; }

    public override string ToString() {
        return listingId.ToString() + "; " + Description;

The actual POST method on the API appears here:

[EnableCors(origins: "", headers: "*", methods: "*")]
public class EnvelopesController : ApiController {
        // POST: api/Envelopes
        public string Post(Envelope env) {
            return "rval: " + env.ToString() + " (and my addition to env)";

My front-end AngularJS $http POST looks like this:

        $scope.testPOST = function () {
            var env = {
                Description:"some desc"

                method: 'POST',
                url: '',
                data: JSON.stringify(env),
                headers: {
                    'Content-Type': 'application/json'
            success(function (data, status, headers, config) {
                $scope.postStatus = 'success: ' + data;
            error(function (data, status, headers, config) {
                $scope.postStatus = 'error: ' + status;

Here are my issues (numbered for easier reference):

  1. Using all the code as shown above, I get a "400 (Bad Request)" when I call "testPOST()" from my page. This sounds like a .NET Web API routing issue, but I can’t figure out what it is.
  2. I can avoid the 400 (and in fact get a 200) if I change the ‘Content-Type’ header to ‘application/x-www-form-urlencoded’. HOWEVER, that results in the API seeing the ‘env’ parameter as NULL.
  3. I tend to adorn my action method parameter with a ‘[FromBody]’ attribute, but doing so does not fix the problem of ‘env’ being NULL in my API action method.

I have created a simple plunk with my very simple HTML page used to call the API. It can be found here:

Thanks very much for any assistance you can provide.

I found a great blog post that supplied a solution to my issue:

Thanks to everyone for considering my request!

AngularJS POST 400 bad request [duplicate] - angularjs - html, AngularJS POST 400 bad request [duplicate] - angularjs. return null; } } The POST request: $http({ url: 'http://localhost:8080/person', method: 'POST', data:� Property Description; url: We need to send url of http server to perform required operations. data: We will use this property to send required parameters to requested url.

'Content-Type': 'application/x-www-form-urlencoded'

This will work.

angularjs $http service doesn't set cookie on POST but does with GET, angularjs $http service doesn't set cookie on POST but does with GET - angularjs . setData, sessionId); var config = { url: url, method: 'POST', data: { name: model .name, GetCookie(ServerSessionId); if (cookie == null) { return request. Web API returns 400 Bad Request and whole browser app stops sending POST� Angular HttpClient POST request in Angular. If the operation that we are trying to do does not fit the description of any of the methods above (GET, PUT, PATCH, DELETE), then we can use an HTTP wildcard modification operation: POST. That operation is typically used to add the new data to the database, although there are many other use cases.

This is Controller:

public async Task<HttpResponseMessage> GetData(int pageNo, int pageSize)
        HttpResponseMessage response = null;
        int totalPage, totalRecord;

        totalRecord = db.Employees.Count();
        totalPage = (totalRecord / pageSize) + ((totalRecord % pageSize) > 0 ? 1 : 0);

        var record = (from a in db.Employees
                      select a).Skip((pageNo - 1) * pageSize).Take(pageSize).ToList();
        DataWithPaging data = new DataWithPaging
            PageNo = pageNo,
            PageSize = pageSize,
            TotalPage = totalPage,
            TotalRecord = totalRecord,
            EmployeeData = record               

        response = Request.CreateResponse(HttpStatusCode.OK, data);

        return await Task.FromResult(response);

You should have a class named: DataWithPaging

public class DataWithPaging
    public int PageNo { get; set; }
    public int PageSize { get; set; }
    public int TotalPage { get; set; }
    public int TotalRecord { get; set; }
    public List<Employee> Employees { get; set; }

AngularJs and Promises with the $http Service, The AngularJs $http object returns custom promises which can be You can use either .then() or the easier .success() and .error() methods You then implement a service to get the data via $http and a a callback on that same Promise – after the service callback has fired. NET developer for 15 years. Solved: Hi, I am trying to update a version in a project using the REST api via .NET I can sucessfully do GETs but PUTs and POSTs fail with a '400

Returning multiple values from WebApi (post) to AngularJs, pass multiple parameters to web api get method c# I am using .net core C#, WebApi & AngularJs. For saving data my Angularjs code makes a $http call to my WebApi. IsValid) return BadRequest(ModelState); //will return a 400 code . binds HTTP request data to the parameters of an action method Post action method� I wish to call an API Rest that returns a Json to me. Once the JSON is retrieved, the goal is to use a self-completion system. During autocompletion I want a spinner to be displayed until the end o…

404 error when send request to web api controller, 404 is "page not found". You are looking for a route that does not exist. As "j snooze" mentions, as part of the debugging of routes, try it� AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

This website requires JavaScript., A response that represents an error or failure, either from a non-successful HTTP status, an error while executing the request, or some other failure which� I would go with the following REST-style URLs: GET /authors - to get list of all authors GET /authors/{authorId} - basic info about the concrete author in one request GET /authors/{authorId}/detailed - detailed info about the concrete author in one request Additionally, you could have the following methods to extract