Отправка нескольких списков JSON и изображений в FormData на C #

Question

Я пытаюсь отправить два списка JSON, DateTime, int, string, и файл на контроллер C # через запрос JQuery AJAX POST.

Все данные отправляются нормально, кромедва массива объектов, они ничего не отправляют.

Я пытался изменить их из списка объектов на список строк для преобразования оттуда, но массив получен как одна длинная строка, что делает его неконвертируемым через JsonConvert в Newtonsoft.Json.

Я попытался зарегистрировать объекты формданных, чтобы проверить их валидность, и в консоли они выглядят нормально.Я не совсем уверен, где я все испортил.

Вот мой JS :

var formData = new FormData();
formData.append("assignedUsers", JSON.stringify(assignedUsers));
formData.append("ccUsers", JSON.stringify(ccUsers));
formData.append("dueDate", $("#DueDate").val());
formData.append("goalClassID", parseInt(goalClassID));
formData.append("goalDescription", $("#GoalDescription").val());
formData.append("file", document.getElementById("GoalFile").files[0]);

for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
}

$.ajax({
    url: api + "main/CreateGoal",
    type: "POST",
    data: formData,
    cache: false,
    dataType: "json",
    processData: false,
    contentType: false,
    success: function (result) {
        if (result) {
            toastr.success("Goal successfully created");
        } else {
            toastr.error("Goal creation failed.");
        }
    }
})

Это мой C # контроллер :

public bool CreateGoal([FromForm]List<User>AssignedUsers, [FromForm]List<User>CCUsers, [FromForm]DateTime DueDate, [FromForm]int GoalClassID, [FromForm]string GoalDescription, [FromForm]IFormFile File = null)

Это Пользователь Класс

public class User : Base
{
    public string UUID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public int Permission { get; set; }
    public string FullName { get { return FirstName + " " + LastName; } }
}

Answer 1

Таким образом, из-за того, что вызов ajax должен обрабатывать файлы, он также не обрабатывает модели в массиве как объекты json.Итак, я сделал изменение, когда первый метод вернет созданный объект, а второй метод примет файл.

C # Контроллер

[HttpPost("CreateGoal")]
    public Goal CreateGoal(List<User> AssignedUsers, List<User>CCUsers, DateTime DueDate, int GoalClassID, string GoalDescription)
    {
        try
        {
            //Code to save new goal model
            return goal;
        }
        catch (Exception e)
        {

            return null;
        }
    }

    [HttpPost("CreateGoalFile")]
    public bool CreateGoalFile([FromForm] int GoalID, [FromForm]IFormFile File)
    {
        try
        {
            //Code to save file and make database relation
            return true;
        }
        catch (Exception)
        {
            return false;
        }
    }

Решение Javascript

$.post(api + "main/CreateGoal",
        { AssignedUsers: assignedUsers, CCUsers: ccUsers, DueDate: $("#DueDate").val(), GoalClassID: parseInt(goalClassID), GoalDescription: $("#GoalDescription").val() },
        function (result) {
            if (document.getElementById("GoalFile").files[0] != null) {
                var formData = new FormData();
                formData.append("goalID", result.id);
                formData.append("file", document.getElementById("GoalFile").files[0]);
                $.ajax({
                    url: api + "main/CreateGoalFile",
                    type: "POST",
                    data: formData,
                    cache: false,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result) {
                            toastr.success("File uploaded sucessfully created");
                        } else {
                            toastr.error("File uploaded failed.");
                        }
                    }
                })
            }
            toastr.success("Goal successfully created");
        }
    )

Answer 2

Оба массива объектов пусты, потому что вы публикуете их как json, но все данные публикуются как form-data, а [FromForm] ожидает, что ввод будет form-data специального формата.Все работает нормально для примитивных значений, потому что они добавляются к FormData, как это

formData.append(key, value)

, как и ожидалось.Но когда вам нужно передать массив объектов, он должен иметь следующий формат

formData.append("obj[0].Field1", field1Val)
formData.append("obj[0].Field2", field2Val)
formData.append("obj[0].Field3", field3Val)
...
formData.append("obj[1].Field1", field1Val)
formData.append("obj[1].Field2", field2Val)
formData.append("obj[1].Field3", field3Val)

Поэтому вам нужно обновить ваш код до чего-то вроде

var formData = new FormData();
formData.append("assignedUsers[0].uuid", assignedUsers[0].uuid);
formData.append("assignedUsers[0].firstName", assignedUsers[0].firstName);
...
formData.append("assignedUsers[1].uuid", assignedUsers[1].uuid);
formData.append("assignedUsers[1].firstName", assignedUsers[1].firstName);
...
formData.append("dueDate", $("#DueDate").val());
formData.append("goalClassID", parseInt(goalClassID));
formData.append("goalDescription", $("#GoalDescription").val());
formData.append("file", document.getElementById("GoalFile").files[0]);

Ну, так как этоне очень хороший способ написать код, вы хотели бы создать функцию, которая делает это для вас.Окончательное решение

function addUsers(formdata, users, name) {
    for (var i = 0; i < users.length; i++) {
        addSingleUser(formdata, users[i], name + "[" + i + "]");
    }
}

function addSingleUser(formdata, user, name) {
    for (var key in user) {
        formdata.append(name + "." + key,  user[key]);
    }
}

var formData = new FormData();
formData.append("dueDate", $("#DueDate").val());
formData.append("goalClassID", parseInt(goalClassID));
formData.append("goalDescription", $("#GoalDescription").val());
formData.append("file", document.getElementById("GoalFile").files[0]);
addUsers(formData, assignedUsers, "assignedUsers")
addUsers(formData, ccUsers, "ccUsers")

for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
}

$.ajax({
    url: "/Home/CreateGoal",
    type: "POST",
    data: formData,
    cache: false,
    dataType: "json",
    processData: false,
    contentType: false,
    success: function (result) {
        if (result) {
            toastr.success("Goal successfully created");
        } else {
            toastr.error("Goal creation failed.");
        }
    }
})