ASP.NET Core Mvc在具有（data-ajax）的表单上上传图像

Question

我正在开发WebApplicaiton，此应用程序只是添加具有hava图像的产品并对其进行更新。

查看

@model EShopper.Dto.Product.ProductCommonDto

<div class="row" style="margin-top:5px;margin-bottom:50px">
    <form data-ajax-url="@Url.Action("ProductSave","AdminProduct")" method="post" enctype="multipart/form-data" data-ajax="true" data-ajax-method="POST" data-ajax-complete="complete" data-ajax-loading="#loading">
        <div id="exTab3" class="container">
            <div class="tab-pane" id="2b">
                <h3>Picture Upload Page</h3>
                <br />
                <br />
                <div class="form-group">
                    <label>Upload Image</label>
                    <input asp-for="ProductImage" class="form-control" type="file" />
                </div>
            </div>
            <button type="submit" class="btn btn-success col-sm-12">Save</button>
        </div>
    </form>
</div>

Controller

[HttpPost]
        public IActionResult ProductSave(ProductCommonDto productCommonDto)
        {
            var result = _productProcessService.ProductSave(productCommonDto);
            return Json(result);
        }

模型

public class ProductCommonDto
    {
        public ProductDto Product { get; set; }
        public IFormFile ProductImage { get; set; }
    }

问题是，当我尝试上传图像时，它在后端返回（Null）。

如果我删除（data-ajax =“ true” data-ajax-method =“ POST”，则可以上传图像。

Answer 1

这里是正在运行的演示，您可以参考：

型号：

public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; }
    public IFormFile ProductImage { get; set; }
}

控制器：

[HttpPost]     
public async Task<IActionResult> ProductSave(Product product)
{
        //the stuff you want
}

查看：

<form  asp-action="ProductSave" asp-controller="Home" method="post" enctype="multipart/form-data" data-ajax="true" data-ajax-method="POST" data-ajax-complete="complete" data-ajax-loading="#loading">
    <input asp-for="ProductName" class="form-control" />
    <input asp-for="ProductImage" class="form-control" type="file" />
    <input type="submit" value="Create" />
</form>

Answer 2

[尝试使用Razor生成的表单并将其发送给IFormFile类型的后端。请参见下面的示例：

查看

@model CreateVM
@using(Html.BeginForm("Create", "ImageResource", FormMethod.Post, new {enctype="multipart/form-data"}))
{
    ...
        <div class="form-group">
            @Html.LabelFor(model => model.ImageURL, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-6">
                <input type="file" name="productImg"/>
            </div>
        </div>
    ...
}

Controller

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create(CreateVM create, IFormFile productImg)
        {
            if (ModelState.IsValid)
            {
                if (productImg != null)
                {
                    //Any logic you would like to do with image
                }
            }
            return View(create);
        }

在这种情况下，您将图像直接传递到后端以进行进一步的操作，而不是通过JavaScript上传。