AJAX Post with multiple parameter to Razor Pages

Question

I am trying to do an ajax post request with multiple parameters. The method is called on server side but the parameters returns null. What am I doing wrong here? I've tried with and without JSON.stringify.

.cs file:

public async Task<IActionResult> OnPostGenerate(string fname, string lname)
{
    return new JsonResult(fname + lname);
}

AJAX script:

$.ajax({
    type: "POST",
    url: "Index?handler=Generate",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    headers: {
        RequestVerificationToken:
            $('input:hidden[name="__RequestVerificationToken"]').val()
    },
    data: JSON.stringify({
        fname: "testFirstname",
        lname: "testLastname"
    }),
    success: function (data) {
        alert(data);
    }
});

Answer 1

Try to change

data: JSON.stringify({
        fname: "testFirstname",
        lname: "testLastname"
    }),

to

data: {
        "fname": "testFirstname",
        "lname": "testLastname"
    },

and remove

contentType: "application/json; charset=utf-8",