How to send a DataSourceRequest and serialized form data to MVC controller via AJAX call

Question

I am having an issue with posting form data and a DataSourceRequest to my controller method via Ajax. I am able to pass each object individually but when I try to pass both objects, my DataSourceRequest is always null.

Here is my js code:

function submitForm() {

    var grid = $('#denialGrid').data('kendoGrid');

    parameterMap = grid.dataSource.transport.parameterMap;

    var requestObject = parameterMap({
        sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group(), page: grid.dataSource.page(),
        pageSize: grid.dataSource.pageSize()
    });

    var formData = $('#BillingForm').serialize();
    $.ajax({
        type: "POST",
        url: '@Url.Action("SaveUpdate", "Home")',
        data: {requestObject,formData}, 
        success: alert(JSON.stringify(requestObject)),

    })
}

And here's my controller method

[HttpPost]
    public ActionResult SaveUpdate([DataSourceRequest] DataSourceRequest request, UpdateViewModel vm)
    {

        return null;
    }

I've tried:

data: {requestObject,formData},
data: [requestObject,formData],
data: requestObject, formData,
data: (requestObject,formData),
data: {request: requestObject, vm: formData},

Any help would be greatly appreciated

Duplicate of [this](http://stackoverflow.com/questions/6085649/ajax-multiple-data) SO question. — Jeroen Heier, May 11 '17 at 20:15
I think the issue I'm having is something specific to the DataSourceRequest data type, I've tried all of the approaches on this thread — blkgrlcto, May 11 '17 at 20:32

Kai · Answer 1 · 2017-08-23T22:58:39.970

You should include formData inside requestObject, and only pass requestObject

  var requestObject = parameterMap({
        sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group(), page: grid.dataSource.page(),
        pageSize: grid.dataSource.pageSize(), formData: $('#BillingForm').serialize()
    });

$.ajax({
    type: "POST",
    url: '@Url.Action("SaveUpdate", "Home")',
    data: requestObject, 
    success: alert(JSON.stringify(requestObject)),

})

And I think serialize() will only return string. You need to convert it to object. Or you can try this

[HttpPost]
    public ActionResult SaveUpdate([DataSourceRequest] DataSourceRequest request, string formData)
    {

        return null;
    }

How to send a DataSourceRequest and serialized form data to MVC controller via AJAX call

1 Answers1