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

【问题标题】：pass jquery array of objects to mvc action which accepts a list object将 jquery 对象数组传递给接受列表对象的 mvc 操作
【发布时间】：2016-02-17 06:06:38
【问题描述】：

我的视图中有一个表单，最初只有一个 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 存储在带有Id 和SlideName 的json 文件中，所以我认为我必须在mvc 操作Uploadtext 中传递一个列表对象，该对象总是为空。请帮忙。

【问题讨论】：

在控制台发布标签中检查它正在发送的数据
如果您正确生成了视图（即名称或您动态创建的对象具有正确的索引器），那么您只需要data: $('#addTextForm').serialize() 并删除contentType: 'application/json',。
@StephenMuecke 它仍然没有工作
那你没有正确生成表单控件。请参阅答案here 和here，了解动态添加集合项的一些选项。你没有显示你的代码，所以不可能知道你做错了什么。
但是如果您的所有编辑都是Content 属性，那么它们可能都是name="Content"，但前提是您将方法签名更改为[HttpPost]public ActionResultUploadText(IEnumerable<string> content)，然后构建您的SliderText 集合基于数组中的值的对象。

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

【解决方案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;
   });
});

【讨论】：

【解决方案2】：

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

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

作为斯蒂芬在 cmets 上建议的替代方法

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

【讨论】：

不，这不是我的建议——它只是data: $('#addTextForm').serialize(),，如果 OP 正确生成了表单控件，它将起作用——即。 name=[0].SlideName"、name=[1].SlideName等
@StephenMuecke 我对 ASP 不太熟悉，但从外观上看，SliderTextList obj 需要一个 json 字符串作为参数。如果我们发布data: $('#addTextForm').serialize()，那么ajax 页面将接收这个参数为'id': idvalue, 'SlideName': SlideNameValue, 'Content': ContentValue，对吗？这个想法让我做出了调整。
不，这是不正确的。如果contentType: 'application/json' 被删除，那么数据将作为默认'application/x-www-form-urlencoded; charset=UTF-8' 发布，这是DefaultModelBinder 所期望的默认值（并且会正确绑定）