У меня есть форма в отдельном представлении MyAddForm.cshtml
@model MyViewModel
<form id="my_form" class="form-inline" asp-action="MyAddForm" asp-controller="Profile" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#my_form" data-ajax-method="POST" enctype="multipart/form-data">
...
<div class="row">
<div class="form-group col-xs-12">
<label asp-for="Name"></label>
<input class="form-control input-group-lg" type="text" asp-for="Name" />
<span asp-validation-for="Name"></span>
</div>
</div>
...
<div class="row">
<div class="form-group col-xs-12">
<label asp-for="Image"></label>
<input asp-for="Image" type="file" class="form-control" />
</div>
</div>
...
</form>
есть ViewModel:
public class MyViewModel
{
[Display(Name = "Name")]
public string Name { get; set; }
[Display(Name = "Image")]
[DataType(DataType.Upload)]
[FileExtensions(Extensions = "jpg,jpeg")]
public IFormFile Image { get; set; }
}
и есть Controller:
[HttpPost]
public async Task<IActionResult> MyAddForm(MyViewModel model)
{
//model.Image always null...
...
return PartialView("~/Views/Profile/MyAddFormForm.cshtml", model);
}
проблема в том, что если форма имеет атрибут: data-ajax = "true", то в Controller модель поступает без загруженного файла (ноль).Это потому, что заголовок «Content-Type» не установлен на «multipart / form-date», хотя он указан в форме.
Мне нужен результат, чтобы он возвращался точно через «unobtrusive-ajax»,как в этом случае реализовать отправку viewModel вместе с файлом?
ОБНОВЛЕНИЕ:
Я пытался использовать $ ajax jquery, это то, что вам нужно, и это работает,Но я не понимаю, почему подтверждение подтверждается 2-3 раза вместо одного ...
$(document).on("submit", '#my_form', function (event) {
var formdata = new FormData($('#my_form')[0]);
$.ajax({
url: '@Url.Action("MyAddForm", "Profile")',
type: 'POST',
data: formdata,
processData: false,
contentType: false
}).done(function (result) {
$('#my_form').html(result);
});
event.preventDefault();
});
ОБНОВЛЕНИЕ2:
В этой конструкции: "$(document).on("submit", '#my_form', function (event) {}
"событие отмены действия по умолчанию не работает по умолчанию, из-за этого происходит двойная отправка данных ...
Мне пришлось вставить этот код, после вызова ajax, который отображал саму форму:
...
}).done(function (result) {
$('#add_cat').html(result);
...
$('#my_form').submit(function (e) {
e.preventDefault(); //Now the cancellation event works
var formdata = new FormData($('#my_form')[0]);
$.ajax({
url: '@Url.Action("MyAddForm", "Profile")',
type: 'POST',
data: formdata,
processData: false,
contentType: false
}).done(function (result) {
$('#my_form').html(result);
});
return false;
});
});
И теперь это работает :) Извините за мой английский ...