Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax

Question

I m trying to pass an array of objects into an MVC controller method using jQuery s ajax   function  When I get into the PassThing   C  controller method  the argument  things  is null  I ve tried this using a type of List for the argument  but that doesn t work either  What am I doing wrong    lt script type  text javascript  gt        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                       lt  script gt   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

User · Answer

I am using a  Net Core 2 1 Web Application and could not get a single answer here to work  I either got a blank parameter  if the method was called at all  or a 500 server error  I started playing with every possible combination of answers and finally got a working result   In my case the solution was as follows   Script - stringify the original array  without using a named property         ajax           type   POST           contentType   application json  charset utf-8           url  mycontrolleraction          data  JSON stringify things            And in the controller method  use  FromBody        HttpPost      public IActionResult NewBranch  FromBody IEnumerable lt Thing gt  things                return Ok            Failures include    Naming the content  data    content  nodes       Server error 500 Not having the contentType   Server error 500   Notes   dataType is not needed  despite what some answers say  as that is used for the response decoding  so not relevant to the request examples here   List lt Thing gt  also works in the controller method

User · Answer

Wrapping your list of objects with another object containing a property that matches the name of the parameter which is expected by the MVC controller works  The important bit being the wrapper around the object list     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 lt Employee gt  EmployeeList        var emps   EmployeeList     public class Employee       public int Id   get  set        public string Name   get  set

User · Answer

This is how it works fine to me   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    Controller action       data     things   things        success  function                  result   html   PassThings    successfully called                error  function  response                result   html response               With  ContentType  in capital  C

User · Answer

If you are using ASP NET Web API then you should just pass  data  JSON stringify things    And your controller should look something like this   public class PassThingsController   ApiController       public HttpResponseMessage Post List lt Thing gt  things                   code

User · Answer

Using NickW s suggestion  I was able to get this working using things   JSON stringify    things   things     Here is the complete code     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 lt Thing gt  things        var t   things     public class Thing       public int Id   get  set        public string Color   get  set        There are two things I learned from this    The contentType and dataType settings are absolutely necessary in the ajax   function  It won t work if they are missing  I found this out after much trial and error   To pass in an array of objects to an MVC controller method  simply use the JSON stringify    things   things    format    I hope this helps someone else

User · Answer

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

User · Answer

Couldn t you just do this    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                 and mark your action with    HttpPost  public void PassThings IEnumerable lt Thing gt  things           do stuff with things here

User · Answer

This is working code for your query you can use it    Controler       HttpPost      public ActionResult save List lt ListName gt  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

User · Answer

Modification from  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 lt Thing gt  datav                     now  datav is having all your values

User · Answer

I have perfect answer for all this   I tried so many solution not able to get finally myself able to manage    please find  detail answer below             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 lt Thing gt  datav             now  datav is having all your values

User · Answer

What I did when trying to send some data from several selected rows in DataTable to MVC action   HTML  At the beginning of a page    Html AntiForgeryToken      just a row is shown  bind from model      foreach  var item in Model ListOrderLines                                         lt tr data-orderid   item OrderId  data-orderlineid   item OrderLineId  data-iscustom   item IsCustom  gt                           lt td gt  item OrderId lt  td gt                           lt td gt  item OrderDate lt  td gt                           lt td gt  item RequestedDeliveryDate lt  td gt                           lt td gt  item ProductName lt  td gt                           lt td gt  item Ident lt  td gt                           lt td gt  item CompanyName lt  td gt                           lt td gt  item DepartmentName lt  td gt                           lt td gt  item ProdAlias lt  td gt                           lt td gt  item ProducerName lt  td gt                           lt td gt  item ProductionInfo lt  td gt                       lt  tr gt                      Button which starts the JavaScript function     lt button class  btn waves-effect waves-light btn-success  onclick  ProcessMultipleRows     gt Start lt  button gt    JavaScript function     function ProcessMultipleRows                 if      dataTables scrollBody gt tr selected   length  gt  0                    var list                           dataTables scrollBody gt tr selected   each function  e                        var element     this                       var orderid   element data  orderid                        var iscustom   element data  iscustom                        var orderlineid   element data  orderlineid                        var folderPath                           var fileName                            list push   orderId  orderid  isCustomOrderLine  iscustom  orderLineId  orderlineid  folderPath  folderPath  fileName   fileName                                           ajax                       url    Url Action  StartWorkflow   OrderLines                         type   post      lt ------------- this is important                     data    model  list       lt ------------- this is important                     beforeSend  function  xhr      lt --- This is important                       xhr setRequestHeader  RequestVerificationToken                            input hidden name    RequestVerificationToken     val                           showPreloader                                               success  function  data                                                error  function  XMLHttpRequest  textStatus  errorThrown                                                 complete  function                               hidePreloader                                                                        MVC action    HttpPost   ValidateAntiForgeryToken     lt --- This is important public async Task lt IActionResult gt  StartWorkflow IEnumerable lt WorkflowModel gt  model    And MODEL in C    public class WorkflowModel            public int OrderId   get  set            public int OrderLineId   get  set            public bool IsCustomOrderLine   get  set            public string FolderPath   get  set            public string FileName   get  set         CONCLUSION   The reason for ERROR    Failed to load resource  the server responded with a status of 400  Bad Request     Is attribute   ValidateAntiForgeryToken  for the MVC action StartWorkflow  Solution in Ajax call     beforeSend  function  xhr      lt --- This is important                       xhr setRequestHeader  RequestVerificationToken                            input hidden name    RequestVerificationToken     val                              To send List of objects you need to form data like in example  populating list object  and   data    model  list     type   post

User · Answer

The only way I could get this to work is to pass the JSON as a string and then deserialise it using JavaScriptSerializer Deserialize lt T gt  string input   which is pretty strange if that s the default deserializer for MVC 4   My model has nested lists of objects and the best I could get using JSON data is the uppermost list to have the correct number of items in it  but all the fields in the items were null   This kind of thing should not be so hard         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 lt Valuation gt  json

User · Answer

Formatting your data that may be the problem  Try either of these   data      things      JSON stringify things           Or  from How can I post an array of string to ASP NET MVC Controller without a form    var postData     things  things        data   postData

[c#] Passing A List Of Objects Into An MVC Controller Method Using jQuery Ajax

Script - stringify the original array (without using a named property)

And in the controller method, use [FromBody]

Failures include:

Notes

Examples related to c#

Examples related to asp.net-mvc

Examples related to jquery