如何将对象和图像列表从 jQuery 发送到 ASP.NET MVC 控制器答案

【问题标题】：How to send List of objects and image from jQuery to ASP.NET MVC controller如何将对象和图像列表从 jQuery 发送到 ASP.NET MVC 控制器
【发布时间】：2021-12-26 09:44:27
【问题描述】：

我有一些模型类：

public class Research
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Abstract { get; set; }
    public string Body { get; set; }
    public string Image { get; set; }
    [NotMapped]
    public HttpPostedFileWrapper ImageFile { get; set; }
    public virtual List<ResearchAuthors> ResearchAuthors { get; set; }
}

public class ResearchAuthors
{
    public int Id { get; set; }
    public int AuthorId { get; set; }
    public int ResearchId { get; set; }
    public Research Research { get; set; }
    public Author Author { get; set; }
}

这是我如何获取要发送到控制器的数据的 jQuery 代码

        var Research = {
            Id: idInput.val(),
            Title: titleInput.val(),
            Abstract: abstractInput.val(),
            ImageFile: imageInput.get(0).files[0],
            Body: bodyInput.val()
        };

        // Research Authors
        var ResearchAuthors = [];
        $('#authors-tbody tr').each(function () {
            var AuthorId = $(this).children('.id-td').text();
            var Id = $(this).children('.researchAuthorsId-td').text();
            var ResearchAuthor = {
                AuthorId: AuthorId,
                Id: Id,
                ResearchId: idInput.val()
            }
            ResearchAuthors.push(ResearchAuthor)
        });

控制器正在等待这个

public ActionResult Create(SaveResearchViewModel viewModel)
{
      return Json(new { success = true, message = "Created Successfully" });
}

SaveResearchViewModel 代码：

public class SaveResearchViewModel
{
    public Research Research { get; set; }
    public List<ResearchAuthors> ResearchAuthors { get; set; }
}

我使用了formdata，但由于ResearchAuthors的列表，它无法工作，因为有要发送的数据图像，甚至无法字符串化

那么，为了在控制器中接收，使用所有不同数据类型 [Object, Object.Image, Arr[Object]] 的正确方法是什么？

【问题讨论】：

标签： c# jquery ajax asp.net-mvc form-data

【解决方案1】：

您可以使用 ajax 将 1 个字符串传递给 Controller。然后序列化成一个对象。

var Research = {
Id: idInput.val(),
Title: titleInput.val(),
Abstract: abstractInput.val(),
ImageFile: imageInput.get(0).files[0],
Body: bodyInput.val()};

$.ajax({
url:'/Controller/Action',
data: {
    strResearch: JSON.stringify(Research)
},
type: 'POST',
dataType: 'json',
success: function(res){
    if(res.success)
    {
        alert(res.message)
    }
}

//控制器

    public JsonResult Create(string strResearch)
    {
        SaveResearchViewModel saveResearchViewModel = new SaveResearchViewModel();
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        Research objResearch = serializer.Deserialize<Research>(strResearch);
        //save db

        return Json(new { success = true, message = "Created Successfully" });
    }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

表单数据无法添加对象列表，因此您可以使用 2 ajax 请求第一个 ajax 保存 Research 和 ReseachAuthors 第二个 ajax 保存图像

喜欢这个

 $.ajax({
                type: "POST",
                dataType: "json",
                url: "/Researches/Create",
                data: viewModel,
                success: function (data) {
                    if (data.success) {
                        $.ajax({
                            url: "/Researches/SaveImage",
                            method: "POST",
                            processData: false,
                            contentType: false,
                            data: data,
                            success: function (data) {
                                if (data.success) {
                                    toastr.success(data.message);
                                    window.location.replace("/Researches/");
                                }
                            },
                            error: function () {
                                toastr.error("Image Ajax error");
                            }
                        })   
                    }
                    else {
                        toastr.error(data.message)
                    }
                },
                error: function () {
                    toastr.error("Ajax Error")
                }

【讨论】：