Passing object from AngularJS to ASP.NET MVC Controller

Question

I'm trying to pass some data to my MVC controller from AngularJS but the Customer object is always null on the MVC controller. What am I missing?

Angular

 $scope.new = {}; $scope.AddCustomer = function () { $http.post('/Customer/SaveCustomer', $scope.new).success(function () { }); } 

HTML

 <input class="form-control" type="text" placeholder="CustomerID" ng-model="new.c.CustomerID" /> <input class="form-control" type="text" placeholder="CompanyName" ng-model="new.c.CompanyName" /> <button type="button" class="btn btn-primary" ng-click="AddCustomer()">Save</button> 

C#

 [HttpPost] public void SaveCustomer(Customer customer) { .... } public class Customer { public string CustomerID { get; set; } public string CompanyName { get; set; } } 

Answer 1

Update your HTML like this :

Change new.c.CustomerID to new.CustomerID

<input class="form-control" type="text" placeholder="CustomerID" ng-model="new.CustomerID" /> <input class="form-control" type="text" placeholder="CompanyName" ng-model="new.CompanyName" /> 

Now this will work

$http.post('/Customer/SaveCustomer', $scope.new).success(function () { }); 

Answer 2

First mind the camel case in javascript object

$scope.new = { customerID: '', companyName: '' }; $scope.AddCustomer = function() { $http.post('/Customer/SaveCustomer', $scope.new).success(function() {});

<!--check the changes in ng-model--> <input class="form-control" type="text" placeholder="CustomerID" ng-model="new.customerID" /> <input class="form-control" type="text" placeholder="CompanyName" ng-model="new.companyName" /> <button type="button" class="btn btn-primary" ng-click="AddCustomer()">Save</button> <!--Best of Luck-->

Answer 3

Your model seems to be

new = { c : { CustomerID : '', CompanyName : '' } } 

Which doesn't map to your Customer class. You should refer to new.CustomerID and new.CompanyName. Futhermore I would avoid using the new keyword as variable name.