添加jquery.unobtrusive-ajax.js引用后上传为空

Question

如果我不引用jquery.unobtrusive-ajax.js，我可以在Post上获取附件。如果我引用它，它会给我返回null。

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>


@using (Ajax.BeginForm("Index", "ContactSubmission", new AjaxOptions{ InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "updateSuccess" },
     new { enctype = "multipart/form-data",@class = "form-horizontal", role = "form" }))
      {
               ///code here

}

[HttpPost]
public JsonResult Index(Contact contact)
{
    if (ModelState.IsValid)
    {
       if (contact != null)
       {
         string attachment = string.Empty;
         // HttpPostedFileBase Attachment
         if (contact.Attachment != null) attachment = SaveFile(contact.Attachment); 
                ......

如何应对这种情况？

- James123

---

你是否意外地引用了两次？请检查你的布局和/或捆绑配置。 - Zach Spencer

不是的。它只在页面上被引用了一次。 - James123

Answer 1

我将 jquery.unobtrusive-ajax.js 进行了修改，使其可以上传文件。 第一次修改：

$(document).on("submit", "form[data-ext=true]", function (evt) {
        var clickInfo = $(this).data(data_click) || [],
            clickTarget = $(this).data(data_target),
            isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        var formData;
        if (this.enctype && this.enctype === "multipart/form-data") {
            formData = new FormData(this);
        } else {
            formData = clickInfo.concat($(this).serializeArray());
        }

        asyncRequest(this, {
            url: this.action,
            type: this.method || "GET",
            data: formData
        });
    });

第二个修改在asyncRequest中：

....
method = options.type.toUpperCase();
if (options.data instanceof FormData) {
    options.processData = false;
    options.contentType = false;
    options.data.append("X-Requested-With", "XMLHttpRequest");

    if (!isMethodProxySafe(method)) {
        options.type = "POST";
        options.data.append("X-HTTP-Method-Override", method);
    }
} else {
    options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

    if (!isMethodProxySafe(method)) {
        options.type = "POST";
        options.data.push({ name: "X-HTTP-Method-Override", value: method });
    }
}
...

- TotPeRo

---

这个修复方案可行，尽管我希望我们能够在不改变JavaScript库的情况下实现它。 - Dave Agaba

@DaveAgaba 我同意你的观点。 - TotPeRo

Answer 2

如果您不使用 jquery.unobtrusive-ajax.js，那么您将得到一个普通的HTML表单而非 ajax 表单。如果您使用了它，我想表单可以正常工作，但是无法上传文件，因为ajax不允许使用 multipart/form-data enctype。

您可以使用 HTML 5 文件API（从Web应用程序中使用文件）或jQuery上传插件。

- Zabavsky

---

是的，我正在jQuery对话框中打开部分视图。提交结果会进行完整的后台提交。我需要异步来在对话框中捕获结果。 - James123

@James123，所以你需要使用一些jQuery上传插件或者自己实现。 - Zabavsky