asp.net-mvc-3 – 在控制器操作完成后使用Javascript隐藏图像MVC

发布时间：2020-12-15 20:52:00 所属栏目：asp.Net 来源：网络整理

导读：我的应用程序已经使用MVC 3,.net实现. 我想点击一个按钮生成一个excel文件. 使用Ajax调用控制器操作. 我的主要问题是：在文件生成期间,我试图在屏幕上显示图像,让用户知道进入操作.我可以很好地显示图像,但操作完成后我无法隐藏它.我使用的代码是： Javascri

我的应用程序已经使用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方法,在那里我可以编写代码来隐藏图像.
我正在返回一个文件,可以由用户保存并完成操作.

可以somone请suggect /帮助我如何在文件生成操作完成后隐藏图像？

感谢帮助……

解决方法

您可以查看 following article并将其付诸实施.所以我们首先定义一个控制器：

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,"report.xls");
    }
}

并在视图中：

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!