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

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

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" />

Answer 3

Data is an object

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