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

Answer 1

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

Answer 2

Data is an object

...
data: { 
    x :$('#form').serialize(), 
    y:'something else'
}
...

Answer 3

Another solution if you want a dictionary of key/value pairs:

public void TestMVC(MyObject obj, IDictionary<string, object> TheWeirdQueryString)
{
}

Client:

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

$('.additionalParams').serialize() format:

TheWeirdQueryString[0].Key=param0&TheWeirdQueryString[0].Value=value0&TheWeirdQueryString[1].Key=param1&TheWeirdQueryString[1].Value=value1&...&TheWeirdQueryString[n].Key=paramN&TheWeirdQueryString[n].Value=valueN

UPDATED:

You need something like this:

<input class="additionalParams" type="text" name="TheWeirdQueryString[0].Key" value="param0" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[0].Value" value="value0" />
<!-- ... -->
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Key" value="paramN" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Value" value="valueN" />