AngularJs Post to WebApi is always null

Question

Angular Code:

 getAuthorizationStatus: function () {
                    var deferred = $q.defer();
                     $http({
                        method: "POST",
                        url: url,
                        data: {
                            username: $scope.username,
                            password: $scope.password
                        },
                        contentType: 'application/json',
                        headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                    }).success(deferred.resolve)
                      .error(deferred.reject);
                    return deferred.promise;
                },

My Server side code:

  [HttpPost]
        public int ValidateUser([FromBody]Credentials credentials)
        {
            try
            {
                string username = credentials.username;
                string password = credentials.password;
          //Do stuff
        }
        catch (Exception ex)
        {
            throw ex;
            return -1;
        }

        return -1; // not valid user
    }

The problem I am having is I am able to hit the Api Method but the data inside is always null. I have tried several combinations like this:

  data:  JSON.stringify({
                            "username" : "username",
                            "password":"mypassword"
                        }),

No dice.

What am I doing in wrong ?

Is this really a problem with the client? Any server side web framework should have access to data body posts. What is your server built on here. — Sean Larkin
– Sean Larkin, Commented Nov 13, 2015 at 17:33
@jbrown No, you don't want to use a get request for username and password! — Edward Olamisan
– Edward Olamisan, Commented Mar 20, 2017 at 2:56

amanpurohit · Accepted Answer · 2015-11-13 17:25:44Z

1

Enclose your data in $.param()

Example :

data: $.param({ username: $scope.username,password: $scope.password })

answered Nov 13, 2015 at 17:25

amanpurohit

1,29611 silver badges20 bronze badges

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

4 Comments

Sean Larkin Over a year ago

Not everyone has access to or wants jQuery in their project. You could also use a request transformer I believe. stackoverflow.com/a/1714899/1784301

amanpurohit Over a year ago

Yes, my solution is perfect if you are using jQuery and it makes it really simple to implement. Or if you don't want to use jquery you can refer Sean Larkin's link.

w2olves Over a year ago

@amanpurohit, your approach will solve the problem but add an additional dependency. But your answer will help a lot of people I am sure.

amanpurohit Over a year ago

@w2olves, I mentioned it that my solution is apt if the project is jquery dependent.!

Community · Accepted Answer · 2017-05-23 12:25:22Z

I would instead trying to change the default and appropriate behavior of $http's POST, instead let the server read the data from the right place. Taken from MVC controller : get JSON object from HTTP body?:

[HttpPost]
public ActionResult Index(int? id)
{
    Stream req = Request.InputStream;
    req.Seek(0, System.IO.SeekOrigin.Begin);
    string json = new StreamReader(req).ReadToEnd();

    InputClass input = null;
    try
    {
        // assuming JSON.net/Newtonsoft library from http://json.codeplex.com/
        input = JsonConvert.DeserializeObject<InputClass>(json)
    }

    catch (Exception ex)
    {
        // Try and handle malformed POST body
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    //do stuff

}

It turns out that MVC doesn't really bind the POST body to any particular class. Nor can you just fetch the POST body as a param of the ActionResult (suggested in another answer). Fair enough. You need to fetch it from the request stream yourself and process it.

S.Serpooshan · Accepted Answer · 2018-10-15 10:08:40Z

0

Using [FromBody] beside the action input param is enough to get the data from request. Your problem is that you override the content-type in your Angular code through headers:

contentType: 'application/json',
headers: {
   'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' //*** Remove this!
}

It must be 'application/json' in order to send json data. Just remove that headers and it should work normally.

answered Oct 15, 2018 at 10:08

S.Serpooshan

7,5605 gold badges36 silver badges63 bronze badges

Collectives™ on Stack Overflow

AngularJs Post to WebApi is always null

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related