HttpPostedFileBase不绑定到模型C#MVC 5

时间:2017-06-14 23:23:23

标签: javascript c# ajax asp.net-mvc-5

我正在尝试上传将从我的网站发送的电子邮件的附件。我使用了指定了multiple关键字的file类型的输入标记,并使用ajax将文件和其他模型属性发送回控制器。

但是,一旦到达控制器,所有模型属性都会被绑定,但包含文件的属性除外。

当使用fiddler检查请求时,上传的文件存在,并且它们也出现在控制器上的Request.Files集合中。

我的文件是否应该使用此方法自动绑定到模型,或者我是否必须编写自定义绑定器才能完成此操作?

[已删除非相关代码]

这是应包含文件的对象

public class Attachment
{        
    public IEnumerable<HttpPostedFileBase> Files { get; set; }

    public Attachment()
    {
        Files = new List<HttpPostedFileBase>();
    }    
}

这是包含附件和其他模型属性的对象

public class QuoteRequest
{      
    public Attachment Attachment { get; set; }

    public QuoteRequest()
    {            
        Attachment = new Attachment();
    }
}

用户将用于上传的视图具有以下格式

@using (Html.BeginForm("Index", "Quote", FormMethod.Post, new { required = "true", id = "frm-quote", enctype = "multipart/form-data" })) {
@Html.AntiForgeryToken()

@Html.EditorFor(model => model.Contact, "ContactForm")

@Html.EditorFor(model => model.Enquiry, "EnquiryForm")

@Html.EditorFor(model => model.Attachment, "AttachmentForm")

<div class="row">
    <div class="col l10 offset-l2 m6 s12 add-pad-bot center">
        <button class="col s12 btn waves-effect orange" type="reset" data-test-clear>CLEAR</button>
    </div>

    <div class="col l10 offset-l2 m6 s12 center">
        <button class="col s12 btn waves-effect waves-green green" type="button" data-test-submit>SUBMIT</button>
    </div>
</div>  }

这是处理文件输入标记的部分视图

@using Domain.Models

@model Attachment

<section id="attachment" class="row no-mar-bot">

    <div class="file-field input-field col s12">
        <div class="btn primary">
            <span id="icon-attachment">
                <i class="medium material-icons">note_add</i>
            </span>
            @Html.TextBoxFor(m => m.Files, new {type = "file", multiple = 
"multiple"})
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>                
    </div>

</section>

获取表单输入以发布到控制器的javascript函数

function getFormData() {

var formData;

formData = new FormData();

var fileUpload = $("#Attachment_Files").get(0);
var files = fileUpload.files;

if (files) {
    // Looping over all files and add it to FormData object  
    for (var i = 0; i < files.length; i++) {
        console.log("files[i].name:" + files[i].name);
        formData.append(files[i].name, files[i]);
    }
}

// You can update the jquery selector to use a css class if you want
$("input:not([type='file']), textarea").each(function (x, y) {
    formData.append($(y).attr("name"), $(y).val());
});

return formData; }

ajax帖子的代码

$.ajax({
    url: "/quote",
    method: "POST",
    cache: false,
    contentType: false,
    processData: false,
    data: getFormData()
    headers: {
        '__RequestVerificationToken': 
        $("input[name='__RequestVerificationToken']").val()
      }
 })
.fail(function(jqXHR, textStatus) { })
.done(function(data) { });

这是接收帖子的控制器操作方法

[HttpPost]
[ValidateAntiForgeryHeader]
[Route("")]
public ActionResult Index(QuoteRequest model) { }

1 个答案:

答案 0 :(得分:0)

更改以下代码

$.ajax({
url: "/quote",
method: "POST",
cache: false,
contentType: false,
processData: false,
data: getFormData()
headers: {
    '__RequestVerificationToken': 
    $("input[name='__RequestVerificationToken']").val()
  }
 })
.fail(function(jqXHR, textStatus) { })
.done(function(data) { });

$.ajax({
url: "/quote",
method: "POST",
cache: false,
contentType: false,
processData: false,
data: FormData($("#frm-quote").get(0)),
headers: {
    '__RequestVerificationToken': 
    $("input[name='__RequestVerificationToken']").val()
  }
 })
.fail(function(jqXHR, textStatus) { })
.done(function(data) { });

删除getFormData()函数,同时保留其他所有内容,这对我来说是个问题。

非常感谢Stephen Muecke!