Passing object from AngularJS to ASP.NET MVC Controller not working

Question

I am sending data from angularJS to MVC controller (I see that angularJS function has argument value, but on MVC controller side that value is null, and I have no clue why is that so...)

//function in angularJS controller

//initialize model
var model = {};
model.Name = "some string";
save(model, onSaveSuccess, onSaveError);
...

//post to MVC controller...
function save(model, success, error) {
    //name **has** value!
    return $http.post('/Test/Save', { params: { model: model } })
        .success(function (data) { errorHandler.jsonError(data, success, error); })
        .error(function (data, status) { errorHandler.httpError(data, status, error); });
}

//MVC controller side (TestController)

[HttpPost]
public JsonResult Save(SaveModel model) //SaveModel is a class that has Name property of type string
{
    //when debug reaches -> name is null...
    //...
}

And in that solution, there are other cases where data are saved seemingly same way and it works there... Any idea what to check, or what might be wrong? I'm new to angularjs, maybe I am missing something really simple...

P.S.

1) If I change "params:" to "data:" as suggested result is the same

2) If I remove "params:" then I get 500 error. I.e. change: { params: { model: model } } -> { model: model }

PROBLEM/Solution

So, the problem turned out to be both client and server side

1) on client side I had to change { params: { model: model } } -> model as suggested by StriplingWarrior

2) on server side my model was inheriting from BaseModel which was setting some localization related stuff in it's constructor... and it was failing on my machine. The problem was that when debuging MVC controller -> this BaseClass code was performed before it, so it was hidden from me. I'm not yet common with browser Developer Tools, so I was not looking for information in the right place -> when I turned to Network tab (Chrome Developer tools), I could get exception information for my service call.

Here is a similar case answered on SO. I seem to follow same rules without success

Answer 1

The second argument to post is the actual data payload that you're posting, so you need to get rid of the params property and promote its object to the top level.

function save(name, success, error) {
    //name **has** value!
    return $http.post('/Test/Save', { name: name })
        .success(function (data) { errorHandler.jsonError(data, success, error); })
        .error(function (data, status) { errorHandler.httpError(data, status, error); });
}

Update

Based on your updated code, you should be passing the model directly as the body of your request:

function save(model, success, error) {
    //name **has** value!
    return $http.post('/Test/Save', model)
        .success(function (data) { errorHandler.jsonError(data, success, error); })
        .error(function (data, status) { errorHandler.httpError(data, status, error); });
}

Answer 2

I am almost 100% sure you need to use JSON.stringify() method on your name object, as passing it directly just like that will not put your string in apostrophes, which is needed for MVC to treat this value as string object.

Please look at what exactly is sent by browser in Developer tools' Network card to confirm my theory.

Answer 3

I'm not sure it's work but you can try to change this

public JsonResult Save(string name) 

To

public JsonResult Save([FromBody]string name) 

When the param name is not null, you can check it's value and change from the angular part accordingly