Asp.net mvc 3 在控制器操作完成后使用Javascript隐藏图像MVC3

我的应用程序是使用MVC 3、.net实现的。 我试图在点击按钮时生成一个excel文件。 对控制器操作的调用是使用Ajax进行的。 我的主要问题是：在文件生成过程中，我试图在屏幕上显示一个图像，让用户知道输入操作。我可以很好地显示图像，但操作完成后我无法隐藏它。我使用的代码是：

Javascript代码：

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

控制器操作代码：

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方法，在那里我可以编写代码来隐藏图像。 我正在返回一个文件，该文件可以由用户保存，并且操作已完成

文件生成操作完成后，有人可以建议/帮助我如何隐藏图像吗

感谢您的帮助……

您可以签出并将其付诸实施。因此，我们首先定义一个控制器：

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

现在，最后一步是包含插件：

并编写脚本订阅锚定点击事件并跟踪下载进度：

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

$（函数（）{
var文件下载检查计时器；
$（'.download'）。单击（函数（）{
var token=new Date（）.getTime（）；
$（this.attr（'href'，function（）{
返回此.href.replace（“令牌”）；
});
//显示下载微调器
$（'body'）.append（'Downloading…'）；
//开始轮询cookie
fileDownloadCheckTimer=window.setInterval（函数（）{
var cookieValue=$.cookie（'fileDownloadToken'）；
如果（cookieValue==令牌）{
clearInterval（fileDownloadCheckTimer）；
$.cookie（'fileDownloadToken'，null）；
//隐藏下载微调器
$（“#进度”）.remove（）；
}
}, 1000);
});
});

为了避免cookie问题，我更喜欢使用会话变量来处理此问题。因此，在动作中的长时间运行代码之后设置Session变量，并在js中使用类似的轮询脚本，该脚本向另一个动作发送ajax请求，该动作检查会话是否存在。如果出现这种情况，您将终止会话并向js回调返回“true”响应，并关闭加载程序。

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