Sending data via ajax gives null value in Post method

Question

I am trying to use ajax to send data on my .net Core Razor Page Model with Ajax

This is my Razor Page Code:

    $(function () {
        $('#placeRequest').on('click', function () {
            
            $.ajax({
                type: "POST",
                url: "/Index?handler=PlaceRequest",
                data: $('#select').val(),
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                success: function () {
                    alert('Posted using jQuery')
                }
            });
        });
    });


<form method="post">
    <select id="select" class="form-control"></select>

      <div class="form-group button-position col-md4">
          <input type="submit" id="placeRequest" name="placeRequest" value="Place Request" asp-page-handler="PlaceRequest" class="btn btn-primary" />
      </div>
</form>

In my Page Model

public IActionResult OnPostPlaceRequest(string myData)
{
   //here myData is null
}

The problem is that myData in my Post function is null. Am I missing something in the ajax script function?

Answer 1

data:{myData:$('#select').val()},