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";
    }
}