Отправленная модель на контроллер через AJAX пуста

Question

Я пытаюсь отправить только 2 идентификатора на контроллер с помощью Ajax, как показано ниже, но модель вообще не указана.

Моя модель просмотра настолько проста, как показано ниже:

public class CityAreaBindingModel
{
    public int CityID { get; set; }
    public int AreaID { get; set; }
}

Представление: два раскрывающихся списка, которые помогают выбрать город и район

        <select class="form-control" id="CityID" name="CityID">
            @{
                foreach (var city in ViewData["Cities"] as List<SamsungTools.Models.City>)
                {
                    <option value="@city.ID" @(city.ID == 1 ? "selected" : "")>@city.Title</option>
                }
            }
        </select>
        <select class="form-control" id="AreaID" name="AreaID">
            @{
                foreach (var area in ViewData["Areas"] as List<SamsungTools.Models.Area>)
                {
                    <option value="@area.ID" @(area.ID == 1 ? "selected" : "")>@area.Title</option>
                }
            }
        </select>

Ajax: использование formData с двумя выбранными идентификаторами из представления

var cId = $('#CityID').val();
var aId = $('#AreaID').val();
var data = new FormData();
data.append("CityID", cId);
data.append("AreaID", aId);

$.ajax({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    type: 'POST',
    url: '/api/GetData/GetSaleCentersByLocation',
    data: data,
    processData: false,

И в контроллере просто передается модель представленияиз ajax:

[HttpPost]
public JsonResult GetSaleCentersByLocation(CityAreaBindingModel model)
{
    GeneralStore gs = new GeneralStore();
    var saleCentersByCity = gs.GetSaleCentersByCity(model.CityID);
    var result = new JsonResult();
    result.Data = saleCentersByCity;
    result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

    return result;
}

Проблема в том, что модель вообще отсутствует в контроллере.Я изменил поля заголовка в Ajax, но любым другим способом я получу ошибку 415, Недопустимый вызов, ошибка сервера 500, ... С указанными выше параметрами Ajax данные будут отправляться на контроллер, но модель равна нулю.

Любойрешение?

Answer 1

Я думаю, что проблема связана с вашей структурой данных в коде js, попробуйте следующий код:

var cId = $('#CityID').val();
var aId = $('#AreaID').val();

var jsonObject = {"CityID": cId , "AreaID": aId };
var data = JSON.stringify(jsonObject);

$.ajax({
    'Content-Type': 'application/json'
    type: 'POST',
    url: '/api/GetData/GetSaleCentersByLocation',
    contentType: "application/json",
    data: data
    success: function (result) {
     console.log(result);
    }
});

Answer 2

В вашем коде возникла проблема: неверный формат вызова ajax, данные не были преобразованы в строку и, возможно, неправильная маршрутизация URL.Вот код для вашего требования.Я смоделировал некоторые функции

 public class CityAreaBindingModel
    {
        public int CityID { get; set; }
        public int AreaID { get; set; }
    }

    public class City
    {
        public int ID { get; set; }
        public string Title { get; set; }
    }

    public class Area
    {
        public int ID { get; set; }
        public string Title { get; set; }
    }

    public class SaleController : Controller
    {
        public ActionResult GetSaleCentersByLocation()
        {
            ViewData["Cities"] = new List<City>
            {
                new City {ID = 1, Title = "Hanoi"},
                new City {ID = 2, Title = "SaiGon"}
            };

            ViewData["Areas"] = new List<Area>
            {
                new Area {ID = 1, Title = "Area1"},
                new Area {ID = 2, Title = "Area2"}
            };
            return View();
        }


        [HttpPost]
        public JsonResult GetSaleCentersByLocation(CityAreaBindingModel model)
        {
            GeneralStore gs = new GeneralStore();
            var saleCentersByCity = gs.GetSaleCentersByCity(model.CityID);
            var result = new JsonResult();
            result.Data = saleCentersByCity;
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return result;
        }
    }

    public class GeneralStore
    {
        public object GetSaleCentersByCity(int modelCityId)
        {
            return new { Id = 1, Name = "Test"};
        }
    }

Просмотр для контроллера GetSaleCentersByLocation.cshtml

@using WebApplication1.Controllers

<select class="form-control" id="CityID" name="CityID">
    @{
        foreach (var city in ViewData["Cities"] as List<City>)
        {
            <option value="@city.ID" @(city.ID == 1 ? "selected" : "")>@city.Title</option>
        }
    }
</select>
<select class="form-control" id="AreaID" name="AreaID">
    @{
        foreach (var area in ViewData["Areas"] as List<Area>)
        {
            <option value="@area.ID" @(area.ID == 1 ? "selected" : "")>@area.Title</option>
        }
    }


</select>

<button onclick="test();">Post data</button>
<script>
    function  test() {
        var cId = $('#CityID').val();
        var aId = $('#AreaID').val();
        var data = {
            CityID: cId,
            AreaID : aId
        };


        $.ajax({
            type: 'POST',
            contentType: "application/json",
            dataType: 'JSON',
            url: 'GetSaleCentersByLocation',
            data: JSON.stringify(data),
            processData: false,
            success: function (result) {
                alert(data);
            }
        });

    }

</script>