How to POST object + array to WebApi .NET/C# controller using AngularJS $http?

Question

My C# model:

public class MyModel
{
    public string MyString { get; set; }
    public int MyInt { get; set; }
    public List<MyList> MyList { get; set; }
}

public class MyList
{
    public string MyListString { get; set; }
    public int MyListInt { get; set; }
}

My C# method:

[HttpPost]
public void SomeMethod(MyModel MyModel)
{

My AngularJS $http:

$http({
    url: "/api/SomeCtrl/SomeMethod",
    method: "POST",
    data: // WHAT TO PUT HERE?
    headers: { 'Content-Type': 'application/json' }
});

I'm able to fill MyModel with:

data: transportDocumentData.TDShipment,

Or MyList which is present in MyModel with:

data: JSON.stringify({ Package: transportDocumentData.TDShipment.packageData }),

But I don't know how to fill them both. I tried with both options:

$http({
    url: "/api/SomeCtrl/SomeMethod",
    method: "POST",
    data: myModelData.MyModel,
    data: JSON.stringify({ MyList: myModelData.MyModel.myListData }),
    headers: { 'Content-Type': 'application/json' }
});

Which won't work, because the second data overwrites the first one. I also tried this:

var abc = myModelData.MyModel;
$http({
    url: "/api/SomeCtrl/SomeMethod",
    method: "POST",
    data: JSON.stringify({ MyList: myModelData.MyModel.myListData }), abc
    headers: { 'Content-Type': 'application/json' }
});

But in this case only the MyList is filled.

I tried to modify MyMethod like this:

[HttpPost]
public void SomeMethod(List<MyModel> MyModel)
{

With even worse results.

So, how is it done correctly?

EDIT: I forgot to include these:

$scope.myListData = [{ myListString: "bar", myListInt: 5 }];

$scope.myData = {
    myString: "foo",
    myInt: 3,
    myListData: $scope.myListData
}

 var myModelData = {
    MyModel: $scope.myData
};

So, send `myData` - that one will match your model in WebApi ;) You don't need `myModelData`. (name of variable in WebApi action is not important in that context, only the type must match). — Lukasz Mk, Jun 23 '17 at 15:33

Lukasz Mk · Answer 1 · 2017-06-23T20:42:39.800

1

You need just create a JSON object, will match your C# model and send it - that's all. WebApi will do the job (Model binding).

So answering your question:

data: // WHAT TO PUT HERE?

create/fill your json model in Angular:

$scope.myListData = [{ myListString: "bar", myListInt: 5 }];

$scope.myData = {
    myString: "foo",
    myInt: 3,
    myListData: $scope.myListData
};

and pass it trough directly:

$http({
    url: "/api/SomeCtrl/SomeMethod",
    method: "POST",
    data: $scope.myData
});

Is that answer on your question?

edited Jun 23 '17 at 20:42

answered Jun 23 '17 at 13:36

Lukasz Mk

7,000
2
27
41

I updated my question in order to make things more clearer. I already have what you suggested in my code. – Tomo Jun 23 '17 at 14:09
I have updated my answer using your example - just send `myData` - that one will match your model in WebApi ;) You don't need `myModelData`. – Lukasz Mk Jun 23 '17 at 20:43
I already tried your solution myself. This way `public List MyList { get; set; }` won't fill. I also tried `public MyList MyList { get; set; }`, just to be sure, with the same outcome. – Tomo Jun 25 '17 at 12:08
Hmm... I just found a small issue in your example: in C# model you have `public List MyList { get; set; }` so the name of the properties in the Angular model should be `myList` but with your example is `myListData` - check this in your code, please? – Lukasz Mk Jun 25 '17 at 12:27
Also, the issue can be with Binding a data you sending - WebApi is using Newtonsoft to deserialize JSON object... I had in the past issue with that - my model was null, because of exception during deserialization but the exception was caused by invalid data I have sent from Angular. I have found that by debugging, it was very deep, so I don't remember exactly how to find it. However, you can see in browser developer tools what data you sending from Angular, try to investigate if all is ok? – Lukasz Mk Jun 25 '17 at 12:42
It's not that. A possible solutions would be: `public class MyModel { public MyClass MyClass { get; set; } public List MyList { get; set; } } public class MyClass { public string MyString { get; set; } public int MyInt { get; set; } } public class MyList { public string MyListString { get; set; } public int MyListInt { get; set; } }` but it's annoying that one has to put classes in a model class when it could be done directly somehow. – Tomo Jun 25 '17 at 14:15
It's working in my case - I have a lot of similar models and there is no issue with that, so it's hard to say if I cannot see your code - did you verified in browser developer tools what do you sending from Angular? – Lukasz Mk Jun 25 '17 at 15:00
Maybe create a new simple test app, and you will see it will work? If not post a link to the public repo and we will try to help. – Lukasz Mk Jun 25 '17 at 15:02

How to POST object + array to WebApi .NET/C# controller using AngularJS $http?

1 Answers1