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.