Angular & ASP.NET MVC - Parameter is null when received by backend

Question

I know this has been asked many times on stack overflow but I ran into something weird and want to understand how I can change it to work right.

Everything I read said that when passing back an object to MVC make sure your JSON parameter name matches that of your C# and make sure the MVC object model is the same. When I try example 2 I get null values for the object in the controller but if I use example 1 I get the data as desired.

I would like to use example 2 and I am guessing that the problem happens because of something to do with the WebApiConfig or the global.asax and am hoping someone can clarify.

Model

public class SearchCredential
{
    public string Employee { get; set; }
    public string CostCenter { get; set; }
}

Controller

[HttpPost]
public dynamic SearchEmployees(SearchCredential searchCriteria)
{
   // some code goes here   
}

Javascript example 1:

vm.searchCriteria = {"employee": vm.searchEmployee,
                     "costCenter": vm.searchCostCenter
                    };

$http.post(baseURL + 'SearchEmployees', vm.searchCriteria )

Javascript example 2:

vm.searchCriteria = {"employee": vm.searchEmployee,
                     "costCenter": vm.searchCostCenter
                    };
$http.post(baseURL + 'SearchEmployees', { searchCriteria: vm.searchCriteria })

Answer 1

The signature of post method in angular is post(url, data, [config])

In the first method your are doing it right. ie posting the data as an object

{"employee": vm.searchEmployee,"costCenter": vm.searchCostCenter }

In the second method you are encapsulating the above object inside another one and the data passed will be like

{ {"employee": vm.searchEmployee,"costCenter": vm.searchCostCenter } }

What asp.net does is, whenever the request comes in, it matches the name and signature of the available method and invokes the method with the parameters. C# parses the input parameter and assigns the matched value to matched property name. In your case you have a post method accepting one object parameter with the properties Employee and CostCenter .

In example 1 input json data is {"employee": vm.searchEmployee,"costCenter": vm.searchCostCenter } and it will be assigned the respective C# variable.

In case of example 2 the data will be parsed as an anonymous object with value {"employee": vm.searchEmployee,"costCenter": vm.searchCostCenter } . Since the property in JSON is un-named and C# cannot find a corresponding place to assign the value, the input will be null.

Just for understanding You can get the value if you declare the c# object as public class

SearchCredential
{
    public string Employee { get; set; }
    public string CostCenter { get; set; }

    public SearchCredential credential { get; set; }
}

In this case you will get data in the third property for example 2