Asp.Net Core Model binding doesn't bind integer properties

Question

I'm hoping this is going to be a simple issue but I've tried lots of things and still get the same results. I'm porting a small Umbraco web site from .Net Framework 4.8 to .Net 6.0. The model binding works with Framework MVC because it's a bit more forgiving than .Net 6.0, I believe. The issue is that the string properties bind okay but integers do not bind and end up with the default zero values.

This is the jQuery code which sends the data:

function sendComment(commentObj) {
$.ajax({
    type: "POST",
    url: "/umbraco/surface/BlogSurface/HandleSubmit/",
    dataType: "json",
    contentType: "application/json",        
    data: JSON.stringify(commentObj),
    success: function (result) {

and this shows the data about to be sent (note the blogPostId property):

When the data is received and bound to the model at the server side, this is the result:

As you can see, the BlogPostId is now zero. The server endpoint being called is

[HttpPost]
//[ValidateUmbracoFormRouteString]
public async Task<IActionResult> HandleSubmit(CommentPostModel model)
{
    if (!ModelState.IsValid)
    {
        return RedirectToCurrentUmbracoPage();
    }

The model is this:

public class CommentPostModel
{
    [Required]
    public string AuthorName { get; set; }

    [Required]
    [EmailAddress]
    public string AuthorEmail { get; set; }

    [Required]
    [MaxLength(500)]
    public string Message { get; set; }

    public string AuthorUrl { get; set; }

    
    public int BlogPostId { get; set; }
    public int ParentId { get; set; }
    public int Level { get; set; }
}

I've tried adding the [BindRequired] attribute to the BlogPostId property in the model but the result is the same except that it says the model is not valid. I've tried adding the [FromBody] attribute to the server side endpoint but that then results in a 415 error because it insists on sending the data as multipart/form-data , even though the content-type is set to application/json.

Really at the point of just going with good 'ol .Net Framework

Update: To answer some of the questions posed: I tried adding the

[JsonPropertyName("BlogPostId")]

from System.Text.Json.Serialization to the BlogPostId property but this did not change the outcome.

Yes, the two screenshots above show what is being sent at the browser (using the Dev Tools) and the other is what was received at the server from the ajax call, obviously after model binding had taken place. Repeating this test and setting the other integer values at the browser (ie parentId and level) to 123 and 2 respectively, the result was all integers were zero on the server after model binding. Adding the [FromBody] to the method does trigger the form submit, although I'd like to prevent the form submit and just do it via ajax (I guess ensuring true is returned on the submit click?) Below shows the part of the view code for the form submit button:

<div class="col-md-6">
   <button class="btn btn-outline-primary btn-round mt-4" onclick="submitComment('CommentForm')">Post comment</button>
</div>

Answer 1

Try [JsonProperty] attribute on you public int BlogPostId { get;set; }

Example: https://www.newtonsoft.com/json/help/html/jsonpropertyname.htm