current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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.

share|improve this question
    
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 Feb 17 '16 at 22:35
up vote 1 down vote accepted

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.

share|improve this answer
    
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. – byteGeist Feb 18 '16 at 15:04
up vote 0 down vote

.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);
      })
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.