ASP.NET MVC Jquery Ajax post form serialize?

Question

Ajax function

$(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                type: this.method,
                data: { model: $(this).serialize(), locations: getCheckedLocation(), reports: getCheckedReports() },
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (result) {
                    $('#user_operations_container').html(result);
                    setTimeout(function () { LoadAction('@Url.Action("GetAllUsers", "User")') }, 1000);
                    $("#widgets ul li a").removeClass("link_active");
                    $("#widgets ul li:first-child a").addClass("link_active");
                }
            });
        }
        return false;
    });
});

functions that are using in ajax data attribute

function getCheckedLocation() {
    var nodes = $('#tt_location').tree('getChecked');
    var s = '';
    for (var i = 0; i < nodes.length; i++) {
        if (s != '') s += ',';
        s += nodes[i].text;
    }
    return s;
}

function getCheckedReports() {
    var nodes = $('#tt_reports').tree('getChecked');
    var s = '';
    for (var i = 0; i < nodes.length; i++) {
        if (s != '') s += ',';
        s += nodes[i].text;
    }

    return s;
}

HTML

<div> // there are html helpers for model (dropdownlistfor, textboxfor,...)
</div>
<div> // checkbox tree (#tt_location)
</div>
<div> // checkbox tree (#tt_reports)
</div>

Controller

[HttpPost]
public ActionResult _EditUser(UserViewModel model,string locations,string reports)
{
    // model = null
    // locations and reports are expected. (not null)
}

Question

Why model is null? When I use ajax data attribute like this = data: $(this).serialize(), , It works model is not null.

How can I post model, with additional data (locations,reports).

I hope I can explain. Thanks...

You dont need model:$(this).serialize() you can simply pass it as $(this).serialize(). I'm not expert with ajax but it worked for me — Karthik Chintala
– Karthik Chintala, Commented Jan 10, 2013 at 9:17
I think reports: getCheckedReports has to be reports: getCheckedReports() may be a typo — Karthik Chintala
– Karthik Chintala, Commented Jan 10, 2013 at 9:20
$(this).serialize() works alone. But with additional data, It does not work. for example { $(this).serialize(), locations: getCheckedLocation(), reports: getCheckedReports() } is not working. Because of syntax error. — AliRıza Adıyahşi
– AliRıza Adıyahşi, Commented Jan 10, 2013 at 9:24
What happens if you change the contentType to contentType:"application/json; charset=utf-8" — Tim B James
– Tim B James, Commented Jan 10, 2013 at 9:28
can you try like this $('this').serialize() + "&locations=" + getCheckedLocation() "&reports=" + getCheckedReports() — Karthik Chintala
– Karthik Chintala, Commented Jan 10, 2013 at 9:51

Karthik Chintala · Accepted Answer · 2013-01-10 10:28:25Z

22

Try like this:

 data:$('this').serialize() + "&locations=" + getCheckedLocation() "&reports=" + getCheckedReports()

It will work.

Hope it helps

answered Jan 10, 2013 at 10:28

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET MVC Jquery Ajax post form serialize?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related