如何使用 XMLHttpRequest 在 Jquery 中发送数组列表

Question

我使用 XMLHttpRequest 发送信息，我发送的信息包括一个 class，其中一个属性是一个列表。问题是它发送了所有信息，但没有发送所需的列表。

Class C#

public class AddProductRequest
{
     public decimal GroupId { get; set; }
     public decimal BrandId { get; set; }
     public List<AdvancedDescription> AdvancedDescriptions { get; set; }
}

public class AdvancedDescription 
{
  public string Title { get; set; }
  public string Description { get; set; }
}

WebApi 方法

[Route("AdminApiAddProduct")]
[HttpPost]
public ResponseBody AdminApiAddProduct(AddProductRequest request)
{
      if ((request.AdvancedDescriptions ?? new List<AdvancedDescription>()).Count > 0)
      {
//Problem Array Count is 0
      }
      var groupId = request.GroupId; //is 12
      var brandId = request.BrandId; //is 13
}

Jquery

$('body').on('click','#bSubmit',function(event) {
    event.preventDefault();

    var attributes = 
        [
           {Title : 'test' , Description: 'test'} ,
           {Title: 'test2' , Description : 'test2'}
        ];

   const formData = new FormData();
   formData.append('request.GroupId', 12);
   formData.append('request.BrandId', 13);
   formData.append('request.AdvancedDescriptions' , attributes);

   var xmlHttpRequest = new XMLHttpRequest();
   if (!window.XMLHttpRequest) {
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlHttpRequest.open("POST",
                '@Url.Action("AdminApiAddProduct", "CallApi", new {area = "AdminArea"})',
                true);

   xmlHttpRequest.onloadend = function() {
        var response = JSON.parse(xmlHttpRequest.responseText);
   }
   xmlHttpRequest.send(formData);
});

一般问题是 AdvancedDescription 列表没有发送到服务器

Answer 1

既然你用的是jQuery，那么可以用$.ajax，构造一个JS对象，序列化后再发送：

$('body').on('click','#bSubmit',function(event) {
  event.preventDefault();
  var attributes = [
    {Title: 'test', Description: 'test'} ,
    {Title: 'test2', Description : 'test2'}
  ];
  
  const data = {
    GroupId: 12,
    BrandId: 13,
    AdvancedDescriptions: attributes
  };
  $.ajax({
    url: '@Url.Action("AdminApiAddProduct", "CallApi", new {area = "AdminArea"})',
    type: 'POST',
    data: JSON.stringify(data),
    datatype: 'json',
  })
    .done(function (data) {
      successFunction(data);
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
      serrorFunction();
    });
});

如何使用 XMLHttpRequest 在 Jquery 中发送数组列表

How to send Array list in Jquery with XMLHttpRequest

c#

jquery

list

xmlhttprequest

webapi