I am listing the cities of the selected country and districts of the selected city in select list item in my view as :

<select class="form-control mb-2" id="countrySelect">
      <option value="">--Choose a country--</option>
      @foreach (CountryDto country in ViewBag.Countries)
      {
          <option value="@country.Id">@country.Name</option>
      }
</select>
<select class="form-control mb-2" id="citySelect"></select>
<select class="form-control mb-2" id="@nameof(Model.DistrictId)"></select>

The cities and districts are coming from javascript code as :

    $(document).ready(function () {
    
        $('#countrySelect').change(function (event) {
            var countryId = $(this).val();
            LoadCities(countryId);
        });
    
        $('#citySelect').change(function (event) {
            var cityId = $(this).val();
            LoadDistricts(cityId);
        });
    
        $('#DistrictId').change(function (event) {
            var disctId = $(this).val();
            $('input[name="districtId"]').val(disctId);
        });
    });
    
    function LoadCities(countryId) {
        // For City
        $.ajax({
            url: `/Customer/GetCities?countryId=${countryId}`,
            type: "GET",
            dataType: "json",
            success: function (data) {
                
                for (var city of data) {
                    $('#citySelect').append(`<option value="${city.id}">${city.cityName}</option>`);
                }
            },
            error: function () {
                
            },
            complete: function () {
                
            }
        });
    }

function LoadDistricts(cityId) {
    // For District
    $.ajax({
        url: `/Customer/GetDistricts?cityId=${cityId}`,
        type: "GET",
        dataType: "json",
        success: function (data) {
            for (var district of data) {
                $('#DistrictId').append(`<option value="${district.id}">${district.districtName}</option>`)
            }
            
        },
        error: function () {
            
        },
        complete: function () {
            
        }
    });
}

In Customer Controller : Get and AddOrUpdate Methods

[HttpGet("Customer/{id}")] 
        public IActionResult Get(int id)
        {
            var customer = _customerServices.GetCustomer(id) ?? new CustomerDto();
            ViewBag.Countries = _customerServices.GetCountries();
            ViewBag.Sectors = _customerServices.GetSectors();
            return View(customer);
        }

        [HttpPost("Customer/AddOrUpdate")] 
        public IActionResult AddOrUpdate(CustomerDto customer)
        {
            _customerServices.AddOrUpdate(customer);
            return View($"Customer");
        }

In CustomerServices I wrote this methods:

public List<CityDto> GetCities(int countryId)
        {
            var cities = Context.Cities.Where(w => w.CountryId == countryId).ToList();
            return cities.ToMapList<City, CityDto>();
        }

        public List<DistrictDto> GetDistricts(int cityId)
        {
            var districts = Context.Districts.Where(w => w.CityId == cityId).ToList();
            return districts.ToMapList<District, DistrictDto>();
        }

        public List<CountryDto> GetCountries()
        {
            var countries = Context.Countries.ToList();
            return countries.ToMapList<Country, CountryDto>();
        }

When attempting to add a new customer CustomerDto is getting all information except districtid coming from the district select item Value is coming NULL

Would you mind please help ?