Question

我在单独的视图中有一个表单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;
    });
});

现在它有效:) 对不起，我的英文......

发送数据，使用IFormFile查看模型，如果表单是不显眼的-ajax

0 个答案: