AngularJS - $http.post keeps sending "NULL" values to ASP.NET Web API 2

Question

In simple terms, I'm making a task management tool with CRUD funcionality using AngularJS for the frontend and ASP.NET for the backend.

In the ASP.NET I've created a table called "KBTM_Task" with the following parameters:

public class KBTM_Task
{
    public int ID { get; set; }
    public string KBTM_Task_ID { get; set; } // this is an ID chosen by the user
    public string KBTM_Task_Title { get; set; }
    public string KBTM_Task_Description { get; set; }
}

If I had rows to this table, either manually in Visual Studio or with Postman, then I can successfuly display these rows in a table in the frontend app using $http.get.

The problem is when adding new rows within the app. I have a "New Task" button which takes the user to a form. What I want is for those values filled by the user to be stored in the database and then displayed in the table with the others.

Here's my HTML code:

<div class="form-group row">
    <div class="col-xs-12 col-md-6">
        <label for="Task_Title">Title</label>
        <input type="text" class="form-control" id="Task_Title" ng-model="tasks.title">
    </div>
    <div class="col-xs-6 col-md-3">
        <label for="Task_ID">ID</label>
        <input type="text" class="form-control" id="Task_ID" ng-model="tasks.id">
    </div>
    <div class="col-xs-6 col-md-3">
        <label for="Task_Description">Description</label>
        <textarea class="form-control" rows="3" id="Task_Description" ng-model="tasks.description"></textarea>
    </div>
</div>

Here's the Angular code:

$scope.add = function (tasks)
{
    if ($scope.tasks.title != null)
    {
        $scope.tasks.push
        ({
            'KBTM_Task_ID': $scope.tasks.id,
            'KBTM_Task_Title': $scope.tasks.title,
            'KBTM_Task_Description': $scope.tasks.description
        });

        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };

        $http.post('http://localhost/api/KBTM_Task', JSON.stringify($scope.tasks), config)
            .then(
                function(response){
                    console.log(response.data)
                }
            );
    }
}

The problem is that this adds a new row but with all the parameters "NULL". So it successfuly creates a new entry in the database but it doesn't send any of the values that I filled in the form.

You can check my KBTM_TaskController (95% of it was automatically generated by Visual Studio) on this pastebin: http://pastebin.com/HRvgN7Jr

Please help me as I'm completely stuck. If you require more information, don't hesitate to ask. Thank you!

Don't know Angular, but the HTML spec says that form controls must have a name attribute to be considered successful controls, and only successful controls get included in a normal form submission. — Tieson T.
– Tieson T., Commented Jul 11, 2016 at 16:05

Win · Accepted Answer · 2016-07-11 17:24:20Z

1

Ideally, you want to post data inside body. FYI: Posting data via URL has limitation.

If so, you do not need JSON.stringify and config. $scope.tasks is enough.

Please ensure post data is a single record instead of array.

var data = {
  'KBTM_Task_ID': 'one',
  'KBTM_Task_Title': 'two', 
  'KBTM_Task_Description': 'three' 
}; 

$http.post('http://localhost/api/KBTM_Task', data)
  .then(function(response){ console.log(response.data)} );

However, Post action method's parameter binding should be [FromBody] which forces Web API to read a complex type from the request body.

public IHttpActionResult PostKBTM_Task([FromBody] KBTM_Task kBTM_Task)
{
   ...
}

edited Jul 11, 2016 at 17:24

answered Jul 11, 2016 at 16:00

Win

62.4k13 gold badges106 silver badges190 bronze badges

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

5 Comments

Telmo F. Over a year ago

If I change [FromUri] to [FromBody] it gives me an error: POST http://localhost/api/KBTM_Task 400 (Bad Request). And if I try to POST with Postman I get this error in Visual Studio:

An exception of type 'System.ArgumentNullException' occurred in EntityFramework.dll but was not handled in user code. Additional information: Value cannot be null.

I get this error on the line db.KBTM_Tasks.Add(kBTM_Task); in the POST section of the controller.

Win Over a year ago

Look like a column is null while inserting a data. If you set a break point inside PostKBTM_Task action method, do you see kBTM_Task model is populated with data?

Telmo F. Over a year ago

No. I've set two breakpoints, one on the line that gives the error and one before, both inside PostKBTM_Task. And my table stayed the same, no new data.

Win Over a year ago

Look like you are posting an array. Could you try this

var data = {'KBTM_Task_ID': 'one','KBTM_Task_Title': 'two', 'KBTM_Task_Description': 'three' }; $http.post('http://localhost/api/KBTM_Task', data )   .then(function(response){ console.log(response.data)} );

?

Telmo F. Over a year ago

Yep, that did it! Thank you so much for your help!

Deep · Accepted Answer · 2016-07-11 17:22:58Z

1

it should be working with following changes.

1: Send the data as object only

$scope.tasks = { 
                 'KBTM_Task_ID': $scope.tasks.id, 
                 'KBTM_Task_Title': $scope.tasks.title, 
                 'KBTM_Task_Description': $scope.tasks.description 
};

2: Need not to pass the config as the default content type is application/json in angular.

$http.post('localhost/api/KBTM_Task', $scope.tasks) 
.then(function(response)
     { 
        console.log(response.data) 
     });

or you can use get the request data as the Request.Form in the web method in the API by using the below approach

      var data = $.param($scope.tasks);

      var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }


      $http.post('http://localhost/api/KBTM_Task', data, config)
        .then(
            function(response){
                console.log(response.data)
            }
        );

edited Jul 11, 2016 at 17:22

answered Jul 11, 2016 at 15:24

Deep

9,7962 gold badges24 silver badges34 bronze badges

7 Comments

Telmo F. Over a year ago

Thanks! I changed that but unfortunetely it still sends values as "NULL". And I've already read those docs and searched a great deal online. Still couldn't find a solution.

Deep Over a year ago

could you provide the value of JSON.stringify($scope.tasks)

Telmo F. Over a year ago

Sure! I did a console.log(JSON.stringify($scope.tasks) and got this: [{"KBTM_Task_Title":"TestTitle","KBTM_Task_ID":"TestID","KBTM_Task_Description":"TestDescription"}]. So it is saving correctly, right? It's just not posting correctly. Weird.

Deep Over a year ago

@T.Ferreira : i have updated answer with alternate approach. Hope this will help you. Let me know if you still see the issue

Telmo F. Over a year ago

Just a question before I try it. Should I use the Content-Type you used here or the application/json?

|

Collectives™ on Stack Overflow

AngularJS - $http.post keeps sending "NULL" values to ASP.NET Web API 2

2 Answers 2

5 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related