Angular 8 post formData 到 ASP.NET Core API 无法绑定 IEnumerable/List

Question

正如标题所说

TypeScript 模型

export interface RigheOrdiniBuoniSpesaData {
  id: number;
  id_ordine: number;
  id_taglio_buono_spesa: number;
  quantita: number;
}

这是另一个更大对象的一部分：

export class OrdiniBuoniSpesaData {
  id: number;
  // OTHER FIELD
  // OTHER FIELD
  // OTHER FIELD
  righe_ordine: RigheOrdiniBuoniSpesaTableData;
}

保存方法

saveOrder(model: OrdiniBuoniSpesaData) {
    const headerPost: HttpHeaders = new HttpHeaders();
    headerPost.set('Content-type', 'application/x-www-form-urlencoded');
    const formData: FormData = new FormData();
    formData.append('id_cliente', model.id_cliente.toString());
    // VARIOUS FORM FIELDS
    //THIS IS ARRAY DATA
    formData.append('righe_ordine', JSON.stringify(model.righe_ordine));
    return this.http
        .post<boolean>(
          requestURL,
          formData,
          { headers: headerPost }
        )
        .pipe(
          catchError(this.handleError)
        );
}

订单 json（有效 Json）连同所有数据在 Chrome 请求捕获中清晰可见：

[{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},{"id":0,"id_ordine":0,"id_taglio_buono_spesa":3,"quantita":14}]

在 API 方面

JSON 的接收模型

public class RigheOrdiniBuoniSpesaViewModel
{
    public long id { get; set; }
    public long id_ordine { get; set; }
    public long id_taglio_buono_spesa { get; set; }
    public int quantita { get; set; }
}

在

public class OrdiniBuoniSpesaViewModel 
    {
        public long id { get; set; }
        //OTHER VARIOUS FIELDS
        //I TRIED ALSO WITH LIST INSTEAD OF IENUMERABLE
        public IEnumerable<RigheOrdiniBuoniSpesaViewModel> righe_ordine {get;set;}
    }

（我也尝试使用列表而不是 IENUMERABLE，但仍然没有运气！）

API 控制器签名：

[HttpPost]
public async Task<IActionResult> PostSaveOrder([FromForm] OrdiniBuoniSpesaViewModel model) 
{.....code}

除 righe_ordine 数组外，所有字段均已正确绑定！ 我可以正确查看每个字段，但数组的 count = 0。

奇怪的是，如果我在 Visual Studio 的 QuickWatch 调试中检查 asp 网络请求对象 (this.Request.Form)：

this.Request.Form["righe_ordine"]
{[{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},
{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},
{"id":0,"id_ordine":0,"id_taglio_buono_spesa":1,"quantita":1},
{"id":0,"id_ordine":0,"id_taglio_buono_spesa":3,"quantita":14}]}    

Microsoft.Extensions.Primitives.StringValues

存在并正确填充.....但由于某种原因将其绑定到 OrdiniBuoniSpesaViewModel 失败....

我做错了什么？有什么想法吗？

编辑：

目前我找到的唯一解决方案是直接在进入控制器后直接捕获值：

string righeJson = this.Request.Form["righe_ordine"].ToString();
if(!string.IsNullOrEmpty(righeJson))
      model.righe_ordine = JsonConvert.DeserializeObject<IEnumerable<RigheOrdiniBuoniSpesaViewModel>>(righeJson);

Answer 1

我认为您需要像这样更改您的模型名称

在你的 js 代码中

formData.append('righeOrdine', JSON.stringify(model.righe_ordine));

和c#

public class OrdiniBuoniSpesaViewModel 
    {
        public long id { get; set; }
        //OTHER VARIOUS FIELDS
        //I TRIED ALSO WITH LIST INSTEAD OF IENUMERABLE
        public IEnumerable<RigheOrdiniBuoniSpesaViewModel> RigheOrdine {get;set;}
    }

更新：仅用于增强

也许你需要在控制器中使用它之前对其进行解析

你可以阅读我的完整代码here

我们需要创建接口和类来实现它。

public interface IJsonParseService<T> where T : class
{
     T ToObject(string json);
}

public class JsonParseService<T> : IJsonParseService<T> where T : class
{
    public T ToObject(string json)
    {
      return JObject.Parse(json).Root.ToObject<T>();
    }
}

那就注册吧

services.AddScoped(typeof(IJsonParseService<>), typeof(JsonParseService<>));

所以你的代码应该是这样的

private readonly IJsonParseService<RigheOrdiniBuoniSpesaViewModel> _jsonParsePostOptionDefaultVm;

jsonParsePostOptionDefaultVm.ToObject(viewModel.RigheOrdiniBuoniSpesaViewModel);