ASP.NET MVC - iframe下載對話框沒有顯示

Question

我需要做一個文件下載，在文件處理過程中顯示一個加載圖標（因爲我不知道需要多長時間），我決定要使用iframe，代碼運行良好，但問題是文件下載對話框不顯示。

我已經在IE，Firefox和Chrome中進行了測試，並且它沒有在其中任何一箇中工作。

這裏是我的代碼：

查看：

<table id="progress" style="visibility:hidden"> 
    <tr> 
     <td> 
      <img src="~/Content/Images/ajax-loader.gif" /> 
     </td> 
     <td> 
      <h4>please wait.</h4> 
     </td> 
    </tr> 
</table> 

<div class="buttons"> 
    <input type="button" value="Ok" class="button" id="downloadButton"> 
</div> 

<iframe id="iframe" style="visibility:hidden"></iframe> 

<script> 
    $(document).ready(function() { 

     $('#downloadButton').click(function() { 

      $('#progress').show(); 
      $('input:button').attr("disabled", true); 

      $('#iframe').src = "@Url.Action("GenerateFile", "Files", null)"; 

      $('#iframe').load("GenerateFile", function() { 
       $('input:button').attr("disabled", false); 
       $('#progress').hide(); 
      }); 
     }); 

    }); 
</script> 

服務器端操作：

[HttpGet]  
public void GenerateFile(Filters viewModel)   
{   
    var result = GetCustomers().WithName(viewModel.Name);   
    StringBuilder file = new StringBuilder(); 

    foreach (var customer in result)   
    {   
     // fill up the string builder with csv format  
    }   

    System.Web.HttpContext.Current.Response.AddHeader("content-disposition","attachment; filename=Customers.csv");   
    System.Web.HttpContext.Current.Response.ContentType = "application/csv";   
    System.Web.HttpContext.Current.Response.Write(file);   
    System.Web.HttpContext.Current.Response.End();   
}  

任何幫助，將不勝感激，謝謝！

Answer 1

我認爲這個代碼有多個問題。試試這個：

public FileResult GenerateFile(Filters viewModel) 
     { 
      var result = GetCustomers().WithName(viewModel.Name); 
      StringBuilder file = new StringBuilder(); 

      foreach (var customer in result) 
      { 
       // fill up the string builder with csv format  
      } 
      var content = Encoding.UTF8.GetBytes(file.ToString()); 
      return File(content, "application/csv", "Customers.csv"); 
     } 

，我覺得沒有所謂的SRC jQuery的方法，所以嘗試這也：

$('#iframe').attr('src',url); 

我假設你正在使用剃刀語法，所以試試這個您查看代碼：

@{ 
    ViewBag.Title = "Test"; 
} 

<table id="progress" style="display: none"> 
    <tr> 
     <td> 
      <img src="~/Content/Images/ajax-loader.gif" /> 
     </td> 
     <td> 
      <h4>please wait.</h4> 
     </td> 
    </tr> 
</table> 

<div class="buttons"> 
    <input type="button" value="Ok" class="button" id="downloadButton"> 
</div> 

<iframe id="iframe" style="display: none"></iframe> 
@section scripts{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('#downloadButton').click(function() { 

       $('#progress').show(); 
       $('input:button').attr("disabled", true); 

       var url = "@Url.Action("GenerateFile", "Files", null)"; 
$("#iframe").attr('src', url); 

       $('#iframe').load("/Files/GenerateFile", function() { 
        $('input:button').attr("disabled", false); 
        $('#progress').hide(); 
       }); 
      }); 

     }); 
    </script> 
} 

而且我也相信你應該在你的jQuery加載函數中指定一個Action參數，例如。 $（'＃iframe'）。load（「/ Files/GenerateFile/parameter」...）因爲您的GenerateFile操作需要Filters參數。