Ajax FormData 追加列表对象



您好,我在将数据发布到控制器时遇到问题。现在我下面有一个模型,

public class Media
    {
        public int Id { get; set; }
        public string Category { get; set; }
        public string Guid { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public List<int> Portals { get; set; }
        public string Lang { get; set; }
        public List<Folder> Folders { get; set; }
       }

然后,我将文件和此模型发布到控制器。在视图 AJAX 侧

var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            if (totalFiles === 0) {
                toastr.warning('Lütfen resim yükleyin.');
                return;
            }
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("FileUpload").files[i];
                formData.append("FileUpload", file);
            }
            var itemFolder= {
                Id: refFolder
            }
            var folderss = [];
            folderss.push(itemFolder);
            var item = {
                Title: title,
                Description: desc,               
                Category: category,
                Portals: portals,
                Folders: folderss
            }
            formData.append("Title", title);
            formData.append("Description", desc);
            formData.append("Category", category);
            formData.append("Portals", portals);
            formData.append("Folders",folderss);

            $.ajax({
                type: 'POST',
                url: '@Url.Action("Add", "Media")',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    var result = JSON.parse(data);
                    if (result.Status !== 200) {
                        toastr.error('@Resources.Resource.Error_Unexpected');
                        return;
                    }
                    if (result.Result === "SUCCEED") {
                        toastr.success('Resim kaydedilmiştir.');
                        window.location.reload();
                        return;
                    } else {
                        toastr.error('@Resources.Resource.Error_Unexpected');
                    }
                },
                error: function (error) {
                    toastr.error('@Resources.Resource.Error_Unexpected');
                    return;
                }
            }); 

我在控制器中获取此帖子数据,例如

public ActionResult Add(Models.Media item)
        {
            if (item == null
                || string.IsNullOrEmpty(item.Title)
                || string.IsNullOrEmpty(item.Category))
                return Content(Serialization.JsonSerialize(new { Status = 400 }));
            if (Request.Files.Count <= 0)
                return Content(Serialization.JsonSerialize(new { Status = 401, Result = "NO_FILE" }));
            return Content(Serialization.JsonSerialize(new { Status = 200, Result = MediaRepository.Add(item) }));
        }

我获取所有没有文件夹属性的数据,它为空。如何解决这个问题?谢谢

因为文件夹是对象的集合,所以你必须用索引添加每个对象。

var index = 0;
for(var pair of folderss){
    var folder = pair[key];
    formData.append("Folders[" + index + "].Id", folder.Id);
    index++;
}
for (var i = 0; i != array.folderss; i++) {
    formData.append("Folders[" + i + "].Id", array[i].Id);
}

//asp c#

public class product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Color> Colors { get; set; }
}
public class Color
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Code { get; set; }
}

JavaScript

var colorList=[];
const addColor=(item)=>{
    colorList.push({
        id:item.id,
        name:item.name,
        code:item.code
    })
}
const save=()=>{
    var data=new formData();
    data.append('Id', 1);
    data.append('Name', 'productName');
    colorList.forEach((item, i)=>
        Object.keys(item).forEach(key => 
            data.append(`colors[${i}].${key}`, item[key])
    ));
    ...
}

最新更新