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.

Answer 1

$(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;
   });
});

Answer 2

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()
},