Sending serialized form to controller plus some other data

Question

I have got a form that I can successfully send to my controller action:

this.submitForm = function (e) {
    var formData = $("#FinalizeForm").serialize();

    $.ajax({
        type: "POST",
        url: '/MyController/MyMethod',
        data: formData
    });

My controller:

[HttpPost]
public void MyMethod(SomeModel model)

And works fine. However, I want to send additional data along with the form's, something like:

var test = {
    name: 'Mike',
    age: '40',
    nationality: 'Portuguese'
}

$.ajax({
    type: "POST",
    url: '/MyController/MyMethod',
    data: {
        model: formData,
        test: test
    }
});

And the controller:

[HttpPost]
public void MyMethod(SomeModel model, AnotherModel test)

But this way, the model variable comes null and the test one comes populated. Why is this? Why did the model come populated before and now doesn't?

I tested sending it alone but in a different way:

$.ajax({
    type: "POST",
    url: '/MyController/MyMethod',
    data: {
        model: formData
    }
});

But model still comes as null.

One option shown in [this answer](http://stackoverflow.com/questions/32353093/mvc-jquery-ajax-post-returns-null/32353268#32353268). Another option is to use `FormData` as per [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Feb 23 '16 at 09:29

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

From the documentation here:

data:

Type: PlainObject or String or Array

Documentation on PlainObject: (emphasis mine)

The PlainObject type is a JavaScript object containing zero or more key-value pairs. The plain object is, in other words, an Object object. It is designated "plain" in jQuery documentation to distinguish it from other kinds of JavaScript objects: for example, null, user-defined arrays, and host objects such as document, all of which have a typeof value of "object." The jQuery.isPlainObject() method identifies whether the passed argument is a plain object or not.

Your data doesn't qualify as either PlainObject, String or Array.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '16 at 09:35

Alexander Derck

13,818
5
54
76

Alright, now I know why it doesn't work, thanks! I still need to find out how to send everything I need – chiapa Feb 23 '16 at 10:11
@chiapa Wouldn't [this answer](http://stackoverflow.com/a/29293681/3410196) suggested by Stephen work? – Alexander Derck Feb 23 '16 at 10:15
It won't because the added data I want to send isn't from inputs. Anyway, I think I found a workaround by adding plain text to the serialized form variable - I am working on it and post it if it's any good. Thanks – chiapa Feb 23 '16 at 10:40
@chiapa, Read both the links I gave you in my comment to your question again. Both methods allow you to serialize your form and add additional data that is not part of the form or from an input. Using `FormData` is easiest you do it by the code shown in the last paragraph/code snippet of the answer – Feb 23 '16 at 11:09

Sending serialized form to controller plus some other data

1 Answers1