11 Вопрос: Передача списка объектов в метод контроллера MVC с использованием jQuery Ajax

вопрос создан в Tue, Nov 6, 2012 12:00 AM

Я пытаюсь передать массив объектов в метод контроллера MVC, используя Функция jQuery ajax (). Когда я попадаю в метод контроллера PassThing () C #, аргумент "вещи" является нулевым. Я пробовал это, используя тип списка для аргумент, но это тоже не работает. Что я делаю не так?

<script type="text/javascript">
    $(document).ready(function () {
        var things = [
            { id: 1, color: 'yellow' },
            { id: 2, color: 'blue' },
            { id: 3, color: 'red' }
        ];

        $.ajax({
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            url: '/Xhr/ThingController/PassThing',
            data: JSON.stringify(things)
        });
    });
</script>

public class ThingController : Controller
{
    public void PassThing(Thing[] things)
    {
        // do stuff with things here...
    }

    public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }
}
    
104
  1. Вы можете попробовать JavaScriptSerializer.Deserialize Method (String, Type)
    2012-11-06 00: 21: 18Z
  2. Ваши данные - это строка, но ваш метод принимает массив. Измените свой метод так, чтобы он принимал строку, а затем десериализуйте ее в методе.
    2012-11-06 00: 36: 00Z
  3. Ваш код правильный. Я протестировал его, и он работал с использованием MVC 4. Пожалуйста, предоставьте больше данных, чтобы понять это.
    2012-11-06 01: 47: 10Z
  4. Это отличный материал, но что, если вам нужен не просто список строк для передачи, а нужно включить отдельный идентификатор, связанный со списком строк? Так, например, идентификатор группы, список групп под идентификатором группы.
    2017-08-16 15: 26: 26Z
11 ответов                              11                         

Используя предложение NickW, я смог заставить его работать, используя things = JSON.stringify({ 'things': things });. Вот полный код.

$(document).ready(function () {
    var things = [
        { id: 1, color: 'yellow' },
        { id: 2, color: 'blue' },
        { id: 3, color: 'red' }
    ];      

    things = JSON.stringify({ 'things': things });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Home/PassThings',
        data: things,
        success: function () {          
            $('#result').html('"PassThings()" successfully called.');
        },
        failure: function (response) {          
            $('#result').html(response);
        }
    }); 
});


public void PassThings(List<Thing> things)
{
    var t = things;
}

public class Thing
{
    public int Id { get; set; }
    public string Color { get; set; }
}

Из этого я узнал две вещи:

  1. Параметры contentType и dataType абсолютно необходимы в функции ajax (). Это не будет работать, если они отсутствуют. Я узнал об этом после долгих проб и ошибок.

  2. Чтобы передать массив объектов методу контроллера MVC, просто используйте формат JSON.stringify ({'things': things}).

Надеюсь, это поможет кому-то еще!

    
165
2018-02-21 10: 57: 39Z
  1. У меня была та же проблема, и добавление contentType устранило ее. Спасибо!
    2013-03-19 14: 26: 18Z
  2. Обратите внимание на две вещи: JSON.stringify и указание 'contentType'.
    2014-11-07 05: 40: 11Z
  3. Crud. Все еще не работает для меня. URL моего запроса - http://localhost:52459/Sales/completeSale?itemsInCart=[{"ItemId":1,"Quantity":"1","Price":3.5}], а Sales.completeSale - public ActionResult completeSale(ItemInCart[] itemsInCart), аннотированный как HttpGet.
    2015-06-29 17: 09: 19Z
  4. по какой-либо причине мне пришлось просто использовать data: JSON.stringify(things),
    2015-08-05 02: 33: 25Z
  5. dataType не требуется. Если оно опущено, функция ajax будет работать на основе возвращаемых данных
    2017-08-04 08: 54: 25Z

Не могли бы вы просто сделать это?

