ASP. NET Core Mvc загрузить изображение в форму, имеющую (data- ajax)

Question

Я разрабатываю WebApplicaiton, это приложение просто добавляет продукт, который имеет изображение, и обновляет его.

Вид

@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>

Контроллер

[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

Попробуйте использовать форму, сгенерированную 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>
    ...
}

Контроллер

        [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.

Answer 2

Вот рабочая демонстрация, к которой можно обратиться:

Модель:

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

Контроллер:

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

Вид:

@model ProductCommonDto

<div class="row" style="margin-top:5px;margin-bottom:50px">
<form data-ajax-url="@Url.Action("ProductSave","Home")" 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>

@section scripts{
    <script src="~/lib/jquery.unobtrusive-ajax/jquery.unobtrusive-ajax.js"></script>

}