Cannot pass data to the controller from $http in angularJS

Question

I am creating a simple angularJS application but I am not able to pass data to the APIController. APIController is defined in C# language. When I pass the data with this code-

    var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope, $http) {
        $scope.data = {
            Name: '',
            Username: '',
            Password: '',
            Email: ''
        },
        $scope.saveData = function(data) {
            $http ({
                method: 'POST',
                url: '/api/Account',
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json"
            });
        .success(function (data) {
            $scope.registrationShow = function () {
            return true;
         },
         $scope.status = "Data is saved successfully."
     })
    .error(function(error){
        $scope.status = "Unable to register data." + error.message;
    })
  }})

And HTML code is-

<div data-ng-app="myApp">
   <div data-ng-controller="MyCtrl" >
     <form data-ng-submit="saveData()">
        <table style="margin: 25%; margin-top: 100px">
            <tr>
                <td>Name: </td>
                <td>
                    <input type="text" data-ng-model="data.Name" /></td>
            </tr>
            <tr>
                <td>Username: </td>
                <td>
                    <input type="text" data-ng-model="data.Username" /></td>
            </tr>
            <tr>
                <td>Password: </td>
                <td>
                    <input type="password" data-ng-model="data.Password" id="pass" /></td>
            </tr>
            <tr>
                <td>Confirm Password: </td>
                <td>
                    <input type="password" id="confpass" /></td>
            </tr>
            <tr>
                <td>Email: </td>
                <td>
                    <input type="text" data-ng-model="data.Email" /></td>

            </tr>
            <tr>
                <td colspan="2">
                    <button id="btn" style="margin-left: 300px" type="submit" >Save</button></td>
            </tr>
            <tr>
                <td><label>
        {{status}}
    </label></td>
            </tr>

        </table>
    </form>


</div>

My APIControoler class is-

    public class AccountController : ApiController
{
    Database1Entities db = new Database1Entities();

    [HttpPost]
    public HttpResponseMessage PostData([FromBody]User user)
    {
        if (user == null)
        {
            return new HttpResponseMessage(HttpStatusCode.BadRequest);
        }
        else
        {
            User objUser = new User();
            objUser.Name = user.Name;
            objUser.Username = user.Username;
            objUser.Password = user.Password;
            objUser.Email = user.Email;
            db.Users.Add(objUser);
            db.SaveChanges();
            return new HttpResponseMessage(HttpStatusCode.Created);
        }
    }
}

Only "null" data is passing to the controller. I am not able to find out the actual problem. Please help me as soon as possible.

Answer 1

Simply replace ".success" with ".then" and add error as .then's second function argument. General usage subtopic in [this][1]

[1]: https://docs.angularjs.org/api/ng/service/$http should help

Answer 2

In your $http call you have semicolon at the end, which throws error on the next line:

$http ({
            method: 'POST',
            url: '/api/Account',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json"
        }); <-------------------------------------
    .success(function (data) {
        $scope.registrationShow = function () {
        return true;
     },

Try to remove it.

And also i believe problem is, that you try to pass data to your save method. You should get it from scope like this:

data: JSON.stringify($scope.data)

Answer 3

Hi that might happend because you are using jQuery ajax call

In angular way you please see below:

 $scope.saveData = function(data) { 

                 $http.post('/api/Account',data).then(onSucess, onError);

    function onSucess(data){
    ...
    };

    function onError(){
    ...
    }


    };