Why does my Angular POST leave the Web API controller receiving an empty model?

Frontend and Backend Development
1

AngularJS POST sends a payload, yet the Web API backend ends up with an empty model. What could be causing this issue?

<div ng-app="appModule">
  <div ng-controller="MainCtrl">
    <button ng-click="sendData()">Send Data</button>
  </div>
</div>

angular.module('appModule', [])
.controller('MainCtrl', function($scope, $http) {
  $scope.sendData = function() {
    let payload = { userName: 'SampleName' };
    $http.post('/api/submit', JSON.stringify(payload), { headers: { 'Content-Type': 'application/json' } })
      .then(resp => console.log(resp), err => console.error(err));
  };
});

[RoutePrefix("api")]
public class ApiSubmitController : ApiController
{
    [HttpPost]
    [Route("submit")]
    public IHttpActionResult SubmitData([FromBody]UserModel model)
    {
        if(model == null || string.IsNullOrEmpty(model.userName)) return BadRequest();
        return Ok("Received");
    }
}

public class UserModel
{
    public string userName { get; set; }
}
2

hey, i was wondering if maybe using JSON.stringify messes up angular’s auto serializing? i had similar hiccups when double encoding happened. have u checked the network tab for content type consistency? what did u observe about the payload?

3

hey, try removing JSON.stringify - angular auto converts data. that double encoding might be messing up your model binding. also, check your headers are intact in the network tab. might fix the issue.

4

hey, im curious if the binding in your api might be off. maybe check if any default convention overrrides are interfering? also try ditching JSON.stringify and see if the data maps correctly on the c# side. what do you think?

5

Through my experience, I found that manually stringifying the payload can sometimes disrupt Angular’s automatic data handling. In one instance, removing JSON.stringify resolved the model binding issue by allowing Angular to manage the serialization process, which in turn ensured that the proper headers were sent. It is also important to verify that the Angular model properties exactly match those expected by the Web API. Checking the configuration for the JSON formatter on the server side can further help ensure that the incoming data is correctly bound to the model.

6

hey, try verifiying your web api’s json formater config. sometimes case mismatches or old middleware settings drop the payload. a quick tweak there might fix the binding. idk, but worth a shot.