Send Object as Parameter from View to Asp.net Controller with AngularJS

Question

I'm trying to pass a category object as parameter of my subcategory object to my Asp.net controller. But the .net controller always sets my subcategory.SuperCategory object to null.

This is my SubCategoryobject:

public class SubCategory { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; set; } public string Name { get; set; } [Required] public Category SuperCategory { get; set; } } 

Here my Asp.net controller:

 public void createSubCategory([FromBody]SubCategory subcategory) { System.Diagnostics.Debug.WriteLine("SuperCategoryName: " + subcategory.SuperCategory.Name); } 

This is my AngularJS function:

$scope.savedataSubCategory = function (subcategory) { $http.post('/AAAngular/createSubCategory', { Name: subcategory.Name, SuperCategory: {Id: subcategory.SuperCategory.Id, Name: subcategory.SuperCategory.Name } }) .then(function successCallback(response) { console.log(response); } , function errorCallback(response) { console.log(response); }) } 

And parts of my View:

 <input type="text" class="form-control" data-ng-model="subcategory.Name"> <select data-ng-model="subcategory.SuperCategory"> <option ng-repeat="category in categories">{{category}}</option> </select> <input type="button" value="Save" data-ng-click="savedataSubCategory(subcategory)"/> 

Categories are loaded correctly, this is {{subcategory.SuperCategory}}:

{"Id":63,"Name":"TestCat"} 

And {{subcategory}} is displayed as:

 {"SuperCategory":"{\"Id\":63,\"Name\":\"TestCat\"}"} 

And I think here lies the problem, it can't read this because of the backslashes. When I'm only trying to pass one variable of category, it works, but i need the whole object.
This is how my subcategory looks when I only try to pass the name of category.

{"SuperCategory":{"Name":"TestCat"}} 

Answer 1

First of all you need to construct the object of subcategory that you wish to pass.

 var subCategory = {}; subCategory.Name = subcategory.Name; subCategory.SuperCategory = {} //this is your nested object subCategory.SuperCategory.Id = <assign whatever> ... likewise fill other properties 

Once done then you need to make couple of correction on the posting method like this.

 $http({ url: "route/createSubCategory", //change with correct one dataType: 'json', method: 'POST', data: subCategory, headers: { "Content-Type": "application/json" } }).success(function (response) { console.log(response); }) .error(function (error) { alert(error); }); 

On web api side it should look like

 [Route("createSubCategory")] [HttpPost] public string createSubCategory([FromBody] SubCategory subCategory) { return "output"; } 

Just note the return type in your case it's void which should not be.Either return the appropriate viewmodel or string based on your need.Also I have decorated this method with HttpPost attribute.

Hope this helps.