Ajax form serialize doesnt bind when using multiple parameters in MVC Controller

Question

I have a view with multiple inputs for my Model (Html.TextBoxFor(x => x.attribute) etc. And my ajax method is:

function callMethod() {
    $.ajax({
        type: "POST",
        data: $('#Form').serialize() ,
        url: '@Url.Action("formMethod", "Test")',
    }).done(function (newTable) {
        $('#RefundTableDiv').html(newTable);
    });
};

and this works perfectly, the model comes perfectly to formMethod, but when i change formMethod and add another parameter for example 'int test' it doesnt work anymore.

My method looks like:

function callMethod() {
 var number = 2;
    $.ajax({
        type: "POST",
        data: {"model": $('#Form').serialize(),
               "test": number}, 
        url: '@Url.Action("formMethod", "Test")',
    }).done(function (newTable) {
        $('#RefundTableDiv').html(newTable);
    });
};

the "test": number does come correctly to the method in the controller but the model suddenly is null now?

What am i doing wrong?

the model is null because you're sending JSON with a url-encoded string within it. You can't mix the formats like that. Your controller just thinks "model" is a random string value. Either submit everything as JSON, or everything as regular query parameters — ADyson
– ADyson, Commented Oct 2, 2017 at 13:47

user3559349 · Accepted Answer · 2017-10-02 22:01:31Z

4

Using .serialize() serializes your model as a query string (e.g. someProperty=someValue&anotherProperty=anotherValue&...). To add additional name/value pairs, you can append then manually, for example

var data = $('#Form').serialize() + '&test=' + number;
$.ajax({
    ....
    data: data;

or use the param() method (useful if you have multiple items and/or arrays to add)

 var data = $("#Form").serialize() + '&' + $.param({ test: number }, true);
 $.ajax({
    ....
    data: data;

answered Oct 2, 2017 at 22:01

user3559349

Sign up to request clarification or add additional context in comments.

Comments

Omu · Accepted Answer · 2017-10-05 09:11:02Z

2

you can do it like this:

function callMethod() {
    var number = 2;
    var sd = $('#Form').serializeArray();
    sd.push({ name:"test", value:number });

    $.ajax({
        type: "POST",
        data: sd,
        url: '@Url.Action("formMethod", "Test")',
    }).done(function (newTable) {
        $('#RefundTableDiv').html(newTable);
    });
};

edited Oct 5, 2017 at 9:11

answered Oct 2, 2017 at 18:20

Omu

71.6k95 gold badges286 silver badges413 bronze badges

Collectives™ on Stack Overflow

Ajax form serialize doesnt bind when using multiple parameters in MVC Controller

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related