ASP.NET Core Razor Pages Ajax post is null using FromBody

Question

I'm developing an ASP.NET (6.0) Razor Pages application. One of the pages needs to post data using AJAX, however, the post is always null.

I have tried to use the previous related questions to this on Stack Overflow, but my problem still persists.

This is my Razor Page (cshtml)

@Html.AntiForgeryToken()

<script type="text/javascript">
$(function () {

$('button').on('click', function(){

const token = $('[name="__RequestVerificationToken"]').val();
var data = { "MyVar": "Simon", "MyNum": 21 };

$.ajax({
    url: '?handler=SaveOrder',
    method: "post",
    contentType: "application/json",
    dataType: 'application/json; charset=utf-8',
    headers: {
        "RequestVerificationToken" : token
    },
    data: JSON.stringify(data)
});
</script>

This is my PageModel for the same Razor Page

As you can see, the Ajax Post is working in that it hits the appropriate handler method, but no data is posted.

Can anyone help, please?

Answer 1

^{Converting a comment (which OP verified as the solution in a follow-up comment) to an answer:}

Just noticed: The properties of SectionInputModel must be public to support model binding.
– Poul Bak  Oct 21, 2022 at 12:37