我让用户能够在添加/编辑产品模式中为零售产品添加图像。
模态视图模型:
public class ProductModalViewModel
{
public ProductModalViewModel()
{
Product = new ProductDTO();
Images = new List<ProductImageViewModel>();
}
public ProductDTO Product { get; set; }
public List<ProductImageViewModel> Images { get; set; }
}
每个产品图片都包含在自己的 ViewModel 中,如下所示:
ImageView 模型:
public class ProductImageViewModel
{
public ProductImageViewModel()
{
ProductImage = new ProductImageDTO();
}
public ProductImageDTO ProductImage { get; set; }
[DataType(DataType.Upload)]
public IFormFile ImageFile { get; set; }
}
在提交用于保存产品(和任何添加的图像)的表单后,我的请求被挂起并在 Chrome 开发工具中显示“待定”。我的 Controller 操作从未达到。
只有在我的项目中包含 ProductImage Fields/ViewModel/Logic 时才会发生这种情况。在将该功能添加到模态之前不会发生这种情况,如果我删除所有 ProductImage 字段/ViewModel/Logic 然后再次提交,则工作正常。
将我的 IFormFile 包含在嵌套的 ViewModel 中是否存在固有错误?或者这可能是别的东西。我的其余相关代码如下。
Controller :
[HttpPost]
public IActionResult SaveProduct([FromForm]ProductModalViewModel model)
{
//save code
}
View (模态):
<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>
局部 View (产品图像):
<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
}
});
}
最佳答案
首先你不需要这个
[DataType(DataType.Upload)]
public IFormFile ImageFile { get; set; }
所以你可以把你的代码改成
public IFormFile ImageFile { get; set; }
并且在你的脚本中你应该添加contentType
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,
contentType: "multipart/form-data", //here
success: function (result) {
if (result.success) {
$("#exampleModal").modal('toggle');
location.reload();
}
else {
$(".modal-body").html(result);
}
}
});
}
关于javascript - .NET Core ViewModel 中的 IFormFile 属性导致 AJAX 请求停滞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56334056/