How to pass DateTime values to AJAX and then to a controller action?

Question

I have the following in a page:

@{
    var fromDate = DateTime.Today;
    var toDate = DateTime.Today.AddDays(1);
}

<button type="button" onclick="getData('@fromDate, @toDate')">Get data</button>

@section scripts
{
    <script>
        function getData(from, to) {
            $.ajax({
                url: '@Url.Action("GetData", "Customers")',
                data: {
                    fromDate: from,
                    toDate: to
                },
                contentType: "application/json",
                dataType: 'json',
                success: function (data) {
                    $("#dataId").html(data);
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            })
        }
    </script>
}

And the controller:

public IActionResult GetData(DateTime fromDate, DateTime toDate)
{
    return ViewComponent(nameof(GetCustomerData), new { fromDate, toDate });
}

But the parameters are not being passed to the controller. The values are MinDate.

What am I missing?

Answer 1

It seems that the syntax in onclick attribute is wrong. The following code should work:

<button type="button" onclick="getData('@fromDate', '@toDate')">Get data</button>