На сервер в APIController приходят не верные данные в POST-запросе ajax

Пытаюсь отправить на сервер POST-запрос ajax для обновления списка:

Контроллер:

[Route("api/[controller]")]
    [ApiController]
    public class StreetsAPIController : ControllerBase
    {
        private readonly VoterCollectorContext _context;

        public StreetsAPIController(VoterCollectorContext context)
        {
            _context = context;
        }

        [HttpPost("search")]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult<IEnumerable<Street>>> GetStreets(CityDTO citySelected)
        {
            return await _context.Street.Where(s => s.CityId == citySelected.CityId).ToListAsync();
        }
    }

Модель dto принимаемого контроллером объекта:

public class CityDTO
    {
        public int CityId { get; set; }
        public string NameCity { get; set; }
    }

На странице представления добавил функцию генерации ключа и скрытое поле с ключом как описывалось здесь https://ru.stackoverflow.com/questions/803903/Проверить-antiforgerytoken-в-ajax-запросе:

@model voteCollector.Models.Friend

@{
    ViewData["Title"] = "Create";
}
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions {
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

<h1>Create</h1>

<h4>Friend</h4>
<hr />
<div class="row">
    <input type="hidden" id="RequestVerificationToken"
           name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="CityId" class="control-label"></label>
                <select id="CityId" asp-for="CityId" class="form-control" asp-items="ViewBag.CityId"></select>
            </div>
            <div class="form-group">
                <label asp-for="StreetId" class="control-label"></label>
                <select id="StreetId" asp-for="StreetId" class="form-control" asp-items="ViewBag.StreetId"></select>
            </div>
        </form>
    </div>
</div>

Написал js функцию, которая отправляет POST-запрос с данными и получающая данные в ответ:

@section Scripts {
    <script>
        $(function () {
            $("#CityId").change(function () {
                var formData = new FormData();
                var idCity = $("#CityId").val();
                formData.append('CityId', Number.parseInt($('#CityId').val()));
                $.ajax({
                    url: "http://localhost:18246/api/streetsAPI/search",
                    headers:
                    {
                        'Accept': 'application/json',
                        "RequestVerificationToken": $('#RequestVerificationToken').val()
                    },
                    type: 'POST',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(formData),
                    success: function (data) {
                        $('#StreetId').replaceWith(data);
                    },
                    error: function (result, status, er) {
                        alert("error: " + result + " status: " + status + " er:" + er);
                    }
                });
            });
        });
    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

Функция срабатывает, запрос до контроллера доходит, но поле "CityId" в объекте "CityDTO citySelected", который принимает контроллер всегда равно "0", всегда.

Проверял какое значение берется из объекта html $("#CityId").val() - оно не равно "0", но на сервер приходит "0".

Кто знает, подскажите где ошибка?