![](/img/trans.png)
[英]ASP.net core Razor page file upload with AJAX Post to IFormFile handler returns 404 Not Found
[英]IFormFile property in .NET Core ViewModel causing stalled AJAX Request
我讓用戶能夠在添加/編輯產品模式中為零售產品添加圖像。
public class ProductModalViewModel
{
public ProductModalViewModel()
{
Product = new ProductDTO();
Images = new List<ProductImageViewModel>();
}
public ProductDTO Product { get; set; }
public List<ProductImageViewModel> Images { get; set; }
}
每個產品圖像都包含在其自己的 ViewModel 中,如下所示:
public class ProductImageViewModel
{
public ProductImageViewModel()
{
ProductImage = new ProductImageDTO();
}
public ProductImageDTO ProductImage { get; set; }
[DataType(DataType.Upload)]
public IFormFile ImageFile { get; set; }
}
提交表單以保存產品(和任何添加的圖像)后,我的請求被掛起並在 Chrome 開發工具中顯示“待處理”。 我的控制器操作從未達到。
只有在我的項目中包含 ProductImage Fields/ViewModel/Logic 時才會發生這種情況。 在將該功能添加到模態之前不會發生這種情況,如果我刪除所有 ProductImage Fields/ViewModel/Logic 然后再次提交,則可以正常工作。
將我的 IFormFile 包含在嵌套的 ViewModel 中是否存在固有的錯誤? 或者這可能是別的東西。 我的相關代碼的其余部分如下。
[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>
<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);
}
}
});
}
這個問題在我在以下帖子中的概念性問題中得到了很好的回答:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.