Ẩn hình ảnh sử dụng Javascript sau khi thao tác điều khiển hoàn tất MVC3

Question

Ứng dụng của tôi đã được triển khai bằng MVC 3, .net. Tôi đang cố tạo một tệp excel chỉ bằng một lần bấm nút. Cuộc gọi đến hành động điều khiển được thực hiện bằng cách sử dụng Ajax. Vấn đề chính của tôi là: Trong quá trình tạo tệp, tôi đang cố gắng hiển thị hình ảnh trên màn hình để cho người dùng biết về thao tác đang thực hiện. Tôi có thể hiển thị hình ảnh rất tốt nhưng tôi không thể ẩn nó sau khi hoàn thành thao tác. Các codei đang sử dụng là: Mã

javascript: Mã

$("input.DownloadExcelReport").click(function (e) { 
    e.preventDefault(); 
    var parameter = -- code to fetch parameter value; 
    var outputViewUrl = (the url is created here); 
    showLoading(); -- This function displays the image 
    window.location.href = outputViewUrl; 
}); 

điều khiển hành động:

public ActionResult DownExcelReportForAssortment(Guid parameter) 
{ 

     try 
     { 

      //the contents for the file generation are fetched here.. 
      // Write contents to excel file 
      if (memoryStream != null) 
      { 
       var documentName = "Report.xls"; 
       byte[] byteArrary = memoryStream.ToArray(); 
       return File(byteArrary, "application/vnd.ms-excel", documentName); 
      } 
     } 
     catch (Exception ex) 
     { 
      LogManager.LogException(ex); 
     } 
} 

Tôi không trả về một kết quả Json để kêu gọi javascript phương pháp mà tôi có thể viết mã để ẩn hình ảnh. Tôi đang trả lại một tệp có thể được người dùng lưu và hành động được hoàn tất.

Ai đó có thể xin vui lòng đề xuất/giúp tôi làm cách nào để ẩn hình ảnh khi thao tác tạo tệp hoàn tất?

Đánh giá cao sự giúp đỡ ...

Answer 1

Bạn có thể kiểm tra các following article và đặt này thành hành động. Vì vậy, chúng ta bắt đầu bằng cách định nghĩa một bộ điều khiển:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult DownExcelReportForAssortment(Guid parameter, string tokenId) 
    { 
     // Simulate some heavy work to fetch the report 
     Thread.Sleep(5000); 

     // we fake it 
     byte[] byteArray = System.IO.File.ReadAllBytes(@"c:\test.xls"); 

     var cookie = new HttpCookie("fileDownloadToken", tokenId); 
     Response.AppendCookie(cookie); 

     return File(byteArray, "application/vnd.ms-excel", "report.xls"); 
    } 
} 

và trong giao diện:

@Html.ActionLink(
    "download report", 
    "DownExcelReportForAssortment", 
    "Home", 
    new { parameter = Guid.NewGuid(), tokenId = "__token__" }, 
    new { @class = "download" } 
) 

Bây giờ là bước cuối cùng là để bao gồm các jquery.cookie plugin:

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.cookie.js")"></script> 

và viết một kịch bản để đăng ký sự kiện nhấp chuột của liên kết và theo dõi quá trình tải xuống:

$(function() { 
    var fileDownloadCheckTimer; 

    $('.download').click(function() { 
     var token = new Date().getTime(); 
     $(this).attr('href', function() { 
      return this.href.replace('__token__', token); 
     }); 

     // Show the download spinner 
     $('body').append('<span id="progress">Downloading ...</span>'); 

     // Start polling for the cookie 
     fileDownloadCheckTimer = window.setInterval(function() { 
      var cookieValue = $.cookie('fileDownloadToken'); 
      if (cookieValue == token) { 
       window.clearInterval(fileDownloadCheckTimer); 
       $.cookie('fileDownloadToken', null); 

       // Hide the download spinner 
       $('#progress').remove(); 
      } 
     }, 1000); 
    }); 
});