在 ASP .NET Core MVC 中通过 Ajax 提交表单（自定义对象不是 FormData）

Question

我尝试通过 Ajax 调用提交表单数据，而不是传递

FormData

，而是在 Ajax 调用中传递自定义对象。

这是我的ajax调用：

function submitData() {
    let isValid = true;
    var bankViewModel = {};
    
    {
        bankViewModel = {
            Name: $("#name").val(),
            Website: $("#website").val(),
            Logo: $("input#logo")[0].files[0],
      //      Logo: null,
            StartDate: $("#startDate").val(),
            Stars: $("#stars").val(),
            Branches: []
        };

        // branches
        $("#branchTable tbody tr").each(function (index, row) {
            const branch = {
                Name: $(row).find(".branch-name").val(),
                Email: $(row).find(".branch-email").val(),
                Status: $(row).find(".branch-status").is(":checked"),
                Photo: $(row).find(".branch-photo")[0].files[0]
            //    Photo: null
            };
        bankViewModel.Branches.push(branch);
        });

        console.log("++++++++BANK+++++++++");
    console.log(bankViewModel);
        console.log("+++++++++++++++++");
    }

    if (isValid) {
        $.ajax({
            type: "POST",
            url: "@Url.Action("Create", "BanksV62")",
     //       data: form,
        data: {bankViewModel},
       //     contentType: ,
            contentType: false,
        //    contentType: "multipart/form-data",
        //    contentType: "application/x-www-form-urlencoded",
            processData: false,
            success: function (response) {
                if (response.success) {
                    window.location.href = "@Url.Action("Index", "BanksV62")";
                } else {
                    alert("Error occurred.");
                }
            },
            error: function (response) {
                alert("Request failed from create error.");
            }
        });
    }
}

这是我的控制器的操作方法的签名

[HttpPost]
public async Task<IActionResult> Create(BankViewModel bankViewModel)
{
    // here bankViewModel received object with null or default values not exact value that i have passed
}

这是我的视图模型：

public class BankViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Website { get; set; }
    public IFormFile? Logo { get; set; }
    public DateTime StartDate { get; set; }
    public int Stars { get; set; }
    public List<BranchViewModel> Branches { get; set; }
    public string? IdListToDelete { get; set; }
}

是否真的可以通过 Ajax 调用发布带有照片的自定义对象（不是

FormData

）？如果可能的话 - 我该怎么做？

Answer 1

如果你想直接在js模型中发送文件，最简单的方法是使用formdata。如果您想使用其他方式，请先将文件转换为byte64或其他格式，然后将其发送到后端。

对文件进行编码、解码并保存在服务器内部会比直接使用 bytearray 中的 formdata 使用更多的资源。