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.

Answer 1

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"
    });
}