我对 Web API 2.0 的工作原理还很陌生,但我已经开始掌握窍门了。我一直遇到的一个问题是如何将表单以及用户上传到我的 Controller 的多个文件一起发布。
我想我主要需要帮助如何使用 JavaScript
或 jquery
与 ajax
来发布所有正确的值。
这是我的 HTML 的片段:
<form id="CreateAnnouncementForm" class="form-horizontal">
<input type="hidden" name="announcementTypeID"/>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="col-sm-2 control-label">Headline</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="headline" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">More Info</label>
<div class="col-sm-10">
<textarea class="form-control" name="moreInfo"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Attachments</label>
<div class="col-sm-10">
<input type="file" name="Attachments" multiple/>
</div>
</div>
</div>
</div>
</div>
</form>
这是我通常用来将表单发布到 Controller 的 JavaScript/jQuery/Ajax:
onAnnouncementCreate: function () {
var form = $("#CreateAnnouncementForm");
var validator = $(form).kendoValidator().data("kendoValidator");
if (validator.validate()) {
var options = {
url: getApiUrl() + "/Announcement",
dataType: "json",
type: "POST",
headers: {
"Authorization": "Bearer " + getJwtToken(),
"LocationId": getCurrentLocation()
},
data: $(form).serialize(),
statusCode: {
200: function () {
$("#AnnouncementCreateModal").modal("hide");
announcementViewModel.reloadGrids();
},
400: function (response) {
toastr.options = { "positionClass": "toast-bottom-full-width";
toastr.error(response.responseText);
}
}
};
$.ajax(options);
}
}
现在,我相信最好是创建一个 ViewModel
,其中包含表单中所有值的 ViewModel
并让它包含一个 >IEnumerable
用于用户可以在表单中上传的附件。
我遇到的问题是将附件正确添加到表单中,以便它们正确映射。
我的ViewModel
将如下所示:
public class AnnouncementCreateViewModel
{
public AnnouncementViewModel Announcement { get; set; }
public IEnumerable<HttpPostedFileBase> Attachments { get; set; }
}
当然,我需要更改表单中的名称以反射(reflect)新模型。
如果有人可以帮助我如何将它们发布到我的 Controller ,我将不胜感激,因为这是我唯一仍在努力解决的问题。
最佳答案
因为这比我想象的要困难。我决定走另一条路。
由于我已经在使用 Kendo UI
框架,因此我现在使用 Kendo Upload
小部件来处理文件的上传。我让它异步地将文件上传到我的 Web API Controller ,然后在提交表单时我有一个单独的操作来处理表单。
当然,我也欢迎其他答案,这些答案可能可以通过在一次调用中发布所有数据来解决此问题,但目前,这样做就可以了。
关于javascript - 将表单与多个文件一起发布到 Web API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39230498/