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;}
    }

（我也嘗試過用列表代替無數的方式，仍然沒有運氣！）

api控制器簽名：

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

除righe_ordine數組外，所有字段均已正確綁定！ 我可以正確看到每個字段，但是數組的計數為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;}
    }

更新：只是為了增強

也許您需要先解析它，然后才能在控制器中使用它

你可以在這里閱讀我的完整代碼

我們將需要創建接口和類來實現它。

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);