控制器动作后，使用JavaScript隐藏图像已完成MVC3 [英] Hide image using Javascript after controller action is complete MVC3

问题描述

我的应用程序一直使用MVC 3，.NET Implemeted一个。
我想产生一个按钮，点击一个Excel文件。
到控制器动作的呼叫使用Ajax进行。
我的主要问题是：在文件生成我试图在屏幕上显示的图像，让用户知道迁入操作。我可以很好地显示图像，但我不能把它隐藏在操作完成之后。在$ C $词现在用的就是：

My application has been implemeted using MVC 3, .net. I am trying to generate an excel file at the click of a button. The call to the controller action is made using Ajax. My main problem is: During the file generation i am trying to display an image on the screen to let the user know of the ingoing operation. I can very well display the image but i cannot hide it after the operation is completed. The codei am using is :

的Javascript code：

Javascript code:

$("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;
});

控制器动作code：

Controller Action code:

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);
       }
}

我不一个JSON结果返回到JavaScript方法，我可以写code可以隐藏图像调用。
我返回其可以由用户保存，动作完成的文件。

I do not return a Json result to the calling javascript method where i can write the code to hide the image. I am returning a file which can be saved by the user and the action is completed.

能否有人为请suggect /帮我我怎么可以隐藏图像，一旦文件生成操作完成？

Can somone please suggect/help me of how can i hide the image once the file generation operation is complete?

鸭preciate帮助...

Appreciate the help...

推荐答案

您可以检出<一个href=\"http://webcache.googleusercontent.com/search?q=cache%3ahttp://geekswithblogs.net/Gruff$c$c/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx&hl=en&strip=1\">following文章，并把这个付诸行动。因此，我们首先来定义控制器：

You may checkout the following article and put this into action. So we start by defining a controller:

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");
    }
}

和视图：

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

现在最后一步是将包括 jquery.cookie 插件：

Now the last step is to include the jquery.cookie plugin:

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

和编写脚本来订阅锚的click事件，并跟踪下载进度：

and write a script to subscribe to the click event of the anchor and track the download progress:

$(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);
    });
});

这篇关于控制器动作后，使用JavaScript隐藏图像已完成MVC3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！