如何在 MVC4 中运行 FileResult 函数时显示"正在进行"

Question

我有一个下载按钮，它调用以下函数：

public FileResult DownloadExport()
{
    string fileName = "example";
    // Activate 'In progress'
    // Call to a function that takes a while
    // Deactivate 'In progress'
    return File(fileName, System.Net.Mime.MediaTypeNames.Application.Octet, Path.GetFileName(fileName));
}

所以，我调用了一个为我生成文件的函数。这个函数需要一段时间，我不希望我的用户认为应用程序崩溃了。这就是为什么我想在用户等待时显示"正在进行"。我该如何实现？

澄清一下：这个问题不是关于下载的进度，而是关于生成文件的函数的进度。

Answer 1

我最近遇到了同样的问题，我相信我的解决方案（基于对相关问题的回答）正是您想要的。基本思想是在生成文件时显示进度微调器（在我的情况下），在文件生成完成时隐藏进度微调器，然后提供要下载的文件。为了实现这一点，我需要四件事：

首先，控制器上的操作需要将文件存储在会话中

[HttpPost]
public ActionResult RunReport(ReportViewModel viewmodel)
{
   // Process that generates the object while will become the file here
   // ...
   using (var stream = new MemoryStream())
   {
      // Convert the object to a memory stream
      report.Generate(stream);  // Use your object here
      string handle = Guid.NewGuid().ToString();
      Session[handle] = stream.ToArray();
      return new JsonResult()
      {
         Data = new
         {
            FileGuid = handle,
            MimeType = "application/pptx",
            FileName = "My File.pptx"
         }
      };
   }
}

控制器还需要一个新的动作，它将提供实际的下载文件

public ActionResult Download(string fileGuid, string mimeType, string filename)
{
   if(Session[fileGuid] != null)
   {
       byte[] data = Session[fileGuid] as byte[];
       Session.Remove(fileGuid);  // Cleanup session data
       return File(data, mimeType, filename);
   }
   else
   {
      // Log the error if you want
      return new EmptyResult();
   }
}

接下来，视图中的AJAX调用显示进度微调器，调用RunReport（需要很长时间的操作），使用返回的JSON数组返回下载文件（这是一个快速操作），然后再次隐藏微调器。

<script type="text/javascript">
   function RunReport(reportUrl) {
      $.ajax({
         cache: false,
         url: reportUrl,
         type: "POST",
         success: function(response) {
            window.location = "/Report/Download?fileGuid=" + response.FileGuid +
               "&mimeType=" + response.MimeType + "&filename=" + response.FileName;
            $("#progress-spinner").hide();
         }
      });
      $("#progress-spinner").show();
   }
</script>

最后，启动它并生成用于AJAX调用的操作链接的链接

<a href="javascript: RunReport('@Url.Action("RunReport", "UserReport", new { ReportId = Model.Id })')">Run Report</a>

我希望这能帮助到别人！

Answer 2

您需要在客户端控制进度消息。

使用XHR（XMLHttpRequest）文件下载，您可以监控下载并显示进度条（如果您愿意）。或者，为了使用更简单的方法，发布一条简单的消息，在发出下载请求之前打开它，然后再次关闭它。

以下是如何：如何从XMLHttpRequest获取进度。

代码适用于ASP。NET-MVC:

在控制器方法中，将Content-Length标头添加到Response对象：

public FileResult DownloadExport()
{
    string fileName = "example";
    // Add Content-Length header
    FileInfo i = new FileInfo(fileName);
    Response.AddHeader("Content-Length", i.Length.ToString());
    return File(fileName, System.Net.Mime.MediaTypeNames.Application.Octet, Path.GetFileName(fileName));
}

然后，将提交按钮的onclick事件连接到下面的sendreq()函数。updateProgress()函数是XMLHttpRequest对象的onprogress事件的处理程序：

function sendreq(evt) 
{  
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress=updateProgress;
    req.open('GET', 'Controller/DownloadExport', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
            }  
    };  
    req.send(); 
}
function updateProgress(evt) 
{
    if (evt.lengthComputable) 
    {  //evt.loaded the bytes browser receive
       //evt.total the total bytes seted by the header
       //
       var percentComplete = (evt.loaded / evt.total)*100;  
       $('#progressbar').progressbar( "option", "value", percentComplete );
    } 
}   

编辑-使用消息而不是进度条

<div>
    <!-- Your other markup -->
    <div id="progressMsg" style="display:none">Please wait...</div>
    <button onclick="sendreq()">Submit</button>
</div>
<script>
function sendreq(evt) 
{  
    var req = new XMLHttpRequest(); 
    req.open('GET', 'Controller/DownloadExport', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) {  
            //4 = complete
            $('#progressMsg').hide();    
        }  
    };  
    $('#progressMsg').show();    
    req.send(); 
}
</script>

请注意req.open（）的第三个参数表示调用是异步的。onreadystate事件处理程序在调用完成后隐藏消息。

Answer 3

上面的"XMLHttpRequest"解决方案对我不起作用。文件保存对话框从未出现过。

以下是我们团队提出的解决方案：

返回JSON而不是返回FileResult。并将文件流放入Session变量中。

public ActionResult SetupExport()
{
    var fileName = //your file here;
    Session[fileName] = baseOutputStream;
    return Json(new { success = true, fileName }, JsonRequestBehavior.AllowGet);
}

在控制器中使用另一种方法将会话传递给FileStreamResult

public FileStreamResult DownloadExport()
{
    var file = (Stream) Session[fileName];
    return new FileStreamResult(file, "your file type goes here");
}

在视图中，将点击事件添加到下载按钮

$("#yourBtnHere").click(function () {
            DownloadFile();
        });

创建DownLoadFile函数：

function DownloadFile()
    {
        $('#progressMsg').show();
        $.ajax({
            dataType: 'json',
            type: 'POST',
            url: "/YourController/SetupExport",
            success: function (result) {
                if (result.success) {
                    $('#progressMsg').hide();
                    window.open( "/YourController/DownloadExport" + "?fileName=" + result.fileName);
                }
            },
            error: function () {
                //show your error here;
            }
        });
    }

这种方法的负面部分是我们必须调用控制器两次。