Ajax POST Request - 400 Bad Request - Incorrectly Formatted Syntax

Question

I am developing within a MVC Web Application, in which I am working towards creating functionality to delete data from a grid. In short I am currently rendering a Edit and Delete button for each row in the displayed table, from which clicking the Delete button invokes the delete function seen below. This function constructs and open a Bootstrap modal displaying a confirmation message and two buttons, one to confirm the delete process, the other to cancel and close the modal. I have then developed a click event on the delete button that in theory should complete a Ajax POST Request to the DeleteRecord Method of the DynamicGrid Controller. The problem concerns the response of the request which always seems to return 400 - Bad Request which I believe is down to incorrectly formatted syntax, but in my testing I have not been able to resolve this.

I have previously changed the method to GET rather than POST, which reach the target method correctly and returned a Status Code of 200, and in my research I have also noted the use of JSON.stringify() and the fact my controller method expects string/int parameters, whereas I believe I am sending a composite object. I have tried variations of the below code with no success.

Delete Function (Invoked From Grid):

function delete(id, entityObject, masterRecordEntityObject) {
    var dialogTitle;
    dialogTitle = "Delete Item?";

    var data = "<div class='modal-header'>";
    data += "<h4 class='modal-title'>" + dialogTitle + "</h4>";
    data += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
    data += "<span aria-hidden='true'>&times;</span>";
    data += "</button>";
    data += "</div>";
    data += "<div class='modal-body'>";
    data += "<p><i class='fas fa-exclamation-triangle' style='float:left; margin:4px 7px 20px 0;'></i> Please click delete to confirm deletion.</p>";
    data += "</div>";
    data += "<div class='modal-footer'>";
    data += "<a class='btn btn-danger' id='btnConfirmDelete'>Delete</a>";
    data += "<button class='btn btn-primary' type='button' data-dismiss='modal'>Cancel</button>";
    data += "</div>";

    $('#myModalContent').html(data);
    $('#myModal').modal('show');

}

Click Event:

$("#btnConfirmDelete").click(function () {
    $.ajax({
        url: '@Url.Action("DeleteRecord", "DynamicGrid")',
        type: 'POST',
        data: {
            "recordId": id,
            "entityObject": entityObject,
            "masterRecordEntityObject": masterRecordEntityObject
        },
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        async: true,
        error: function (xhr) {
            alert('Error: ' + xhr.statusText);
        },  
        success: function (result) {
            alert(result);
        },
    });
});

DeleteRecord Method (DynamicGridController):

[HttpPost]
public Task<IActionResult> DeleteRecord(int recordId, string entityObject, string masterRecordEntityObject)
{
    // Code
    return Content("OK");
}

Any help would be greatly appreciated.

Edit:

As per the request here is the console/network information from the Developer Console.

Network:

Console:

Answer 1

your ajax can't send any parameters to the action, it can cause 400 error.

Try to remove this code from your ajax

 contentType: 'application/json; charset=utf-8'