Razor page POST handler not receiving JSON data from jQuery AJAX

Question

I'm sending a POST request to a Razor page handler using jQuery .ajax() . The network tab shows that this data is being sent as expected:

My breakpoints confirm that I'm hitting the handler, though the invitationId is not coming over (or at the very least, not deserializing correctly):

The JavaScript is as follows:

class GenericService {
  constructor(controller) {
    this.controller = controller;
  }

  async post(data, handler = "") {
    return await $.ajax({
      type: "post",
      beforeSend: function (xhr) {
        xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
      },
      data: JSON.stringify(data),
      url: `/${this.controller}${handler}`,
      contentType: "application/json",
      dataType: "json"
    });
  }
}

(async () => {
  const _ajax = new GenericService("Admin/Index");
  await _ajax.post({ invitationId: 1 }, "Reset");
})();

I imagine that I'm misunderstanding the implicit deserialization, but examples I've seen elsewhere on the internet seem to indicate that sending a JSON serialized object should be fine.

This is using .NET Core 3.0.

Can anyone explain what might be my issue here?

Answer 1

As expected, I had some wires crossed as it relates to the deserialization.

If I send the data as a plain object without serialization (and remove the corresponding json type declarations from the .ajax() options), the invitationId comes across.

return await $.ajax({
  type: "post",
  beforeSend: function (xhr) {
    xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
  },
  data: data,                            //Remove JSON.stringify(...)
  url: `/${this.controller}${handler}`
  //contentType: "application/json",       Remove
  //dataType: "json"                       Remove
});