2014-07-03 87 views
0

在我的控制器中,我有一個ActionResult返回一個文件。Handeling ASP.NET MVC FileResult返回

[HttpPost] 
    public ActionResult ExportCSV(ReportResultViewModel model) 
    {  
     var content = "hello,world"; 
     return File(Encoding.UTF8.GetBytes(content), 
        "text/csv", 
        "export.csv"); 
    } 

在我看來,當我發佈到這個ActionResult,我顯示一個模式「請稍候」的風格。

<!--modal--> 
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content" style="background: #EBF3EB;"> 
      <div class="modal-header"> 
       <h1>Please wait...</h1> 
      </div> 
      <div class="modal-body"> 
       <div id="loader"></div> 
      </div> 
     </div> 
    </div> 
</div> 
@using (Html.BeginForm("ExportCSV", "Reporting", FormMethod.Post, new { name = "back", id = "back", style = "width:100%" })) 
{ 
    @Html.HiddenFor(m => m.A) 
    @Html.HiddenFor(m => m.LOT) 
    @Html.HiddenFor(m => m.OF) 
    @Html.HiddenFor(m => m.THINGS) 

    <input type="submit" data-toggle="modal" data-target="#pleaseWaitDialog" value="Export CSV" style="width: 100%; background: #fff" class="btn btn-default" /> 
} 

我想隱藏它時,該文件可用

有沒有一種方法來檢測客戶端(通過JavaScript也許)當文件到達,所以我可以隱藏模式?

+0

plz詳述你的問題 –

+0

請告訴我什麼不清楚。 – Cactus

+0

第一次當你的形式將加載然後你想檢查是文件可用???? –

回答

1

我想你以後是jQuery文件下載http://jqueryfiledownload.apphb.com/在你的視圖中添加一個對jquery ui庫和文件下載庫的引用,然後添加一個腳本標籤。

<script type="text/javascript"> 

$(function() { 
    var $pleaseWaitDialog= $("#pleaseWaitDialog"); 

    $(document).on("submit", "#back", function (e) { 

     $pleaseWaitDialog.dialog({ modal: true }); 

     $.fileDownload($(this).prop('action'), { 
      httpMethod: 'POST', 
      data: $(this).serialize, 
      successCallback: function (url) { 
       $pleaseWaitDialog.dialog('close'); 
      }, 
      failCallback: function (responseHtml, url) { 
       $pleaseWaitDialog.dialog('close'); 
      } 
     }); 
     e.preventDefault; //otherwise normal form submit will occur 
    }); 
}); 
</script> 

這將完成時,點擊提交按鈕的#ExportCSV形成,它會顯示爲#pleaseWaitDialog標籤的模態對話框。然後使用fileDownload插件,它會將一個帖子發送到表單的動作url。提交的數據來自$(this).serialize調用。當文件成功下載或者調用失敗時,只需關閉對話框。