Ajax request data with AngularJS is not arriving at the action method

Question

Ajax request data with AngularJS is not arriving at the action method

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I know this is very basic, but I'm starting now. I'm creating a neighborhood registry, using AngularJS, my backend is in C # with ASP.NET MVC. My method is called by view , but does not get JSON:

This is my save method on 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 Saving:

$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 I click Save, my method is called, but the parameter receives null . See the example here .
The method is called twice and in the firefox console and you can see what was sent, in this case, a OPTIONS and a POST why? but in neither case does the method catch json .
In this link you can see that json was actually sent, you can also see POST and OPTIONS .
In the Backend, this part is commented out, if "uncommented", the method is not called.

angularjs ajax json mvc

asked by anonymous 23.12.2015 / 12:55

2 answers

How to resize an imageview in Android via code? Error in Hibernate

score 1 · Answer 1

The "error" occurs because ASP.NET is not able to make the binding of the data of your request, which is what is contained in the bairro object of the JavaScript part of your code , with the string bairro parameter of your action method in C #.

The reason for binding not working as expected is that in the object sent none of the properties literally matches the "neighborhood", and it is mandatory that in your submission data something corresponds to "neighborhood ", because when it arrives on the server ASP.NET will analyze the request and extract what will be used to feed each of the request's parameters to the target method.

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

Then instead of sending the object bairro in full, extract and send just the data about the neighborhood that is contained in it.

Looking at the image I would say that your request could look like this:

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

score 0 · Answer 2

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

Note: According to Angular recommendation, Success has been 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);
})