将表单与多个文件一起发布到 Web API答案

【问题标题】：Post form along with multiple files to Web API将表单与多个文件一起发布到 Web API
【发布时间】：2016-08-30 14:38:13
【问题描述】：

我对 Web API 2.0 的工作方式还很陌生，但我已经开始掌握窍门了。我一直遇到的一个问题是如何发布一个表单以及用户上传到我的控制器的多个文件。

我想我主要需要关于如何使用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>

这是我通常用来将表单发布到控制器的 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; }
}

当然，我需要更改表单中的名称以反映新模型。

如果有人可以帮助我将它们发布到我的控制器上，那将不胜感激，因为这是我唯一仍在努力解决的问题。

【问题讨论】：

通过 AJAX 发布文件附件并不像您希望的那样直接，stackoverflow.com/questions/166221/… 应该会给您一些想法。 asp.net mvc 也有答案

标签： javascript c# jquery ajax asp.net-web-api2

【解决方案1】：

因为事实证明这比我想象的要困难。我决定另辟蹊径。

由于我已经在使用Kendo UI 框架，我现在使用Kendo Upload 小部件来处理我的文件的上传。我让它异步地将文件上传到我的 Web API 控制器，然后我有一个单独的操作来处理表单提交时。

当然，我也欢迎其他答案，通过在一次通话中发布所有数据可能能够解决此问题，但现在就可以了。

【讨论】：