使用 Vue 和 ASP.NET Core DTO 模型的 JSON 对象的 JSON 序列化问题答案

【问题标题】：JSON serialization issue with JSON Oject using Vue and ASP.NET Core DTO model使用 Vue 和 ASP.NET Core DTO 模型的 JSON 对象的 JSON 序列化问题
【发布时间】：2020-11-20 15:21:12
【问题描述】：

在我的 Vuex 商店中，我正在创建包含详细信息对象的数据对象，然后使用 axios 将数据发送到后端。我不断收到错误 400 错误请求

错误信息

Cannot deserialize the current JSON object (e.g. {\"name\":\"value\"}) into type 'System.Collections.Generic.List`1[home_inventory.Models.DTO.Detail]' because the type requires a JSON array (e.g. [1,2,3]) to deserialize correctly.

正在发送的数据

const data = {
            Name: "name",
            Detail: {
                CategoryId: 1,
                Manufactuerer: 1,
                Model: "",
                SerialNumber: "", 
                PurchasePlace: "", 
                Quantity: "",  
                AcquiredDate: "",  
                PurchasePrice: "", 
                CurrentValue: "",
                ConditionId: 1,
                LocationId: 1,
                RetiredDate: "",
                Description: ""
            }
        };

axios.post('https://localhost:5001/api/Assets', data)
            .then(res => console.log(res))
            .catch(error => console.log(error));

然后我有我的 ASP.Net Core web api 后端 DTO 模型，像这样 http post 控制器

[HttpPost]
        public async Task<ActionResult> PostAsset([FromBody] AssetSaveRequest assetCreationDto)
        {
           
           var asset = _mapper.Map<Asset>(assetCreationDto);
            _context.Assets.Add(asset);
            //await _context.SaveChangesAsync();
            var assetDto = _mapper.Map<AssetDto>(asset);

            return CreatedAtAction("GetAsset", new {assetDto.Id}, assetDto);
        }

DTO 模型

 public class AssetSaveRequest
    {
        public string Name { get; set; }
        public List<Detail> Detail { get; set; }
        public byte[] Files { get; set; }
    }

    public class Detail
    {
        public int CategoryId { get; set; }
        public int ManufacturerId { get; set; }
        public string Model { get; set; }
        public string SerialNumber { get; set; }
        public string PurchasePlace { get; set; }
        public int Quantity { get; set; }
        public DateTime AcquiredDate { get; set; }
        public float PurchasePrice { get; set; }
        public float CurrentValue { get; set; }
        public int ConditionId { get; set; }
        public int LocationId { get; set; }
        public DateTime RetiredDate { get; set; }
        public string Description { get; set; }
    }

我不确定如何解决此问题以使其正常工作，任何人都可以在正确的方向上给我任何帮助。

任何帮助都会有所帮助。

【问题讨论】：

请确定您是否有详细信息数组或单个项目。没有互联网可以为您做出决定。（大概您知道什么是数组/列表以及它们在 JSON 中的表示方式，如果不阅读 C# 和 JSON 中的集合，一般会帮助您澄清和edit 的问题）
更新问题
只是想一想，您将 Detail 的类型指定为 List 但在数据中，Detail 不是列表。我可能错了，但这似乎是问题所在。

标签： c# json asp.net-core vuejs2 vuex

【解决方案1】：

像List<Detail> 这样的.NET List 属性对应于JSON 中的一个数组。所以你想把 Detail 包装成一个数组，比如：

const data = {
    Name: "name",
    Detail: [
        {
            CategoryId: 1,
            ...other values
        }
    ]
};

注意单个 Detail 对象周围的方括号。重命名为 DetailItems 会更清楚，这表示列表/数组而不是单个项目。

【讨论】：