var things = [
    { id: 1, color: 'yellow' },
    { id: 2, color: 'blue' },
    { id: 3, color: 'red' }
];
$.post('@Url.Action("PassThings")', { things: things },
   function () {
        $('#result').html('"PassThings()" successfully called.');
   });

... и пометьте свое действие с помощью

[HttpPost]
public void PassThings(IEnumerable<Thing> things)
{
    // do stuff with things here...
}
    
28
2015-03-26 16: 28: 40Z
  1. Это должен быть лучший ответ. JSON.stringify не должен использоваться в этом случае
    2016-04-25 09: 52: 10Z
  2. Это не работает для меня .. Я использую [HttpPost] public int SaveResults (List < ShortDetail > model) {} и $.post ("@ Url. Действие ("SaveResults", "Карты") ", {модель: dataItems}, функция (результат) {});
    2017-07-07 05: 46: 53Z
  3. Это сработало для меня. Абсолютно лучший ответ. Я не знаю, почему реализация Halcyon не сработала. Функция PassThings была вызвана, но входная переменная 'things' была пустой, даже если она была заполнена в javascript непосредственно перед вызовом.
    2017-09-03 22: 46: 06Z
  4. Только у меня это сработало. Самый простой ответ.
    2018-11-30 15: 19: 26Z

Форматирование ваших данных, которые могут быть проблемой. Попробуйте любой из них:

data: '{ "things":' + JSON.stringify(things) + '}',

Или (из Как я могу разместить массив строк в ASP.NET MVC Controller без формы? )

var postData = { things: things };
...
data = postData
    
12
2017-05-23 11: 47: 29Z
  1. Ваш код близок, но не работает. Я смог заставить работать код благодаря вашему предложению. Смотрите мой ответ выше.
    2012-11-06 16: 39: 39Z

Я использую веб-приложение .Net Core 2.1 и не смог получить ни одного ответа. Я либо получил пустой параметр (если метод был вызван вообще), либо ошибка сервера 500. Я начал играть со всеми возможными комбинациями ответов и, наконец, получил рабочий результат.

В моем случае решение было следующим:

Скрипт - приведение в соответствие исходного массива (без использования именованного свойства)

    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: mycontrolleraction,
        data: JSON.stringify(things)
    });

А в методе контроллера используйте [FromBody]

    [HttpPost]
    public IActionResult NewBranch([FromBody]IEnumerable<Thing> things)
    {
        return Ok();
    }

К ошибкам относятся:

  • Наименование контента

    данные: {содержимое: узлы}, //ошибка сервера 500

  • Отсутствует contentType = ошибка сервера 500

Примечания

  • dataType не требуется, несмотря на то, что говорят некоторые ответы, так как он используется для декодирования response (поэтому не относится к примерам request здесь).
  • List<Thing> также работает в методе контроллера
9
2018-06-10 19: 45: 11Z

Единственный способ заставить это работать - передать JSON в виде строки и затем десериализовать его, используя JavaScriptSerializer.Deserialize<T>(string input), что довольно странно, если это десериализатор по умолчанию для MVC 4.

Моя модель имеет вложенные списки объектов, и лучшее, что я мог получить, используя данные JSON, - это самый верхний список, в котором содержится правильное количество элементов, но все поля в элементах были нулевыми.

