AngularJS post data for WebApi

Question

My problem is related to angular post. My data sent with client is always empty- null. But Fiddler sent with no problem.

WebApi is error user.KullaniciAdi = 'user.KullaniciAdi' threw an exception of type ' System.NullReferenceException '

Apache Cordova Mobile Client - Null Data Fiddler - Full Data

Table is Users.

My Surrogate Users Table:

namespace DiaryRestfulService.Models.ORM
{

 public class UserSurrogate
    {

        public int ID { get; set; }
        public string Username{ get; set; }
        public string Password{ get; set; }
    }
}

My Base User Class : Business Layer

public UserSurrogate InsertUser(UserSurrogate user)
        {
            Users kullanici = new Users()
            {
                Username= user.Username,
                Password = user.Password

            };
            db.Users.Add(kullanici);
            db.SaveChanges();


            return user;

        }

My User Controller :

    [HttpPost]
    public IHttpActionResult KullaniciEkle([FromBody] UserSurrogate user)
    {
        try
        {
            userornek.InsertUser(user);
            return Json("succ");


        }
        catch (Exception)
        {
            return NotFound();
        }


    }

And, my client;

<script>
  var app = angular.module('a', []);
    app.controller('b', function ($scope, $http, $httpParamSerializerJQLike) {

        $scope.Ekle = function () {


            var data =({ Username: $scope.username, Password: $scope.password });

            console.log(data);

            var url = {
                method: 'POST',
                url: 'http://localhost:51975/api/User/KullaniciEkle',
                headers: {
                    'Content-Type': 'application/json; charset = utf-8'
                }

            };

            $http(url, "'" + $httpParamSerializerJQLike(data)+"'").then(function (responce) {
                alert("Oldu");
            }, function (responce) {
                console.log(responce.headers);
                console.log(responce.data);
                console.log(responce.status);
                console.log(responce.config);
     alert("Olmadı");
            });
        }
    });

</script>

Where do i make the mistake? Help me please.

Answer 1

I've tried all of them, nothing's changed. ( JSON.stringify including)

   <script>
      var app = angular.module('a', []);
        app.controller('b', function ($scope, $http) {

            $scope.Ekle = function () {


                var data =({ KullaniciAdi: $scope.username, Sifre: $scope.password });

                console.log(data);

                var url = {
                    method: 'POST',
                    url: 'http://localhost:51975/api/User/KullaniciEkle',
                    headers: {
                        'Content-Type': 'application/json; charset = utf-8'
                    }

                };

                $http(url,data).then(function (responce) {
                    alert("Oldu");
                }, function (responce) {
                    console.log(responce.headers);
                    console.log(responce.data);
                    console.log(responce.status);
                    console.log(responce.config);
         alert("Olmadı");
                });
            }
        });

    </script>

Answer 2

To me it looks like you adding the body data in the incorrect way. Try change the $http setup and define the body in the data section as this

$http({
    method: 'POST',
    url: 'http://localhost:51975/api/User/KullaniciEkle',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
    },
    data: JSON.stringify(data),
}).
success(function (data) {
    alert("Oldu");
}).
error(function (message, status) {
    console.log(message);
});

Answer 3

I did it!!! Thanks for everything. Running code:

https://docs.microsoft.com/en-us/aspnet/core/security/cors

My Controller:

 [EnableCors(origins: "*", headers: "*", methods: "*")]
 public class UserController : ApiController

My Client Post Form Script:

<script>
      var app = angular.module('a', []);
        app.controller('b', function ($scope, $http) {

            $scope.Ekle = function () {

                var veri = { KullaniciAdi: 'test', Sifre: 'test2' };
                var adres = 'http://localhost:51975/api/User/KullaniciEkle';
                var req = {
                    method: 'POST',
                    url: adres,
                    data: JSON.stringify(veri),
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                 },}

                $http(req).then(function () {
                    alert("oldu");

                }, function () {

                    console.log(veri);
                    alert("olmadı");

                    });
            }

        });

    </script>