.NET Core ViewModel中的IFormFile属性导致停滞的AJAX请求 [英] IFormFile property in .NET Core ViewModel causing stalled AJAX Request

问题描述

我使用户能够在添加/编辑产品"模式下为零售产品添加图像.

I am giving users the ability to add images for a retail product inside of an Add/Edit Product modal.

public class ProductModalViewModel
{
    public ProductModalViewModel()
    {
        Product = new ProductDTO();
        Images = new List<ProductImageViewModel>();
    }

    public ProductDTO Product { get; set; }

    public List<ProductImageViewModel> Images { get; set; }
}

每个产品图片都包含在其自己的ViewModel中，如下所示:

Each product image is contained in its own ViewModel, as below:

public class ProductImageViewModel
{
    public ProductImageViewModel()
    {
        ProductImage = new ProductImageDTO();
    }

    public ProductImageDTO ProductImage { get; set; }

    [DataType(DataType.Upload)]
    public IFormFile ImageFile { get; set; }
}

提交表单以保存产品(以及所有添加的图像)后，我的请求被挂起并在Chrome开发工具中显示待处理".我的控制器操作从未达到.

Upon submitting the form to save the product (and any added images) my request gets hung up and displays "pending" in Chrome Development Tools. My controller action is never reached.

仅当我在项目中包含ProductImage Fields/ViewModel/Logic时，才会发生这种情况.在将该功能添加到模式之前不会发生这种情况，并且如果我删除所有ProductImage Fields/ViewModel/Logic然后再次提交，则效果很好.

This only happens when I include the ProductImage Fields/ViewModel/Logic in my project. This was not occurring before adding that functionality to the modal, and works fine if I remove all of the ProductImage Fields/ViewModel/Logic then submit again.

将我的IFormFile包含在嵌套的ViewModel中是否存在固有的错误?或者这可能是另外一回事.我其余的相关代码如下.

Is there something inherently wrong with including my IFormFile inside of a nested ViewModel? Or could this be something else. The rest of my relevent code is below.

[HttpPost]
public IActionResult SaveProduct([FromForm]ProductModalViewModel model)
{
    //save code    
}

查看(模态):

<form id="formSaveProduct" onsubmit="SaveProduct(event)" enctype="multipart/form-data">
//Other product fields removed for brevity
    <div class="row">
        <div class="col-md-12">
            <ul class="list-group" id="image-list-group">
                @for (int i = 0; i < Model.Images.Count(); i++)
                {
                    <partial name="_ImageListItem" for="Images[i]" />
                }
            </ul>
        </div>
    </div>
</form>

PartialView(ProductImage):

<li class="list-group-item my-1">
    <input type="hidden" asp-for="ProductImage.Id" class="image-id" />
    <input type="hidden" asp-for="ProductImage.ProductId" class="image-productid" />

    <div class="row">
        <div class="col-3">
            <input type="text" readonly asp-for="ProductImage.Order" class="image-order" />
        </div>
        <div class="col-6">
            <img src="..\@Model.ProductImage.Path" class="image-display" />
        </div>
    </div>
</li>

脚本:

function SaveProduct(e) {

    e.preventDefault();  // prevent standard form submission

    $.ajax({
        url: "@Url.Action("SaveProduct", "ProductManagement", new { Area = "Admin" })",
        method: "post",
        data: new FormData($('#formSaveProduct')[0]),
        contentType: false,
        processData: false,
        cache: false,
        success: function (result) {
            //removed for brevity
        }
    });
}

推荐答案

此问题在以下帖子中的概念性问题中得到了很好的回答:

This question was answered wonderfully in my conceptual question in the following post:

IFormFile作为嵌套ViewModel属性

这篇关于.NET Core ViewModel中的IFormFile属性导致停滞的AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！