将jquery对象数组传递给接受列表对象的mvc动作

时间:2016-02-17 06:06:38

标签: javascript jquery arrays asp.net-mvc asp.net-mvc-4

我的视图中有一个表单,最初只有一个textarea输入,如果用户想用jquery,用户可以添加更多的textarea输入。我的问题与第二种情况有关。提交表单后,我在控制台中获取了一个对象数组,但是当我将此数组传递给我的控制器中的mvc操作时,它将变为空。 我尝试过这些解决方案,但没有成功:

Send array of Objects to MVC Controller

POST a list of objects to MVC 5 Controller

这是我的代码: -

jquery代码:

$('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行动:

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

我的对象类:

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; }
}

我必须将Content存储在带有IdSlideName的json文件中,所以我想我必须在mvc action Uploadtext中传递一个列表对象即将到来永远是null。请帮忙。

2 个答案:

答案 0 :(得分: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;
   });
});

答案 1 :(得分:0)

由于服务器端需要一个字符串作为参数obj作为查询字符串,我认为这就是你需要的。

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

作为斯蒂芬在评论中提出的替代方案

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