Passing complex object from angular service to MVC controller

I am trying to pass complex object from angular service to MVC controller. Below is the code-:

Angular Controller

 $scope.saveData = function () {

 var resultData = new Object();
 resultData.Name = $scope.Name;
 resultData.Address = new Object();
 resultData.Address = $scope.Address;
 resultData.Address.Contact = $scope.Address.Contact;


     var promiseOrganization = AngularService.saveResult(resultData);

     promiseOrganization.then(function (result)
        {
            alert("Saved successfully.");
        }
    )
}

Angular Service

this.saveResult = function (resultData) {
    return $http.post("/Form/SaveData/" + resultData);
    }

MVC Controller

  [System.Web.Http.HttpPost]
    public string SaveData([FromBody] resultData data)
    {

        //operation to perform
        return "Data Reached";
    }

When I try passing complex object from Angular service to mvc controller. It gives me null i.e. object becomes null.

Please suggest.


When using the $http.post method you need to pass the data object as the second paramenter. You can read up on it here

So your angular code should look like

$http.post("/Form/SaveData/", data);

You then need a server side representation of the data you are passing the WebApi controller

public class MyCustomObject
{
   public string          Name    { get; set; }   
   public MyCustomAddress Address { get; set; } 
}

public class MyCustomAddress
{
   public string AddressLine1  { get; set; }
   public string AddressLine2  { get; set; }
   public string Contact       { get; set; }
}

You need to update your WebApi controller code to use the new server side class as the parameter. Note that I am not using the [FromBody] attribute as this link explains you only need to use the [FromBody] attribute when you want to force Web API to read a simple type from the request body(your type is a complex type)

To force Web API to read a simple type from the request body, add the [FromBody] attribute to the parameter

Updated WebApi Controller code without the [FromBody] attribute:

[System.Web.Http.HttpPost]
public string SaveData(MyCustomObject data)
{    
   //operation to perform
   return "Data Reached";
}

Passing complex object from angular servive to mvc controller, When using the $http.post method you need to pass the data object as the second paramenter. You can read up on it here · enter image description here. Join a community of over 2.6m developers to have your questions answered on Passing complex object as parameter to mvc controller of UI for ASP.NET MVC Grid. New here?


Change your post function to something like this,

$http.post('/Form/SaveData/', resultData)
      .success(function (data, status, headers, config) {
       })
      .error(function (data, status, headers, config) {
       });

Passing complex object as parameter to mvc controller in UI for ASP , Join a community of over 2.6m developers to have your questions answered on Passing complex object as parameter to mvc controller of UI for  The best practice is, pass a complex type object for all the input fields to the server-side to remove complexity. In this article, I am going to explain to you how can you pass complex types object to the Web API and MVC method to remove complexity at the server-side and make it simple and useful. Model Classes


You are wrong in your post command. It should be:

$http.post("/Form/SaveData/",{resultData: resultData});

How to pass multiple parameters to Web API controller methods , How do I pass multiple complex types in Web API? We're using models where much of the data is populated by service calls, so obviously we'd like to keep the calls to a minimum. The problem is that when I try to pass the model back to the controller, the complex objects within the model invariably become null.


The problem is you need to add the following header -> 'Content-Type': 'application/x-www-form-urlencoded'

$http.post('/Form/SaveData/', resultData, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}});

Pass multiple complex objects to a post/put Web API method, object create internal tuple object for last tuple argument. I have the following complex object in JavaScript which contains filter options. which I want to pass to an ASP.NET MVC4 WebApi controller GET. The "filter" object in the ASP.NET controller method is "null". If I change it to a POST the filter object is passed correctly. Is there a way to pass a complex object to a GET?


How to pass javascript complex object to ASP.NET Web Api and MVC, The best practice is, pass a complex type object. thing you have to done with MVC while calling MVC controller method using jQuery-JSON. Here I found a workaround to pass multiple generic objects (as json) from jquery to a WEB API using JObject, and then cast back to your required specific object type in api controller. This objects provides a concrete type specifically designed for working with JSON.


How to pass multiple complex objects to Web API action, This value in turn can even be a complex object. It is possible to pass multiple values though on a POST or a PUT operation by mapping one  In your Asp.Net MVC controller, you are calling your Web API and you need to pass both the classes objects to your Web API controller. Method 1: Using ArrayList. For passing multiple complex types to your Web API controller, add your complex types to ArrayList and pass it to your Web API actions as given below-


ASP.NET Web API: Passing Multiple Objects as an Input Parameters , suppose this is sample action public void StartProcessiong([FromBody]Content content, [FromBody]Config config) { } OR public void  Passing multiple Parameters to a Web API Controller. Single parameters work fine in either of these RPC scenarios and that's to be expected. ModelBinding always works against a single object because it maps a model. But what happens when you want to pass multiple parameters? Consider an API Controller method that has a signature like the following: