我在单独的视图中有一个表单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; }
}
并且有控制器:
[HttpPost]
public async Task<IActionResult> MyAddForm(MyViewModel model)
{
//model.Image always null...
...
return PartialView("~/Views/Profile/MyAddFormForm.cshtml", model);
}
问题是如果表单具有属性:data-ajax =&#34; true&#34;,那么在Controller中,模型到达时没有下载的文件(null)。这是因为&#34; Content-Type&#34;标题未设置为&#34; multipart / form-date&#34;,尽管它在表单上显示。
我需要结果完全返回&#34; unobtrusive-ajax&#34;,在这种情况下如何实现将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();
});
UPDATE2:
在这种结构中:&#34; $(document).on("submit", '#my_form', function (event) {}
&#34;默认情况下,默认操作取消事件不起作用,因此会有双重发送数据...
我必须在调用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;
});
});
现在它有效:) 对不起,我的英文......