Sending Multiple Items to MVC Controller via jQuery.Ajax

Question

If youa are serializing a form using something like jQuery, it will often map the JSON keys and values to the properties of a object on the Controller Action you are posting to. So:

jQuery:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data:  $('#form').serialize(),
        complete: callFunction
        }
    });

Presuming main details contains elements which will have the name of the parameter as a key they should map to the object directly:

Action:

public void TestMVC(MyObject obj)
{
//Obj should now contain the data from the serialised form
}

POST:

Name: "Bob"
Age: "999"
Sex: "Unknown"

Does anyone know how this works? It's breaking every time I pass the form and any additional data to the controller.

I would like to send the contents of the data as well as a QueryString which could contain any number and types of key/value pairs to the controller. I can extract these key/value pairs on the server since I cannot create an object for them on the method signature. However, this fails to work as intended.

jQuery:

function PostForm() {

    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: 
        { 
           Obj: $('#form').serialize(),
           TheWeirdQueryString: $('.additionalParams').serialize(),
        }
    });
};

Action:

public void TestMVC(MyObject obj, String TheWeirdQueryString)
{
//Obj now does NOT contain the element, it is NULL. Whereas TheWeirdQueryString works fine. 
}

Post:

Obj: name=bob&age=999&sex="unknown"
TheWeirdQueryString: param1=1&param2=2

I think this is because I have actually created a JSON object as the Data and set the properties to the name of the object.

There is a difference in the POST values which appear in Firebug. When I post the object alone, the POST values are all the keys of the object/form with their corresponding values. In the second example there are two simple properties, The name I gave them, each containing a QueryString (Foo=1&Bar=2) and MVC cannot map a QueryString to the members of an object (or so it would appear).

Is there anyway at all to get to work like it does in the first instance, but also to send extra data to a 2nd argument on the Action? I am guessing it's to add an extra property to all the existing ones created when jquery does the serialisation of the form.

The POST I actually want is:

Name: "Bob"
Age: "999"
Sex: "Unknown"
TheWeirdQueryString: param1=1&param2=2

Solution

dataType parameter in $.ajax method is the type of response (the type of data that you're expecting back from the server), not request. Try this instead:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    });
};

or:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC" + "?" + $('.additionalParams').serialize(),
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize()
    });
};

UPDATED:

Try this:

Controller:

public void TestMVC(MyObject obj, String[] TheWeirdQueryString)
{
}

Client:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    });
};

but on client side your additional params must be in the following format:

TheWeirdQueryString[0]=param1&TheWeirdQueryString[1]=param2&...&TheWeirdQueryString[n]=paramN

so $('.additionalParams') elements must have "id" and/or "name" attributes like: TheWeirdQueryString[1], TheWeirdQueryString[2] ... TheWeirdQueryString[N]

Hope this helps

Comments

[Damien]

The jquery result receives a JSON object, My references were because I thought the {} for data created a JSON object? The 1st example doesn't work. It justs add those parameters to the first object where I need all the parameters to be in a string as a single parameter. 2nd example works if I use Request.QueryString.

[Damien]

I tried var content = $('.additionalParam').serialize()? Is form["additionalParam"] different?

[Damien]

Nice solution, I actually voted you up for the first one anyway since it's working. The new one you posted won't work since I need the name of the key (i.e id/name of the element) to perform processing on it. (I turn it into a dictionary of key/value pairs)

[Damien]

IS that what the POST format should be or do I need to do the format myself. It keeps doing key:value key:value instead of what you posted