Ajax request data with Angularjs is not getting to the action method

Question

I know this is very basic, but I’m starting now. I’m creating a neighborhood register, using Angularjs, my back-end is in C# with ASP.NET MVC. My method is called by view, but does not receive JSON:

This is my method of saving BairroController:

//[HttpPost]
public dynamic save(string bairro)
{
    string user = "100";
    string pass = "a";
    int idEmp = 1;

    master = new ClassMaster();
    BairroModel BairroModel = new BairroModel();
    BairroDTO BairroDto = new BairroDTO();

    return BairroDto.save(BairroModel, user, pass, master.contexto, BairroModel.t0020_id_empresa = idEmp);
}

This is Ajax save:

$scope.AddBairro = function (bairro) {
        $http.post("http://localhost:23714/Bairro/save", bairro).success(function (data) {
            //delete $scope.contatos;
            $scope.contaroForm.$setPristine();
            console.log(bairro);
        });                
    };

Problems:

• When you click save, my method is called, but the parameter receives null. Take the example here.

• The method is called twice and in the firefox console and it is possible to see what was sent, in this case, a OPTIONS and a POST (Why?), but in either case the method captures the json.

• In that link it is possible to see that the json was actually sent, it is also possible to see the POST and the OPTIONS.

• In the Back-end, this part is commented, if "uncommented", the method is not called.

Answer 1

"Error" occurs because ASP.NET is unable to do the Binding of the data of your request, which is what is contained in the object bairro of the Javascript part of your code, with the parameter string bairro of your action method in the C#.

The reason for the Binding not working in the expected way is that in the sent object none of the properties corresponds literally to "neighborhood", and it is mandatory that in its sending data something corresponds to "neighborhood"because when you arrive at the server ASP.NET will analyze the request and extract what will be used to feed each of the parameters of the action method target of the requisition.

As far as I could see in that image the variable bairro is an object and that at the time of sending the request contains several properties, you probably got confused in that part by sending it in full in the request.

So instead of sending the object bairro in full, extract and send only the data on the neighborhood that is contained in it.

Analyzing the image I would say that your request could look as follows:

$http({
    url: 'http://localhost:23714/Bairro/save',
    method: 'POST'
    params: { bairro: bairro['t0010_id_bairro'] }
})
.success(function (data) {
    $scope.contaroForm.$setPristine();
    console.log(bairro);
});

Answer 2

First, ASP.NET is expecting a POST in the "application/x-www-form-urlencoded" format. adapt your $http to the following:

Note: According to Angular’s recommendation, Success was discontinued, use (THEN).

$http({
    url: 'http://localhost:23714/Bairro/save',
    method: 'POST',
    headers : {'Content-Type': 'application/x-www-form-urlencoded'} ,
    data: { bairro: bairro }
}).then(function(){
     $scope.contaroForm.$setPristine();
     console.log(bairro);
})