Sending data to MVC Action via jQuery ajax, parameter is null

Question

I've gone through several questions here related to this, and so far none of them have fixed my particular issue. I'm sending data related to the selected rows in a DataGrid to an action on the server using ajax. The JavaScript code looks like this:

function addSelected() {
        var grid = $("#optionsGrid").dxDataGrid("instance");
        var gridData = grid.getSelectedRowsData();

        $.ajax({
            type: "POST",
            url: "/api/Options/AddRange",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ data: gridData })
        });
    }

And the action on the server (for now):

[HttpPost("api/[controller]/[action]")] 
public async Task<IActionResult> AddRange(string data)
{

    return Ok();
}

I've inspected it in a browser and the gridData value is definitely populated with the data I want before being sent to the server, and the action is hit, but the 'data' parameter is always null. I also tried putting the [FromBody] attribute on the parameter but it didn't change it. No matter what I name the data or whether or not I stringify it the parameter is null.

Changing the datatype to dynamic didn't help either, it was still null. The data needing to be sent is also included in the Request body upon inspection.

Have you checked that the data is sent in the request? In other words, does gridData have a value? — Rory McCrossan
– Rory McCrossan, Commented Jul 5, 2017 at 15:23
I would suggest you to use Fiddler or any similar tool and see in action exactly what is being sent to the server — xrodas
– xrodas, Commented Jul 5, 2017 at 15:28
Possible duplicate of ASP.NET Core MVC : How to get raw JSON bound to a string without a type? — Igor
– Igor, Commented Jul 5, 2017 at 15:28
The data is encoded and included in the Request body when I inspected the request in the browser tools. — Valuator
– Valuator, Commented Jul 5, 2017 at 15:38
try adding an additional JSON.stringify to your gridData so you end up with JSON.stringify({ data: JSON.stringify(gridData) }) — Karthik Ganesan
– Karthik Ganesan, Commented Jul 5, 2017 at 15:47

Shahjahan · Accepted Answer · 2017-07-05 15:53:07Z

2

Try this way

function addSelected() {
    var grid = $("#optionsGrid").dxDataGrid("instance");
    var gridData = grid.getSelectedRowsData();

    $.ajax({
        type: "POST",
        url: "/api/Options/AddRange?data=" + JSON.stringify(gridData),
        contentType: "application/json; charset=utf-8"
    });
}

answered Jul 5, 2017 at 15:53

Shahjahan

5525 silver badges12 bronze badges

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

1 Comment

Valuator Over a year ago

This worked, had to drop the [FromBody] attribute from the parameter though.

Nate Anderson · Accepted Answer · 2017-07-05 15:53:09Z

0

The parameter name of data is in the stringify, you still need to specify that you are sending data as a parameter. Switch it like the below:

function addSelected() {
    var grid = $("#optionsGrid").dxDataGrid("instance");
    var gridData = grid.getSelectedRowsData();

    $.ajax({
        type: "POST",
        url: "/api/Options/AddRange",
        contentType: "application/json; charset=utf-8",
        data: { data: JSON.stringify(gridData) }
    });
}

answered Jul 5, 2017 at 15:53

Nate Anderson

6904 silver badges20 bronze badges

1 Comment

Valuator Over a year ago

Still null and I don't know why. It feel like this should be the correct way to do it.

Collectives™ on Stack Overflow

Sending data to MVC Action via jQuery ajax, parameter is null

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related