ASP.Net MVC使用jquery-form插件上载文件并返回Json结果

Question

我正在尝试使用JQuery Form插件（http://jquery.malsup.com/form/）从我的视图中上传文件和几个其他字段，并且我希望action方法将Json结果返回给javascript回调。

当前，ActionMethod已正确调用（我可以处理表单中的文件和字段），但是当我返回Json结果时，浏览器尝试将其下载为文件（如果我下载文件并查看其内容，则为JSON内容）我要返回。）。

这是我的表格：

<form id="FormNewFile" action="@Url.Content("~/Home/AddFile")" method="post" enctype="multipart/form-data">
    <input type="hidden" name="eventId" value="25" />
    <input type="text" name="description" />
    <input type="file" name="fileName" />
    <input type="submit" value="Send!" />
</form>

这是我的javascript：

  <script type="text/javascript">
     $(function () {
        $("#FormNewFile").ajaxForm({
           dataType:'json',
           success:processJson
     });
     });

     function processJson(a,b) {
        alert('success');
     }
  </script>

这是我的ActionMethod：

   [HttpPost]
   public ActionResult AddFile(long? eventId, string description)
   {
      int id = 5;
      return Json(new {id});
   }

浏览器尝试下载的文件名称类似于AddFilee87ce48e，最后8个字符为随机十六进制字符。

最后，下载文件的内容为：

{“ id”：5}

而且javascript中的processJson函数永远不会被调用。

我在Google上搜索了很多，唯一可行的方法是从action方法返回JSON结果作为“ Content”结果，我认为这是我要采用的方法，但是我仍然想知道为什么这不是工作吗

有任何想法吗？

Answer 1

我最终要做的是手动序列化要返回为JSON的对象，如果执行此操作，则响应将没有标题，因此将由javascript处理而不是由浏览器处理。 我使用了这种辅助方法：

  public static ActionResult JsonPlain(object x)
  {
     var result = new ContentResult();
     result.Content = new JavaScriptSerializer().Serialize(x);
     return result;
  }

希望这对别人有帮助

Answer 2

这是正常现象。 文档摘录 ：

由于无法使用浏览器的XMLHttpRequest对象上载文件，因此表单插件使用隐藏的iframe元素来帮助完成任务。 这是一种常见的技术，但是它具有固有的局限性。 iframe元素用作表单提交操作的目标，这意味着服务器响应已写入iframe。 如果响应类型为HTML或XML，则很好，但如果响应类型为脚本或JSON，则效果不佳，这两种脚本通常都包含在HTML标记中找到时需要使用实体引用来表示的字符。

为了解决脚本和JSON响应的挑战，表单插件允许将这些响应嵌入到textarea元素中，建议结合使用文件上传时对这些响应类型进行嵌入。 但是请注意，如果表单中没有文件输入，那么请求将使用普通XHR提交表单（不是iframe）。 这给您的服务器代码增加了负担，使您知道何时使用文本区域，何时不使用文本区域。 如果愿意，可以使用插件的iframe选项强制其始终使用iframe模式，然后服务器始终可以将响应嵌入文本区域。 以下响应显示了如何从服务器返回脚本：

这意味着，如果要返回JSON，则需要将其包装在服务器上的<textarea>标记中。 为此，您可以编写源自JsonResult的自定义操作结果， 并将生成的JSON包装在这些标签内。

Answer 3

以下博客文章， 不使用Flash在ASP.NET MVC中使用jQuery File Upload ，解决了达林·迪米特洛夫（Darin Dimitrov）的回答所述将响应包装在文本区域中的问题。

Answer 4

查看表单标签上的操作：

action="@Url.Content("~/Home/AddFile")"

我看到的唯一用法是在脚本标记中，例如：

<script language="javascript" src="<%=Url.Content("~/Scripts/jquery-1.3.2.js")%>

该操作的正确参考是：

action="/Home/Addfile"

虽然我不太清楚为什么的解释，但是我对UrlHelper的解释是：

Url.Content("~/somepath")

将虚拟路径转换为绝对路径，并期望使用诸如javascript之类的物理文件。

json结果可能会以文件下载的形式返回，因为mvc框架要求下载某种描述的文件。 就像：

<a href="<%= Url.Content("~/_docs/folder/folder/document.pdf") %>">
document.pdf</a>

将下载或显示物理pdf文件。

Answer 5

我的解决方案使用json且没有特定的javascript：

/// <summary>
/// A result to use in combination with jquery.ajax.form when we want to upload a file using ajax
/// </summary>
public class FileJsonResult : JsonResult
{
    public JsonResult Result { get; set; }

    public FileJsonResult(JsonResult result):base()
    {
        this.Result = result;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.Write("<textarea>");
        this.Result.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
        context.HttpContext.Response.ContentType = "text/html";
    }
}