Data is not posting in Angularjs to WebApi

Question

Angular code is below. Please look if I am missing something in post request -

<script>   
var app = angular.module("myApp", [])
.controller("myControllerSubmit", function ($scope, $http) {
    $scope.submit = function () {
        var Employee = { empID: $scope.empId, Name: $scope.empName, Gender: $scope.empGender }
        $http(
        {
          method: 'POST',
          url: 'http://localhost:58365/home/saveEmpData',
          data:  Employee,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded'                       }   
        }).success(function (response,status,headers,config) {
              $scope.data1 = response.data;
        })
    }
})
</script>

In webApi I am getting null Employee object

[HttpPost]
public void saveEmpData( Employee emp)
{
    if (emp.Name != null)
    {
        var objempList = new DAL();
        objempList.saveData(emp);
    }
}

pass `data: {emp : Employee}`. – gaurav bhavsar Aug 29 '16 at 10:19 — gaurav bhavsar, Aug 29 '16 at 10:19

score 0 · Answer 1 · answered Aug 29 '16 at 09:29

0

Just put [FromBody] Attribute before emp parameter to get data from posted request.

public void saveEmpData([FromBody] Employee emp)

answered Aug 29 '16 at 09:29

Pankaj Parkar

134,766
23
234
299

i tried [FromBody] but its not helpful...still m getting null object – MukulSharma Aug 29 '16 at 09:41
try ` data: angular.fromJson(Employee)` – Pankaj Parkar Aug 29 '16 at 09:42
@pankaj..angular.fromJson(Employee) also not working – MukulSharma Aug 29 '16 at 09:45

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

The content type x-www-form-urlencoded is used when sending body content as one giant string. Read Matts great answer about it here
In your case you want to send an object and then its more suitable to use the content type json.
I would change the submit as below and try again

    <script>   

          var app = angular.module("myApp", [])

        .controller("myControllerSubmit", function ($scope, $http) {

            $scope.submit = function () {
                var Employee = { empID: $scope.empId, Name: $scope.empName, Gender: $scope.empGender }
                $http(
              {
                  method: 'POST',
                  url: 'http://localhost:58365/home/saveEmpData',
                  data:  JSON.stringify(Employee),
                  headers: { 'Content-Type': 'application/json'                       }   
              }).success(function (response,status,headers,config) {
                  $scope.data1 = response.data;
              })
            }
        })

    </script>

edited May 23 '17 at 10:29

Community

1
1

answered Aug 29 '16 at 09:52

Marcus Höglund

16,172
11
47
69

.its giving error like - 'angular.js:12520 ReferenceError: json is not defined' – MukulSharma Aug 29 '16 at 09:59
@MukulSharma sorry, You need to use JSON instead of json. Updated my answer – Marcus Höglund Aug 29 '16 at 10:01
now i am getting this error - XMLHttpRequest cannot load http://localhost:58365/home/saveEmpData. Response for preflight has invalid HTTP status code 404 – MukulSharma Aug 29 '16 at 10:15
@MukulSharma are the url correct? You tagged web-api but so shouldn't the url be /api/home? Please provide the complete code of the web api controller class where the method saveEmpData is defined. – Marcus Höglund Aug 29 '16 at 11:17
i checked it in IE its working properly. I think this error is browser specific – MukulSharma Aug 29 '16 at 12:09
@MukulSharma How did you checked it in IE? Did the post method work in IE only? – Marcus Höglund Aug 30 '16 at 05:17
i think IE avoid Preflight request. – MukulSharma Aug 30 '16 at 05:19

score 0 · Answer 3 · answered Aug 29 '16 at 09:54

try this..

          <script>   

                  var app = angular.module("myApp", [])

                .controller("myControllerSubmit", function ($scope, $http) {

                    $scope.submit = function () {
                          var Employee = { empID: $scope.empId, Name: $scope.empName, Gender: $scope.empGender }
                         $http.post( 'http://localhost:58365/home/saveEmpData', json.Stringify(Employee) ).success(function (response,status,headers,config) {
                          $scope.data1 = response.data;
                        }).error (function(){
                              alert("error")
                          });
                    }
                })

                 </script>

Umair Farooq · Answer 4 · 2016-08-29T10:21:59.467

As you want model binding to occur through json, You have to change the variable to the same name as it is in Web api emp.

<script>   

              var app = angular.module("myApp", [])

            .controller("myControllerSubmit", function ($scope, $http) {

                $scope.submit = function () {
                    var Employee = { empID: $scope.empId, Name: $scope.empName, Gender: $scope.empGender }
                    $http(
                  {
                      method: 'POST',
                      url: 'http://localhost:58365/home/saveEmpData',
                      data:  {emp: Employee},
                      headers: { 'Content-Type': 'application/x-www-form-urlencoded'                       }   
                  }).success(function (response,status,headers,config) {
                      $scope.data1 = response.data;
                  })
                }
            })

             </script>

That will solve your issue hopefully

@Umair..if i use your code i am getting this error - XMLHttpRequest cannot load http://localhost:58365/home/saveEmpData. Response for preflight has invalid HTTP status code 404 — MukulSharma, Aug 29 '16 at 10:09
I have edited the code. Just changed this line. data: Employee to data: {emp: Employee} — Umair Farooq, Aug 29 '16 at 10:22

score 0 · Answer 5 · answered Aug 29 '16 at 10:26

0

you made a mistake here in assigning the properties. Replace with this

var Employee = { "empID": $scope.empId, "Name": $scope.empName, "Gender": $scope.empGender }

answered Aug 29 '16 at 10:26

Aravind

40,391
16
91
110

if your finding a trouble even with this! let me know the error. coz I suffered with this kind of null reference exception for 4 days. – Aravind Aug 29 '16 at 10:29
@Aravind...XMLHttpRequest cannot load http://localhost:58365/home/saveEmpData. Response for preflight has invalid HTTP status code 404 – MukulSharma Aug 29 '16 at 10:34
expose your api method completely – Aravind Aug 29 '16 at 10:34

Data is not posting in Angularjs to WebApi

5 Answers5