.NET 7 Razor Pages binding decimal Dutch Culture set posted model as null

Question

I have a website using .NET 7 and Razor pages. I have the following case. I have a table with multiple rows. And when a value(a decimal or DateTime) changes I need to post this to the backend.

The culture has been set to nl-NL. Therefore the values in the input look like this:

• Decimal: 2,01
• DateTime: 30-12-2022

On the Backend, I have a class containing a decimal and DateTime. And a Post method as followed

public async Task<JsonResult> OnPostUpdateAsync([FromBody] UpdateModel model)
{
    return new JsonResult(new { success=true});
}

public class UpdateModel
{
    public int Id { get; set; }
    public decimal Quantity { get; set; }
    public DateTime Date { get; set; }
    public bool? Approved { get; set; }
}

But when I use the following AJAX call to post the data, the model in the Post is null. When I do not publish the Date and Quantity then it works.

This is the AJAX call

$.ajax({
    type: "POST",
    url: "/organisation/orderproposal?handler=RandomNumber",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify({ id: 1, date: "29-08-1988", quantity: "2,01" }),
    headers: {
        RequestVerificationToken:
            $('input:hidden[name="__RequestVerificationToken"]').val()
    },
    success: function (result) {
        console.log(result);
    }
});

I do not understand why this fails when I have a Form everything with values like this work. But I do not see how I can use a form as I have unlimited rows in the table.

Answer 1

Thank you all for your input. It got me to my answer. I just to functions to get the number and date correctly.

I used this to get the decimal:

Globalize.parseNumber($(element).val());

And as I was using flatpickr for the date I used this code to get the correct format:

var d = flatpickr.parseDate($(element).val(), "d-m-Y");
return flatpickr.formatDate(d, "Y-m-d");

This did the trick :)