传递对象角度的FormData Item数组答案

【问题标题】：Pass FormData Item array of object angular传递对象角度的FormData Item数组
【发布时间】：2022-01-11 10:45:04
【问题描述】：

如何将 FormData 传递给 api，其中包含对象数组？

我正在尝试这样

这是请求的负载如何在 .net core c# Api 中获取所有包含其他数据的项目？

public class BackgroundCheckParam
{
    public Guid EmpId { get; set; }
    public List<BackgroundChecksResults> Items { get; set; }
    public IFormFile ResultPdf { get; set; }
    public IFormFile DisclosurePdf { get; set; }
    public DateTime CompleteDate { get; set; }
}

public class BackgroundChecksResults
{
    public string Type { get; set; }
    public string Result { get; set; }
}


   public ResponseResult AddBackgroundCheck([FromForm] BackgroundCheckParam data)
    {

    }

其他都很好，除了物品，我什么都收到了。项目始终为 0。

【问题讨论】：

使用 Angular 的 HttpClient。警告：它会强制你使用 RxJS，它的学习曲线非常陡峭。
已经使用 Angular 的 HttpClient 来创建上面的有效载荷。只需要 c# 帮助我如何以列表的形式访问项目。
它不起作用，因为您正在混合 JSON 和 <form> 数据。这不是 ASP.NET Core 的错。您需要更改 Angular/TypeScript 以使用 ASP.NET 的 List FormData 名称值，而不是 JSON。
这意味着我们不能在 FormData 中传递这样的项目？
没错。要么只使用 JSON，要么只使用 URLSearchParams (application/x-www-form-urlencoded) 主体。

标签： c# angular .net-core form-data

【解决方案1】：

它不起作用，因为您正在混合 JSON 和传统的 <form> 数据。
- 一些背景信息：
  - 在没有脚本或 AJAX 的“普通”HTML 中，<form> 可以POST 提交为application/x-www-form-urlencoded 或multipart/form-data。
    - application/x-www-form-urlencoded 是每个键+值对的几乎人类可读的文本表示。例如key1=value1&key2=value2。
    - multipart/form-data 是二进制编码。从<input type="file"> 发布文件时，您需要使用此选项。
  - 对于 JavaScript 发起的 HTTP 请求（使用 fetch 或 XMLHttpRequest），通常将数据以 JSON (application/json) 形式发布，而不是使用两种 <form> 编码中的任何一种。
    - Angular 的HttpClient 在内部使用fetch。
    - _{如果<form> 也可以用于提交JSON，而不需要任何脚本，那就太好了；它没有，哦，好吧。}
具体而言，您的Items 是一个List<...>，当它应该作为多个表单项发送时，它被表示为单个表单项中的 JSON 数组，每个值一个。
- 解决方案是以与 ASP.NET 的表单模型绑定语法兼容的方式表示 Items。
  - 具体来说，每个离散值都有自己的表单名称，每个列表元素都由从 0 开始的增量索引引用。
- 在您的情况下，Items 的键/名称将类似于：
```
Items[0].Type   = "Background"
Items[0].Result = "Pass" 
Items[1].Type   = "Foreground"
Items[1].Result = "Fail" 
Items[2].Type   = "Middleground"
Items[2].Result = "Compromise" 
```
  - 请注意，ASP.NET（所有版本）始终要求集合索引器从 0 开始，并且索引之间没有间隙，否则 List<> 属性将为 null 或为空，并且不会出现任何警告或错误（很烦人）。

所以你应该有这样的东西：

// * Use `URLSearchParams` for `application/x-www-form-urlencoded`.
// * Use `FormData` for `multipart/form-data`.

const resultPdfFile = inputElement1.files[0];
const disclosurePdf = inputElement2.files[0];

const formValues = new FormData();
formValues.append( "EmpId"        , "fckgw-rhqq2-yxrkt-8tg6w-2b7q8" );
formValues.append( "ResultPdf"    , resultPdfFile );
formValues.append( "DisclosurePdf", disclosurePdf );
formValues.append( "CompleteDate" , "2021-12-01" );

for( let i = 0; i < items.length; i++ ) {
    
    const keyPrefix = "Items[" + i.toString() + "].";
    formValues.append( keyPrefix + "Type"  , items[i].type   ); // e.g. "Items[0].Type"
    formValues.append( keyPrefix + "Result", items[i].result );
}

await postRequest( formValues );

替代快速修复解决方法“解决方案”

在您的 ASP.NET 代码中，忽略您的 BackgroundCheckParam data 操作参数的 Items 成员和来自 Request.Form 的 JSON 解码 Items：

public ResponseResult AddBackgroundCheck([FromForm] BackgroundCheckParam data)
{
    IReadOnlyList<BackgroundChecksResults> items;
    {
        String formList = this.Request.Form["Items"];

        items = JsonConvert.DeserializeObject< List<BackgroundChecksResults> >( formList );
    }
}

【讨论】：