pass jquery array of objects to mvc action which accepts a list object

Question

I have a form in my view which has only one textarea input initially and user can add more textarea inputs if he wants with jquery. My problem is related to second case. After submitting the form i am getting an array of objects in console but when i am passing this array to mvc action in my controller it is coming to be null. I have tried these solution but did not succeed:

Send array of Objects to MVC Controller

POST a list of objects to MVC 5 Controller

here is my code:-

jquery code:

$('body').on('submit', '#addTextForm', function () {
   console.log($(this));
   var frmData = $(this).serializeArray();
   console.log(frmData);
   $.ajax({
       type: 'post',
       url: '/Dashboard/UploadText',
       contentType: 'application/json',
       data: JSON.stringify({ obj: frmData }),
       success: function (data) {
          console.log(data);
       },
       error: function (data) {
          console.log(data);
       }
   });
  return false;
});

MVC action:

[HttpPost]
public string UploadText(SliderTextList obj)
{
  return "success";      
}

my object class:

public class SliderText
{
  [JsonProperty("Id")]
  public int Id { get; set; }

  [JsonProperty("SlideName")]
  public string SlideName { get; set; }

  [JsonProperty("Content")]
  public string Content { get; set; }

}
public class SliderTextList
{
  public List<SliderText> AllTexts { get; set; }
}

I have to store the Content in json file with Id and SlideName, so i think i have to pass a list object in mvc action Uploadtext which is coming out to be null always. Please help.

If you have generated the view correctly (i.e. the names or your dynamically created objects have the correct indexers), then all you need is `data: $('#addTextForm').serialize()` and remove `contentType: 'application/json',`. — , Feb 17 '16 at 06:16
Then you have not generated the form controls correctly. Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some options for dynamically adding collection items. You have not shown your code so impossible to know what your doing wrong. — , Feb 17 '16 at 07:29
The elements you creating should have `name="AllTexts[0].SlideName"`, `name="AllTexts[1].SlideName"` etc. — , Feb 17 '16 at 07:31
@StephenMuecke which code you want? Also in my form, i have more than one textareas with value of name attribute is `Content`. The other two properties I want to generate them in my action method — Amit Kaushal, Feb 17 '16 at 07:36
You cannot have multiple textareas with `name="Content"` - the `name` attributes must relate to the model your posting to so they need to be `name="AllTexts[0].Content"`, `name="AllTexts[1].Content"` etc. Read the links I gave you. — , Feb 17 '16 at 07:39
But if all your editing is the `Content` property, then they could be all `name="Content"` but only if you change the method signature to `[HttpPost]public ActionResultUploadText(IEnumerable content)` and then you build your collection of `SliderText` objects based on the the values in the array. — , Feb 17 '16 at 07:42

score 1 · Answer 1 · answered Feb 17 '16 at 10:48

$(document).ready(function(){
   $('body').on('submit', '#addTextForm', function () {
   var listData=[];
   var oInputs = new Array();
   oInputs = document.getElementsByTag('input' );
   var k=1;
   for ( i = 0; i < oInputs.length; i++ )
   {  
       if ( oInputs[i].type == 'textarea' )
       {
          var obj=new Object();
          obj.Id=k;
          obj.SlideName=oInputs[i].Name;
          obj.Content=oInputs[i].Value;
          K=parseInt(k)+1;
          listData.push(obj);
       }
   }
   $.ajax({
           type: 'post',
           url: '/Dashboard/UploadText',
           contentType: 'application/json',
           data: JSON.stringify(listData),
           success: function (data) {
                       console.log(data);
           },
           error: function (data) {
           console.log(data);
          }
     });
    return false;
   });
});

rrk · Answer 2 · 2016-02-17T06:23:32.273

0

Since the sever side expects a string as argument obj as a query string I think this is what you need.

data: { 
    obj: JSON.stringify(frmData) 
},

as an alternative using as Stephen suggested on the comments

data: { 
    obj: $('#addTextForm').serialize()
},

edited Feb 17 '16 at 06:23

answered Feb 17 '16 at 06:12

rrk

15,677
4
29
45

No, that was not my suggestion - its just `data: $('#addTextForm').serialize(),` which will work if OP has generated the form controls correctly - ie. `name=[0].SlideName"`, `name=[1].SlideName` etc – Feb 17 '16 at 06:30
@StephenMuecke I am not much familiar with ASP, but by the looks of it `SliderTextList obj` which is expecting a `json` string as the parameter. If we post `data: $('#addTextForm').serialize()` then the ajax page will be receiviving this arguments as `'id': idvalue, 'SlideName': SlideNameValue, 'Content': ContentValue`, right? That thought made me make that adjustment. – rrk Feb 17 '16 at 06:41
No that's not correct. If the `contentType: 'application/json'` is removed, then the data will be posted as the default `'application/x-www-form-urlencoded; charset=UTF-8'` which is the default expected by the `DefaultModelBinder` (and it will be bound correctly) – Feb 17 '16 at 06:45

pass jquery array of objects to mvc action which accepts a list object

2 Answers2