Такие вещи не должны быть такими сложными.

    $.ajax({
        type: 'POST',
        url: '/Agri/Map/SaveSelfValuation',
        data: { json: JSON.stringify(model) },
        dataType: 'text',
        success: function (data) {

    [HttpPost]
    public JsonResult DoSomething(string json)
    {
        var model = new JavaScriptSerializer().Deserialize<Valuation>(json);
    
7
2017-07-19 05: 14: 04Z
  1. Чтобы это работало, внимательно следите за форматом вызова Ajax.
    2018-07-24 13: 10: 30Z

У меня есть идеальный ответ на все это: я пробовал так много решений, которые не смогли наконец-то справиться, пожалуйста, найдите подробный ответ ниже:

       $.ajax({
            traditional: true,
            url: "/Conroller/MethodTest",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify( 
               [
                { id: 1, color: 'yellow' },
                { id: 2, color: 'blue' },
                { id: 3, color: 'red' }
                ]),
            success: function (data) {
                $scope.DisplayError(data.requestStatus);
            }
        });

Controler

public class Thing
{
    public int id { get; set; }
    public string color { get; set; }
}

public JsonResult MethodTest(IEnumerable<Thing> datav)
    {
   //now  datav is having all your values
  }
    
6
2015-09-07 14: 45: 52Z

Это рабочий код для вашего запроса, вы можете использовать его.

Controler

    [HttpPost]
    public ActionResult save(List<ListName> listObject)
    {
    //operation return
    Json(new { istObject }, JsonRequestBehavior.AllowGet); }
    }

Javascript

  $("#btnSubmit").click(function () {
    var myColumnDefs = [];
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            myColumnDefs.push({ 'Status': true, 'ID': $(this).data('id') })
        } else {
            myColumnDefs.push({ 'Status': false, 'ID': $(this).data('id') })
        }
    });
   var data1 = { 'listObject': myColumnDefs};
   var data = JSON.stringify(data1)
   $.ajax({
   type: 'post',
   url: '/Controller/action',
   data:data ,
   contentType: 'application/json; charset=utf-8',
   success: function (response) {
    //do your actions
   },
   error: function (response) {
    alert("error occured");
   }
   });
    
4
2017-03-03 04: 00: 23Z
     var List = @Html.Raw(Json.Encode(Model));
$.ajax({
    type: 'post',
    url: '/Controller/action',
    data:JSON.stringify({ 'item': List}),
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        //do your actions
    },
    error: function (response) {
        alert("error occured");
    }
});
    
1
2017-01-04 09: 32: 31Z
  1. Попробуйте этот код для передачи списка объектов модели с использованием ajax. Модель представляет собой IList < Model &gt ;. Используйте IList < Model > в контроллере, чтобы получить значения.
    2017-01-16 08: 00: 07Z

Если вы используете ASP.NET Web API, вам нужно просто передать data: JSON.stringify(things).

И ваш контроллер должен выглядеть примерно так:

public class PassThingsController : ApiController
{
    public HttpResponseMessage Post(List<Thing> things)
    {
        // code
    }
}
    
0
2015-12-25 10: 07: 51Z

Модификация от @veeresh i

 var data=[

                        { id: 1, color: 'yellow' },
                        { id: 2, color: 'blue' },
                        { id: 3, color: 'red' }
                        ]; //parameter
        var para={};
        para.datav=data;   //datav from View


        $.ajax({
                    traditional: true,
                    url: "/Conroller/MethodTest",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data:para,
                    success: function (data) {
                        $scope.DisplayError(data.requestStatus);
                    }
                });

In MVC



public class Thing
    {
        public int id { get; set; }
        public string color { get; set; }
    }

    public JsonResult MethodTest(IEnumerable<Thing> datav)
        {
       //now  datav is having all your values
      }
    
0
2017-04-24 07: 56: 11Z

Обертывание списка объектов другим объектом, содержащим свойство, которое соответствует имени параметра, ожидаемого контроллером MVC, работает. Важным моментом является обертка вокруг списка объектов.

$(document).ready(function () {
    var employeeList = [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'John' },
        { id: 3, name: 'Tom' }
    ];      

    var Employees = {
      EmployeeList: employeeList
    }

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '/Employees/Process',
        data: Employees,
        success: function () {          
            $('#InfoPanel').html('It worked!');
        },
        failure: function (response) {          
            $('#InfoPanel').html(response);
        }
    }); 
});


public void Process(List<Employee> EmployeeList)
{
    var emps = EmployeeList;
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}
    
0
2017-09-21 22: 06: 21Z
источник размещен Вот