Question

情况如下：我有一个表单，当我单击提交按钮时发送一个带有kendo上传控件的文件，控制器的方法操作正在使用HttpPostedFileBase在参数中接收该文件。

这是我的HTML代码：

@using (Html.BeginForm("ConfirmarOposicion", "Gestion", FormMethod.Post, new { @id = "Frm-login", role = "form", @class = "form-horizontal" }))
{
    @(Html.Kendo().Upload()
        .Name("files")
    )

    <button class="btn btn-success" type="submit" id="confirm" >Confirm</button>
}

这是我的控制者：

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files)
{
    // Here the parameter files is not null..
}

到目前为止，这一切都很顺利。问题是当我尝试将更多值作为参数发送到控制器的同一方法时。我想发送的其他值是一个数组，另一个是数字。我尝试在javaScript中使用ajax发送这两个值。

当我尝试发送另外两个值时，这是我的javaScript代码：

$("#confirm").click(function () {
        var numMarca = $("#numMarca").val()
        var idsToSend = [];
        var grid = $("#Grid2").data("kendoGrid")
        var ds = grid.dataSource.view();
        for (var i = 0; i < ds.length; i++) {
            var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
            var checkbox = $(row).find(".checkbox");
            if (checkbox.is(":checked")) {
                idsToSend.push(ds[i].DescMarca);
                idsToSend.push(ds[i].IntencionOposicion = 1);
            } else {
                idsToSend.push(ds[i].DescMarca);
            }
        }

        $.ajax({
            url: '@Url.Action("ConfirmarOposicion", "Gestion")',
            data: { ids: idsToSend, marca: numMarca },
            type: 'POST',
            dataType: "json",
            success: function (data) {

            }
        });

当我clik时，提交按钮将在发送输入文件的同一个控制器中发送这两个值。

现在我的控制器：

public async Task<ActionResult> ConfirmarOposicion(IEnumerable<HttpPostedFileBase> files, string[] ids, string marca)
{
    // here the array ids and the value of marca is not null, but the parameter files it is null

}

这就是我的问题。我需要在控制器的相同方法操作中发送所有这些值。我怎么能这样做？

Answer 1

问题：使用此行代码data: { ids: idsToSend, marca: numMarca }, 您只使用两个参数手动构建数据对象，而不处理上载的文件，因此文件数据丢失。

解决方案：构建一个FormData对象，然后将所有必需的数据填入其中，包括上传的文件，并将此对象发送到服务器。

var formData = new FormData();
var file_data = $('#files')[0].files; // for multiple files if only single file use $('#files')[0].files[0] and skip the loop.
for(var i = 0;i<file_data.length;i++){
    formData.append("file_"+i, file_data[i]);
}    
formData.append('ids', idsToSend);
formData.append('marca', numMarca );

$.ajax({
    url: '@Url.Action("ConfirmarOposicion", "Gestion")',
    data: formData ,  // pass the formData object to server.
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: "json",
    success: function (data) {

    }
 });

注意：$('#files')获取文件控件，kendo语法中的.Name("files")将文件控件的ID设置为files。

修改：我将processData: false,和contentType: false,添加到了ajax选项中。积分至this answer

将processData设置为false可以防止jQuery自动将数据转换为查询字符串。有关详细信息，请参阅the docs。

将contentType设置为false是必要的，否则jQuery will set it incorrectly。

当我发送其他值作为参数时，Kendo上传文件在控制器中发送null

1 个答案: