AngularJS $http.post to ASP.NET Web API controller with simple type argument

Question

I have a simple test to try to understand $http.post from AngularJS to ASP.NET WebAPI. The post manages to succeed, but received value on the API appears as null. I have tested this and seen that the $scope object holds a value before being posted.

I have checked all over the place and I see that ASP.NET WebAPI handles posts data in strange ways.

Here is my HTML code for getting the input, Basic.html:

<form name="basicItem" novalidate ng-app="app" ng-controller="ItemCtrl">
<label id="titlelabel" class="required">Title</label>
<input ng-model="item.Title" type="text" id="titlefield" name="Title" 
required />

This is the code from ItemController.js, which checks validation and posts (I am using CORS since both of these programs have separate domains):

app.controller("ItemCtrl", ['$scope', '$http', function ($scope, $http) {
$scope.submitForm = function (form) {

if (form.$valid) {       //If Title has some value
    item = {
    "Title": $scope.item.Title,     //Set "Title" to the user input
           }
    alert($scope.item.Title);        //This shows that my value is not null
    $http.post("http://localhost:50261",
      {
      testTitle: $scope.item.Title       //!!!Probably the problem, sets 
      }).success(function (result) {     //the parameter of API post
           alert('Success!');            
      }).error(function (data) {
           alert("Valid but didn't connect");
      console.log(data);
      })

And this is the code in the API controller, EntryController.cs:

[HttpPost]
public string CreateEntry([FromBody]string testTitle)
{
     return testTitle; //returns null!!!
}

I have read about needing [FromBody] and only using 1 simple parameter. Finally I have also seen that I should wrap my post value in quotes or give a leading "=" sign, but both of these methods don't seem to work. Any help or suggestions would be grand.

Have you tried returning hardcoded string value in order to isolate whatever the problem is in the Action binding value or the client side ? Just use return "ThisIsATest" to verify where is the problem and tell us the results. — Orel Eraki
– Orel Eraki, Commented Feb 17, 2016 at 22:35

the berserker · Accepted Answer · 2016-02-17 23:17:57Z

3

As mentioned by bluetoft, the problem is that WebAPI handles the serialization a little strange.

If your controller accepts a primitive type with [FromBody] attribute, it expects =value in POST body, instead of JSON. You can read more on that topic here.

So your request should contain only the primitive value, like this:

    $http.post(urlTest, '"' + $scope.item.Title +'"').success(function(result) { 
        alert('Success!');
    }).error(function(data) {
        alert("Error!");
    });

Also note how double quotes are concatenated, so that the subimitted value is actually "Your Title", instead of only Your Title, which would make it invalid string.

edited Feb 17, 2016 at 23:17

answered Feb 17, 2016 at 23:12

the berserker

1,6043 gold badges23 silver badges41 bronze badges

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

1 Comment

byteGeist Over a year ago

Thank you this worked. I had read about needing the '=value', but the only resource I had found was for Jquery. I greatly appreciate it.

bluetoft · Accepted Answer · 2016-02-17 22:36:43Z

0

.NET web api controllers handle the serialization a little strange. You'll need to JSON.stringify your data first. Try this in your controller:

 $http.post("http://localhost:50261",
      JSON.stringify({
      testTitle: $scope.item.Title       
      })).success(function (result) {     //the parameter of API post
           alert('Success!');            
      }).error(function (data) {
           alert("Valid but didn't connect");
      console.log(data);
      })

edited Feb 17, 2016 at 22:36

answered Feb 17, 2016 at 22:35

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS $http.post to ASP.NET Web API controller with simple type argument

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related