如何在formData中传递一个数组

Question

我正在使用 formData 并尝试在 .Net Core 后端传递一个接收它的数组 这是我尝试发送 Truck.StateTruck 的数组：

{
  0: {StaId: 6}
  1: {StaId: 7}
  2: {StaId: 8}
  3: {StaId: 9}
}

这是我发送数据的方法，我尝试仅发送 StaId 及其值：

let formData = new FormData();
formData.set('DriId',truck.DriId);
formData.set('TruExdate',truck.TruExdate);
formData.set('TruAddress',truck.TruAddress);
formData.set('TruCity',truck.TruCity);
formData.set('TraId',truck.TraId);
formData.set('TruZip',truck.TruZip);
formData.set('TruYear',truck.TruYear);
formData.set('TruMake',truck.TruMake);
formData.set('TruType',truck.TruType);
formData.set('TruFuel',truck.TruFuel);
formData.set('TruAxles',truck.TruAxles);
formData.set('TruVin',truck.TruVin);
formData.set('TruDocurl',truck.TruDocurl);
formData.set('TraUnit',truck.TraUnit);
formData.set('TraMake',truck.TraMake);
formData.set('TraYear',truck.TraYear);
formData.set('TtyId',truck.TtyId);
formData.set('TraIntmaterial',truck.TraIntmaterial);
formData.set('TraEquipament',truck.TraEquipament);
formData.set('TraOption',truck.TraOption);
formData.set('Fichero',truck.Fichero);
formData.append('StateTruck',JSON.stringify(truck.StateTruck)); 

当使用console.log (formData.getAll ('StateTruck')); 打印到控制台时，我看到了

["[{"StaId":6},{"StaId":7},{"StaId":8},{"StaId":9}]"]

我的后端需要这种结构：

public class TruckRequest
    {
        public int TruId { get; set; }
        public int? DriId { get; set; }
        public DateTime? TruExdate { get; set; }
        public string TruAddress { get; set; }
        public string TruCity { get; set; }
        public int? TraId { get; set; }
        public string TruZip { get; set; }
        public string TruYear { get; set; }
        public string TruMake { get; set; }
        public string TruType { get; set; }
        public string TruFuel { get; set; }
        public string TruAxles { get; set; }
        public string TruVin { get; set; }
        public string TruDocurl { get; set; }

        public string TraUnit { get; set; }
        public string TraMake { get; set; }
        public string TraYear { get; set; }
        public int? TtyId { get; set; }
        public string TraIntmaterial { get; set; }
        public string TraEquipament { get; set; }
        public string TraOption { get; set; }

        public IFormFile Fichero { get; set; }
        public string TruUregistro { get; set; }
        public DateTime? TruUfecha { get; set; }
        public string TruUupdate { get; set; }
        public DateTime? TruUupdatefecha { get; set; }
        public string TruEstado { get; set; }

        public virtual ICollection<StateTruck> StateTruck { get; set; }    
}


public partial class StateTruck
{
    public int SruId { get; set; }
    public int? StaId { get; set; }
    public string SruUregistro { get; set; }
    public DateTime? SruUfecha { get; set; }
    public string SruUupdate { get; set; }
    public DateTime? SruUupdatefecha { get; set; }
    public string SruEstado { get; set; }
    public int? TruId { get; set; }

}

我怎样才能给它正确的格式以便它可以被接收？

Answer 1

根据您的描述，我假设您想使用 FormData 将值（包括对象数组）从客户端传递到服务器端（Web API）。如果是这种情况，您可以参考以下示例代码：

客户端（使用JQuery Ajax调用Web API方法）：

    $(function () {
        //Submit Main Form.
        $("#btnCreate").click(function (event) {
            //Prevent Default Region.
            event.preventDefault();
            //define an array to store the StateTruck
            var statetruce = new Array();

            for (var i = 0; i < 5; i++) {

                statetruce.push({ StaId: i });
            }

            let formData = new FormData();
            formData.set('DriId', 101); 
            formData.set('TruAddress', "Address 1");
            formData.set('TruCity', "city A");
            formData.set('TraId', 1011);
            formData.set('TruZip', "zip12");
            formData.set('TruYear', "years "); 
            formData.append('StateTruck', JSON.stringify(statetruce));  
            $.ajax({
                url: '/api/TestAPI',
                type: "post",
                async: true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    // window.location.href = response;
                }
            });
        });
    });

基于Array Object的属性创建View Model，用于对数组对象进行反序列化。

Web API 方法中的代码：

    [HttpPost] 
    public async Task<IActionResult> Post(IFormCollection collection)
    {

        var DriId = collection["DriId"].ToString();
        var TruAddress = collection["TruAddress"].ToString();

        var StateTruck = collection["StateTruck"].ToString();
        //deserialize the object
        var result = System.Text.Json.JsonSerializer.Deserialize<List<StateTruckViewModel>>(StateTruck);

        //do something
        return Ok("success");
    }

然后调试截图如下：

Answer 2

当控制台注销数据时，您需要解析从formData.getAll ('StateTruck') 接收到的数组中的第一个元素。以下内容应该对您的方案有所帮助：

console.log(JSON.parse(formData.getAll("StateTruck")[0]))

Answer 3

如果您需要将值转换为字符串，您可以使用

例如

formData.set('TruYear', truck.TruYear.toString());

对于整数，例如

formData.set('TruYear', parseInt(truck.TruYear));

所有这些都作为 formData 传递到您的后端，您的服务器应该创建解析器以将转换为正确的格式，并验证它是正确的格式。

永远不要相信从前端提交的任何内容。