處理ASP.NET MVC FileResult返回

Question

在我的控制器中，我有一個ActionResult返回一個File。

[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），以便我可以隱藏模式？

Answer 1

我認為您所追求的是在您看來的jQuery File Download 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插件將其發布到表單的操作網址。 提交的數據來自$（this）.serialize調用。 成功下載文件后或調用失敗后，只需關閉對話框即可。

Answer 2

如果要捕獲return事件，則必須自己通過AJAX提交原始請求。 這意味着JavaScript必須最終負責下載文件，而不是通過Content-Disposition: attachment標頭瀏覽器。

在您的控制器中，您可以將文件轉換為Base64String並返回如下內容，而不是返回FileActionResult ：

Byte[] bytes = File.ReadAllBytes("path");

if (Request.IsAjaxRequest())
{
    var file64 = Convert.ToBase64String(bytes);
    return Json( new {File = file64, MimeType = mimeType, FileName = fileName});
}
else
{
    // return file - should just auto download
    return File(bytes, mimeType, fileName);
}

然后，在AJAX處理程序中，您可以使用HTML5 / Javascript使用base64編碼 生成和保存文件，如下所示：

$(":submit").on("click", function(e) {
    e.preventDefault();
    var $form = $(this).closest('form');

    // disable buttons
    var $btns = $(":submit").addClass("disabled");

    $.ajax({
        type: $form.attr("method"),
        url: $form.attr("action"),
        data: $form.serializeArray(),
        success: function (data) {

            var pom = document.createElement('a');
            pom.setAttribute('href', 'data:' + data.MimeType + ';base64,' + data.File);
            pom.setAttribute('download', data.FileName);

            if (document.createEvent) {
                var event = document.createEvent('MouseEvents');
                event.initEvent('click', true, true);
                pom.dispatchEvent(event);
            }
            else {
                pom.click();
            }

            // reset buttons
            $btns.removeClass("disabled");
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
        }
    });
});

IE / Edge支持

對於IE / Edge ，您需要使用window.navigator.msSaveBlob 。 如果要發回base64字符串，則還需要從JavaScript中的base64字符串創建Blob

進一步閱讀 ：

• 將文件返回到ASP.NET MVC中的“查看/下載”
• 通過AJAX調用的ASP.NET MVC控制器FileContent ActionResult